/*
Dynamicgrids Style - ver#3
*/

@import "reset.css";
@import "general.css";
@import "form.css";

body {
    width: 100%;
    height: 100%;
    font: normal 11px arial,sans-serif;
    color: #000;
    background: #c5c5c5 url('../image/bg.jpg') top center no-repeat;
}
div.wrapper {
    position: relative;
    width: 920px;
    height: 100%;
    margin: -1px auto 0;
    padding-top: 1px;
    background: url('../image/postitgraph.png') top center no-repeat;
}

/* header */
div#identities {
    position: relative;
    width: 920px;
    margin-top: 30px;
    background: url('../image/logo_bg.png') top left no-repeat;
    z-index: 150;
}
h1#logo {
    height: 25px;
    width: 135px;
    margin-left: 15px;
    background: url('../image/dglogo.png') center no-repeat;
}
h1#logo a {
    display: block;
}
p.motto {
    width: 300px;
    height: 45px;
    margin: 7px 0 0 13px;
    background: url('../image/motto.png') center no-repeat;
}

/* menu */
div#navigation {
    float: left;
    position: relative;
    width: 305px;
    height: 305px;
    margin: 12px 0 0 10px;
}
p.intro {
    width: 290px;
    margin: 10px 0 0 8px;
    font-size: 10px;
    color: #404040;
}
ul.menu {
    width: 290px;
    margin: 35px 0 0 8px;
    z-index: 100;
}
ul.menu > li {
    padding: 0 0 1px 0;
}
ul.menu > li > a {
    display: block;
    color: #404040;
    cursor: pointer;
}
ul.menu > li > a:hover, ul.menu > li.active > a {
    color: #000;
}
p.versions {
    position: absolute;
    bottom: 5px;
    left: 5px;
    width: 290px;
    font-size: 9px;
    color: #404040;
}

/* content */
div#content {
    float: right;
    width: 565px;
    height: 285px;
    overflow: hidden;
    margin: 25px 15px 0 0;
}
ul.content > li {
    margin: 0;
    height: 285px;
    overflow: hidden;
}
ul.content > li div.text {
    float: left;
    width: 275px;
}
ul.content > li div.image {
    float: right;
    margin: 5px 15px 0 0;
}
ul.content > li div.text h2 {
    width: 123px;
    height: 18px;
    margin-bottom: 15px;
}
ul.content > li div.text h4 {
    margin: 5px 0;
}
ul.content > li div.text h4:first-child {
    margin-top: 0;
}
ul.content > li div.text p {
    width: 275px;
    font-size: 11px;
    line-height: 13px;
    color: #404040;
    /*text-align: justify;*/
}

/** about */
li.about h2 {
    background: url('../image/about.png') center no-repeat;
}

/** services */
li.services h2 {
    background: url('../image/services.png') center no-repeat;
}
li.services h3 {
    font: normal 11px arial, sans-serif;
    color: #000;
    cursor: pointer;
}
li.services p {
    margin-left: 7px !important;
}
li.services p.active {
    margin: 5px 0 10px 7px;
}
li.services p a {
    color: #333;
    text-decoration: underline;
}
li.services p a:hover {
    color: #000;
}

/** hadrian */
li.hadrian h2 {
    background: url('../image/hadrian.png') center no-repeat;
}
li.hadrian ul {
    margin-bottom: 5px;
}
li.hadrian h4 {
    margin: 5px 0 2px;
}

/** clients */
li.clients h2 {
    background: url('../image/clients.png') center no-repeat;
}
li.clients h4 {
    font-size: 11px;
    font-weight: normal;
    color: #000;
}
li.clients ul {
    margin: 0 0 10px;    
}
li.clients ul li {
    margin: 0 2px 1px;
    color: #404040;
}

/** support */
li.support h2 {
    background: url('../image/tech.png') center no-repeat;
}
li.support p a {
    color: #333;
    text-decoration: underline;
}
li.support p a:hover {
    color: #000;
}
li.support h4 {
    font-size: 11px;
    font-weight: normal;
    padding-top: 50px;
}
li.support ul li{
    color: #202020;
    
}
li.support ul li span {
    margin-left: 6px;
    color: #404040;
}

/** contact */
li.contact h2 {
    background: url('../image/contact.png') center no-repeat;
}
form.contact input.text.empty,
form.contact textarea.empty {
    border-color: #404040;
    background: #D9D9D9 url('../image/bullet_error.png') right top no-repeat;
}


/* footer */
div#footer {
    width: 920px;
    padding-top: 25px;
    clear: both;
    z-index: 70;
}
p.extra {
    float: right;
    width: 575px;
    margin: 0 15px 0 0;
    padding: 0 ;
    color: #404040;
    font-size: 10px;
}
p.credit {
    float: left;
    width: 210px;
    margin: 1px 0 0 10px;
    font-size: 10px;
    line-height: 130%;
    color:#404040;
}

a.by {
    float: left;
    width: 73px;
    height: 20px;
    margin: 5px 0 0 10px;
    padding: 0 15px 0 0;
    border-right: 1px dotted #6D7073;
    background: url('../image/dgcredit.png') left center no-repeat;
}