@import url(http://fonts.googleapis.com/css?family=Quattrocento+Sans);

* { margin: 0; padding: 0; }
body { font-family: 'Quattrocento Sans', sans-serif; font-size: 15px; color: Black; background-color: #b0c4de; background: url(bg3.png) repeat; }

a { text-decoration: none; color: royalblue; }

.cb { clear: both; }

#header { margin: 50px 0 80px 106px; }

#main { margin: 20px 0 0 20px; }

#main { display: table; }
#main > div { display: table-row; }
#main > div > div { display: table-cell; vertical-align: top; }

#menu { width: 200px; height: 500px; padding: 15px 50px 0 0; }
#menu a { color: Black; }

#menu > ul { list-style-type: none }
#menu > ul > li { text-align: right; text-transform: uppercase; margin: 25px; padding: 5px 8px 5px 5px; border-right: 2px solid transparent; letter-spacing: 0.1em;}
#menu > ul > li.active { border-right: 2px solid gray; }
#menu > ul > li:hover { border-right: 2px solid royalblue; }

#menu .logo { margin: 10px auto; display: block;}
#menu .logo.multimedia { }
#menu .logo.perlend { }

#content .articles { display: table; }
#content .articles > div { display: table-row; }
#content .articles > div > div { display: table-cell; }

#content .article > div { width: 400px; position: relative; }

#content .article > div .adate { text-align: center; background: url(../images/date_banner.png) no-repeat; padding: 5px; width: 65px; height: 43px; position: absolute; top: -19px; left: 20px; }
#content .article > div .adate .month, #content  .article > div .adate .year { color: White; text-transform: uppercase; padding-right: 28px; }
#content .article > div .adate .month { font-size: 1.2em; margin-top: -2px; }
#content .article > div .adate .year { font-size: 0.9em; margin-top: 3px; }

#content .article > div .acontent { background: White; position: absolute; top: 190px; width: 283px; margin: 0 20px; padding: 15px; box-shadow: 0px 10px 10px #dddddd;}
#content .article > div .acontent .atitle { text-transform: uppercase; font-size: 1.15em; padding-bottom: 15px; }
#content .article > div .acontent .atext { font-size: 1em; text-align: justify; }
.acontent .atext a { font-size: 0.9em; }

#footer { border-top: 1px solid Gray; margin: 50px 20px 0; padding: 20px; }
#footer .logo { float: left; width: 200px; }
#footer .logo img { display: block; margin: 0 auto; }
#footer .text { padding: 15px 0; text-transform: uppercase; }

/* Test  Asvet 06112013 */
/*#menu { width: 200px; height: 500px; padding: 15px 50px 0 0; position:fixed;z-index:5;background-color:#fff;left:0} 
#footer{ position:absolute;bottom:0}
#main,#footer{ margin-left:277px;}  
*/
#content{
display:inline-block !important;
width: 900px;
overflow:hidden;
}
#menu{
 padding-top:0px;
}
.articles {
    margin-top: 20px;
    height: 485px;
}