/* 
    Josef Burger - personal websites
    Created on : 29.3.2015
    Author     : Josef Burger
*/

body {
    background-color: #f2f2f2;
    text-align: center;
    color: #424242;
    margin: 0; padding: 20px 0;
    font: 1.5773em 'Roboto', sans-serif;
    line-height: 1.6106;
}

#page {margin: 0 auto; text-align: left; border: 1px solid #e5e5e5; border-top: none;}
#header {height: 220px; padding: 25px 0 0 0; background-image: url(../images/header-background.png);}
#header #photo {border: 5px solid white; margin: 0 0 0 25px; border-radius: 5px;}
#header #top {height: 115px; color: white;}
#header #top #top-name {padding-top: 5px; font-size: 35px;}
#header #top #top-description {padding-top: 3px; color: #9bbad2; font-size: 20px;}
#header #menu {height: 80px;}
#header #menu a {text-decoration: none; color: #acc7d8; font-weight: bold;}
#header #menu a:hover {text-decoration: underline; color: white;}
#header #menu .item {display: block; float: left; width: 127px; height: 80px; line-height: 80px; text-align: center; border-left: 1px solid #2e78a6;}
#header #menu a.active {color: white;}
#header #menu a.active .item {background-image: url(../images/menu-background-hover.png)}

#content {min-height: 250px; background-image: url(../images/content-background.png); border-bottom: 1px solid #d8d8d8;}
#content-padding {padding: 35px 30px 40px 30px;}
#content h1, #content h2, #content h3 {color: #185b8f; line-height: 30px;}
#content h1 {font-size: 30px; margin-bottom: 20px;}
#content h2 {font-size: 20px; margin: 25px 0 3px 0;}
#content p {margin: 0 0 20px 0; padding: 0;}

#footer {padding: 17px 30px 0; text-align: left; color: #afafaf; font-size: 92%;}
#footer a {color: #afafaf; text-decoration: none;}
#footer a:hover {text-decoration: underline;}











/*** SITES ********************************************************************/

#content .panel {width: 260px; min-height: 300px; color: #333; background-image: url(../images/panel-background-bottom.jpg);}
#content .panel .panel-inner {width: 260px; min-height: 248px; background-image: url(../images/panel-background-top.jpg); background-repeat: no-repeat;}
#content .panel .panel-inner .panel-padding {padding: 40px 25px 55px 25px;}
#content .panel .divider {width: 100%; height: 2px; border-top: 1px solid #cecece; border-bottom: 1px solid #cecece; margin: 25px 0;}
#content .panel table {width: 100%;}
#content .panel table td {padding: 8px 0;}
#content .panel table th, #content .panel strong {color: #43433d;}

#content .block {width: 100%; background-color: white; border: 1px solid #ececec; border-top: none; margin-bottom: 10px;}
#content .block:hover {background-color: #f0f0f0;}
#content .block .block-padding {width: 100%; min-height: 120px; border-bottom: 1px solid #d1d1d1; background-repeat: no-repeat; background-position: 20px center;}
#content .block .block-padding .block-text {padding: 10px;}

/* Main site */
#site-main {}
#site-main h1 {display: none;}
#site-main #site-main-first .pull-left {width: 520px;}
#site-main #site-main-first .pull-right {width: 250px;}
#site-main #site-main-first .pull-right h2 {margin-top: 0;}
#site-main .divider {width: 100%; height: 2px; border-top: 1px solid #cecece; border-bottom: 1px solid #cecece; margin: 7px 0 25px 0;}
#site-main .social img {margin: 0 3px;}

/* About me */
#site-aboutme {}
#site-aboutme .panel {height: 1050px;}

/* Services */
#site-services {}
#site-services .block.item01 .block-padding {background-image: url(../images/services-01.png);}
#site-services .block.item02 .block-padding {background-image: url(../images/services-02.png);}
#site-services .block.item03 .block-padding {background-image: url(../images/services-03.png);}
#site-services .block.item04 .block-padding {background-image: url(../images/services-04.png);}
#site-services .block.item05 .block-padding {background-image: url(../images/services-05.png);}
#site-services .block .block-padding .block-text {padding: 20px 20px 20px 120px;}
#site-services .panel {height: 880px;}

/* References */
#site-references h1 {display: none;}
#content .block.reference {width: 258px; float: left; margin: 0 5px 18px 5px; cursor: pointer;}
#content .block.reference .block-padding {width: 258px;}
.block.reference img.reference-image {display: block; width: 240px; height: 150px; background-color: silver;}
.block.reference p.reference-name {margin: 0; padding-top: 20px; font-weight: bold; color: #3e4a54;}
.block.reference div.reference-description {display: none;}

#references-menu-block {width: 100%; text-align: center; margin-bottom: 30px;}
#references-menu {width: 60%; height: 38px; margin: 0 auto; line-height: 38px; border: 1px solid #dcdcdc;}
#references-menu a {display: inline-block; width: 48%; height: 38px; font-weight: bold; text-decoration: none; color: #3f3e38;}
#references-menu a.active {background-image: url(../images/references-menu-active.png);}
#references-menu a:hover {text-decoration: underline;}
#references-menu .divider {color: #dcdcdc;}

#referenceModal .modal-body {max-height: 800px;}
#referenceModal.modal {top: 2%; width: 800px; margin-left: -400px;}

/* Contact */
#site-contact {}
#site-contact form label {font-weight: bold;}
#site-contact form input, #site-contact form textarea {border-radius: 0;}
#site-contact form .span6 input {width: 245px; padding: 8px 5px;}
#site-contact form .span12 textarea {width: 520px; height: 200px; padding: 8px 5px; resize: none;}
#site-contact form .submit {padding: 8px 15px; margin-right: 7px;}