Скрытый блок, по кнопке выдвигается, на css, нужна помощь

Здравствуйте уважаемые пользователи форума.

Не хватает знаний что бы доделать блок на css

Кнопка ( Авторизация )

Нажимаю и блок выезжает, и в блоке импуты для авторизациии и кнопки для входа.

Выглядит это так:

Авторизация

После клика по кнопке авторизация, сам блок.

HTML

<div id="pokazat">
<a href="#" class="menutop" onClick="document.getElementById('pokazat').style.display='none';document.getElementById('skryt').style.display='';return  false;">Авторизация</a></div> 

<div id="skryt" style="display:none">
<center>
<div style="padding-top:40px"></div>
<div id="login_error"></div>
<form action="/users/login" method=post id="userform">
<input id="login_name" name="username" type="text" class="reggl" style="width: 230px" placeholder="Введите логин" title="Введите логин"><br/>
<input id="login_password" name="password" type="password" class="reggl" style="width: 230px" placeholder="Введите пароль" title="Введите пароль"><br/>
<br/>
<input type="submit" id="login_login" title="Авторизоваться на сайте" name="submit" value="Авторизоваться" class="poiskknoppp"><br/>
<div style="margin-bottom:10px"></div>
<a href="/users/forgot" title="Восстановить пароль ?"><div class="poiskknopp">Забыли пароль ?</div></a>
<input type="hidden" name="enter" value="1"></form>
</center>

<a href="#" class="menutophover" onClick="document.getElementById('skryt').style.display='none';document.getElementById('pokazat').style.display='';return  false;">Закрыть авторизацию</a>
</div> 

CSS

.menutop {
text-transform: uppercase;
position: relative;
display: block;
font-size: 14px;
font-weight: bold;
background: #F89DC2;
text-align: center;
width: 340px;
height: 40px;
line-height: 40px;
color: #000;
text-decoration: none;
border-left: solid 3px #fff;
border-right: solid 3px #fff;
border-bottom: solid 3px #fff;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
margin-bottom: 15px;
-webkit-box-shadow: 0px 5px 9px 0px rgba(50, 50, 50, 0.32);
-moz-box-shadow:    0px 5px 9px 0px rgba(50, 50, 50, 0.32);
box-shadow:         0px 5px 9px 0px rgba(50, 50, 50, 0.32);
-webkit-transition: background 0.8s ease;
-moz-transition: background 0.8s ease;
-o-transition: background 0.8s ease;
-khtml-transition: background 0.8s ease;
transition: background 0.8s ease;
}
.menutop a{
color: #000;
}
.menutop:hover{
background: #D23771;
color: #fff;
border-left: solid 3px #fff;
border-right: solid 3px #fff;
border-bottom: solid 3px #fff;
-webkit-transition: background 0.8s ease;
-moz-transition: background 0.8s ease;
-o-transition: background 0.8s ease;
-khtml-transition: background 0.8s ease;
transition: background 0.8s ease;
}
#skryt {
margin-top: -15px;
background: #FFCCE2;
height: 238px;
min-height: 100%;
width:346px;
-webkit-box-shadow: 12px 12px 11px 0px rgba(50, 50, 50, 0.49);
-moz-box-shadow:    12px 12px 11px 0px rgba(50, 50, 50, 0.49);
box-shadow:         12px 12px 11px 0px rgba(50, 50, 50, 0.49);
border-bottom: solid 3px #D23771;
}
.menutophover {
margin-top: 33px;
text-transform: uppercase;
position: relative;
display: block;
font-size: 14px;
padding-bottom:3px;
font-weight: bold;
background: #fff;
text-align: center;
width: 340px;
height: 40px;
line-height: 40px;
color: #000;
text-decoration: none;
border-left: solid 3px #fff;
border-right: solid 3px #fff;
border-bottom: solid 3px #fff;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
margin-bottom: 15px;
-webkit-box-shadow: 12px 12px 11px 0px rgba(50, 50, 50, 0.49);
-moz-box-shadow:    12px 12px 11px 0px rgba(50, 50, 50, 0.49);
box-shadow:         12px 12px 11px 0px rgba(50, 50, 50, 0.49);
-webkit-transition: background 0.8s ease;
-moz-transition: background 0.8s ease;
-o-transition: background 0.8s ease;
-khtml-transition: background 0.8s ease;
transition: background 0.8s ease;
}
.menutophover a{
color: #000;
}
.menutophover:hover{
background: #D23771;
color: #fff;
border-left: solid 3px #fff;
border-right: solid 3px #fff;
border-bottom: solid 3px #fff;
-webkit-transition: background 0.8s ease;
-moz-transition: background 0.8s ease;
-o-transition: background 0.8s ease;
-khtml-transition: background 0.8s ease;
transition: background 0.8s ease;
}

Несколько вопросов:

Как сделать так что бы блок сам закрывался если кликнуть по пустому месту на сайте.

У авторизации есть валидатор, так вот он стоит чуть выше где вводишь логин, и если ввести не правильно и он пишет что логин не правильный, ну появляется, то он раздвигает поле, выходит очень не красиво, как можно сделать что бы поле раздвигалось то же ?

Скрин как это щас смотрится, когда валидатор появился.

Заднее поле не раздвинулось, оно зафиксировано.

Как сделать затемнение всего сайта при клике на открытие блока, что бы акцент был на блок, что бы блок было видно, а все остальное затемненное.

Стиль есть такой, вот только не хватает знаний как это правильно сделать.

CSS

Я если его подключаю, то он мне весь блок сдвигает непонятно куда, а если в css этом убрать top: 0; left: 0;, то затемнения на сайте не будет на всем сайте.

Простые проблемы, моих знаний не хватает что бы реализовать то что я хочу.

---------- Добавлено 05.06.2014 в 19:33 ----------

Что бы блок раздвигался когда появляеться валидторк я реализовал, добавил в стиль #skryt

height: 100%;

min-height: 238px;