/* CSS Document: style.css        */
/* Creation Date: 04/29/07        */
/* Last Modified: 07/26/07        */
/* Author: Pavel Svitak           */
/* E-mail: pavelsvitak@gmail.com  */

/* HTML TAGS */
body{text-align: center; margin: 0; padding: 0;	font-family: Arial, Helvetica, sans-serif; font-size: 62.5%; background-color: #000f11; line-height: 1.8;}
img{border: 0px;}

.clear{clear: both;}

#top{position: absolute; top: 0; left: 0;}

/* HEADER TOP LINE*/
#toplineBox{margin-left: auto; margin-right: auto;	width: 810px; height: 4px;}
#toplineDark{margin-top: 0px; width: 100%; height: 4px; background-color: #000f11;}
#toplineLight{float: right; margin-right: 0px;	width: 269px; height: 4px; background-color: #92bccc;}

/* HEADER */
#headerContainer{ width: 100%; height: 146px; background-image: url(../img/bg_header.jpg); background-repeat: repeat-x; border-bottom: solid 1px #007585;}
#headerWrap{margin-left: auto;	margin-right: auto;	width: 810px; height: 132px; border-bottom: solid 1px #979c9c;}
#headerLogo{float: left; width: 124px;	height: 60px; margin-top: 72px;}

/* MENU */
#menuWrap{float:left; width: 230px; height:50px; margin: 80px 0 0 417px;}


#menu{list-style: none; padding: 0; margin: 0;}
#menu li{display: inline;}
#menu span{display: none;}
#menu a{display: block; text-indent: -4000%; position: absolute;}
#menu a:hover{border-bottom: solid 3px #dc00c0;}
#menu a:hover span{display: block;}

#menu .about{width: 72px; height: 50px; background: url(../img/menu_about.jpg) no-repeat;}
#menu .about span{background: url(../img/menu_about.jpg) no-repeat;}

#menu .work{margin-left: 72px; width: 65px; height: 50px; background: url(../img/menu_work.jpg) no-repeat;}
#menu .work span{background: url(../img/menu_work.jpg) no-repeat;}

#menu .contact{margin-left: 137px; width: 83px; height: 50px; background: url(../img/menu_contact.jpg) no-repeat;}
#menu .contact span{background: url(../img/menu_contact.jpg) no-repeat;}

/* MAIN ELEMENTS */
#title{margin: auto; width: 810px; height: 199px; background-image: url(../img/title.jpg); background-repeat: no-repeat;}
#title h1{margin: 0; padding: 0; display: none;}
#container{margin: auto; padding: 0px; width: 810px; background-image: url(../img/bg_container.jpg); background-repeat: repeat-y;}
#containerBgtop{width: 810px; height: 20px; background-image: url(../img/bg_container_top.jpg); background-repeat: no-repeat;}
#containerBgbottom{width: 810px; height: 20px; background-image: url(../img/bg_container_bottom.jpg); background-repeat: no-repeat;}

/* FEATURED WORK BOX */
#featuredworkboxWraper{margin: 0px 20px auto; background-color: #ceccc0;}
#featuredworkboxTitle{margin: 0px 20px 0px; height: 52px; border-bottom: solid 1px #8d9089; background-image: url(../img/fwtitle.jpg); background-repeat: no-repeat;}
#featuredworkboxPic{margin: 0px; width: 770px; height: 255px;}
#featuredworkboxPic span{display: none;}

/* SERVICES */
#servicesWraper{margin: 0px 20px 0px;}

.serviceColumn{float: left; width: 256px;}
.serviceIcon{float: left; width: 44px; height: 56px;}
.serviceText{float: left; width: 202px; text-align: left; font-size: 1.2em; padding: 0px 5px 0px;}

#serviceHeaderColumn1{}
#serviceHeaderColumn1 h2{margin: 0; padding: 0; width: 256px; height: 35px; background-image: url(../img/service_header_column1.jpg); background-repeat:no-repeat; }
#serviceHeaderColumn1 h2 span{display: none;}

#serviceHeaderColumn2{}
#serviceHeaderColumn2 h2{margin: 0; padding: 0; width: 256px; height: 35px; background-image: url(../img/service_header_column2.jpg); background-repeat:no-repeat;}
#serviceHeaderColumn2 h2 span{display: none;}

#serviceHeaderColumn3{}
#serviceHeaderColumn3 h2{margin: 0; padding: 0; width: 256px; height: 35px; background-image: url(../img/service_header_column3.jpg); background-repeat:no-repeat;}
#serviceHeaderColumn3 h2 span{display: none;}

/* WORK PAGE */
#lightbg{margin: auto; width: 810px; height: 30px; background-image: url(../img/bg_light.jpg); background-repeat: no-repeat;}

#workWrap{margin: 10px 30px 0px; text-align: left;}

.infoWrap{float: left; margin: 0 0 20px 0; border-bottom: solid 1px #999; width: 100%; padding-bottom: 20px; }
.infoImg{float: left; width: 513px;}
.infoBox{float: left; margin: 0px 0px 0px 20px; width: 217px; height: 184px; line-height: 1.4em;}
.infoBox h3{margin: 0px 0px 10px 0px; font-size: 1.4em; color: #000f11;}
.infoBox p{margin: 0px; padding-bottom: 10px; font-size: 1.1em; border-bottom: solid 1px #999;}
.infoTech{padding: 10px 0px 10px; text-align: right; font-size: 1.1em; color: #999; margin-bottom: 10px;}

.infoButtonBox{display: inline;}
.infoButton{float: left; width: 112px;}
.infoButtonMargin{float: right; width: 34px;}

/* ABOUT PAGE */
#aboutWrap{margin: 0px 20px auto;}
#aboutWrap h3{margin: 0px 0px 10px 0px; font-size: 1.4em; color: #000f11;}
#aboutLeft{float: left; margin: 0; padding-right: 40px; width: 520px; font-size: 1.2em; text-align: left;}
#aboutLeft img{float: left; margin-bottom: 80px;}
#aboutLeft a:link, #aboutLeft a:visited, #aboutLeft a:hover, #aboutLeft a:active{color: #000f11; font-weight: bold;}
#aboutRight{float: right; margin: 0; padding: 0; width: 210px; font-size: 1.2em; text-align: left;}
#aboutRight a:link, #aboutRight a:visited, #aboutRight a:hover, #aboutRight a:active{margin: 0 0 15px 10px; color: #000f11; font-size: 1.1em; font-weight: bold;}

/* FIND ME ELEMENTS */
.FindmeBox{margin-bottom: 10px;}
.Findme{margin-bottom: -3px;}
.FindmeRow{margin-bottom: 20px;}

/* CONTACT PAGE */
#contactWrap{margin: 0px 20px auto;}
#contactWrap h3{margin: 0px 0px 10px 0px; font-size: 1.4em; color: #000f11;}
#contactLeft{float: left; margin: 0; width: 385px; font-size: 1.2em; text-align: left;}
#contactRight{float: right; margin: 0; padding: 0 30px 0; width: 325px; font-size: 1.2em; text-align: left;}
#contactRight a:link, #contactRight a:visited, #contactRight a:hover, #contactRight a:active{margin: 0 0 15px 10px; color: #000f11; font-size: 1.1em; font-weight: bold;}

/* FOOTER */
#footerWrap{margin: auto; width: 810px; height: 50px;}
#footerCopyright{float: left; width: 300px; margin: 10px 0px 0px; text-align: left; font-size: 1.1em; color: #CCC;}
#footerValid{float: right; width: 200px; margin: 10px 0px 0px; text-align: right; font-size: 1.1em; color: #CCC;}
#footerCopyright a, #footerValid a{border-bottom: dotted 1px #CCC; color: #CCC; text-decoration: none; padding: 5px;}
#footerCopyright a:hover, #footerValid a:hover{background-color: #CCC; color: #000f11;}