/*
Theme Name: NTA
Theme URI: http:/bartgoselink.nl
Description: This theme is designed and coded for NTA
Author: Bart Goselink
Version: 1.0
License: GNU General Public License
License URI: license.txt
Tags: blue
*/

@import url("reset.css");

body, html {
    height: 100%;
}

body{
	background:#fff url(images/header_background.png) repeat-x;
	font-family: "Myriad Pro", Helvetica, Geneva, Arial, "SunSans-Regular", sans-serif;
	margin:0;
	padding:0;
	color:#000;
	font-size:12px;
	line-height: 16px;
}

ul{
	list-style: none;
}

textarea{font-family: "Myriad Pro", Helvetica, Geneva, Arial, "SunSans-Regular", sans-serif; font-size: 15px}
input:focus{border: 1px solid #717171;}
/*
darkblue color: #002a5c;
lightblue: #007dc3;
*/

p{margin:0 0 10px; font-size: 12px;}
h1{font-family: "century gothic",verdana,arial,helvetica,sans-serif; color: #002a5c; font-size:22px; margin:0 0 5px 0; line-height:24px;}
h2{font-family: "century gothic",verdana,arial,helvetica,sans-serif; color: #002a5c; font-size:12px; margin:0 0 0px;}
h3{font-size:13px; color: #002a5c; margin:0 0 0px;}

a{color:#007dc3; text-decoration: none;}
a:visited{color:#007dc3}
a:hover{color:#003f63;}

#header{height: 49px; width: 980px; margin: 0 auto; border-bottom: 1px solid white; position: relative;}
#navigation{font-family: "century gothic", verdana, arial, helvetica, sans-serif; font-size: 14px; font-weight: normal; height: 49px; position: absolute;}
#navigation li{float: left;}
#navigation a{display:block; color: #dcf0fc; text-decoration: none; padding: 0 20px; text-transform: uppercase; height: 49px; line-height: 50px; letter-spacing: 1px; font-weight:bold; text-shadow: #0e3e5e 1px 1px 0px;}
#navigation li.active a{background-image: url(images/navigation_divider.png), url(images/navigation_divider.png), url(images/navigation_active_background.png); background-repeat: no-repeat; background-position: bottom left, bottom right, bottom center;color: white;}
#navigation a:hover{color: #fff; text-shadow: #222 -1px -1px 0px; height: 48px;}
#navigation li.active a:hover{color: #fff; height: 49px; margin-top: 0px;}
#logo{position: absolute; z-index: 9999; /*margin: 0 0px 0 137px;*/ right: 50px;}

div#wrapper, #footerWrapper, #footerNavigation{margin:0 auto; width:1000px;}

#main{overflow: hidden;}
/*#breadcrumb{width: 980px; height: 30px; background: url(images/breadcrumb_bottom.png) no-repeat; position: absolute; z-index: 0;}*/

#intro{width: 100%; height: 200px; background: url(images/introbackground.gif); position: absolute; z-index: -1; left: 0; top: 50px; text-align: center;} 
#homeActions{position:relative; z-index: 11; top: 180px; width: 920px; height: 74px; background: url(images/home_actions_background.png) no-repeat; padding: 0 40px;}
#homeActions li{float: left;}
#homeActions a{ display: block; height: 74px; line-height: 50px; font-size: 13px; margin: 0 50px 0 0; background: url(images/arrow_right.png) no-repeat right 15px; padding-right: 20px;}

.columns{margin:0 10px;}
.column{width: 300px; float: left; margin: 10px 0 0 20px;}
.columns.front{margin-top: 200px; overflow: auto;}
.columns.front .column{width: 290px; margin-left: 30px; background: none; position: relative; height: 220px;}
.columns.front .column .button{position: absolute; bottom: 0;}
.column h1{font-size: 16px; color: #002a5c; margin-bottom: 12px;}
.action h1{font-size: 16px; color: #002a5c; margin-bottom: 0px;}
.action p{line-height: 18px;}
.column.introSize p, .column.introSize li{font-size: 14px; line-height: 21px;}
.columns.front p{font-size: 13px; line-height: 21px;}
h1.quote{text-align: center; font-size: 30px; font-style: italic; margin: 20px 0 40px; font-weight: bold; line-height: 45px; letter-spacing: 1px;}

.columns.services .column{margin-top:0; padding-top: 60px;}
.service .icon{float: left; margin: 7px 10px 10px 0;}
.serviceTextBox{float: right; width: 470px; overflow: auto;}
.columns.services .one{width:640px; background: url(images/services_shadow.png) no-repeat right top; min-height: 450px; margin: 0;}
.service h1{font-weight: bold;}
.service h1 a{color: #002a5c;}
.service li{padding: 5px 40px 20px 0px; background: url(images/service_divider.png) no-repeat right bottom; overflow: auto;}
.serviceDescription{padding: 0 40px 0 20px; width: 580px !important;}
.moreServices h1{ padding-bottom: 3px !important;}
.moreServices h1, .moreServices li{background-image: url(images/service_divider.png); background-position: right bottom; background-repeat: no-repeat; overflow: auto; margin: 0 0 0 -20px; padding: 6px 0 6px 20px;}
.moreServices li p{ margin: 0;}
.action{margin: 0 0 30px 0; overflow: auto;}
.columns.services .two{margin: 0; width: 320px;}
.columns.services .two .action{padding: 0 0 0 20px;}
.column.two{background: url(images/service_background.png) no-repeat;}

.column ul{margin: 10px 0px 10px 16px; list-style: disc;}
.service{list-style: none !important;}
.columns.contact{margin-top: 60px;}
.column.contactForm{width: 620px; background: none;}
.inputWrapper{width: 620px; padding: 5px 0; float: left;}
.inputWrapper label{ padding: 0 10px 0 0; display:block;float: left; width: 100%; /*line-height: 40px;*/ /*font-size: 15px;*/ text-align: left; /*color: #454545;*/ font-weight: bold; font-size:13px; color: #002a5c;}
.inputWrapper input{ height: 38px; line-height: 38px; font-size: 15px; border: 1px solid #b9b9b9; width: 398px; float: left; padding: 0 10px;}
.textAreaWrapper{margin-top: 20px;}
.textAreaWrapper label{display: block; float:left; padding: 0 10px 0 0; height: 20px; line-height: 20px; text-align: left; font-weight: bold; font-size:13px; color: #002a5c;}
.textAreaWrapper textarea{width: 550px; margin: 0 10px 0 0; height: 100px; border: 1px solid #b9b9b9; padding: 10px; }
p.warning{display: none;text-align: left; width: 550px; margin: 0 10px; height: 20px; line-height: 20px; color: red;}
.checkboxWrapper{width: 600px; padding: 10px; background: #f7f7f7; border-radius: 5px; margin: 0 0 15px 0;}
.mainCheck{font-weight: bold;}

.offerte h1{font-size: 24px;}
.offerte h2{font-size: 18px; margin: 22px 0 6px 0;}
.offerte p{font-size: 13px;}

.more{display: block; text-align: right; margin-top: 10px;}

.projects{background: white; width: 940px; height: 355px; *height: 367px; border: 1px solid #d8d8d8; border-radius: 5px; margin: 60px auto 0; position: relative;}

.projectList .active{position:relative; background: url(images/active_project.png) no-repeat; color: #f8f8f8 !important; height: 71px; width: 294px; left:-7px; z-index: 1; margin-top: -8px; border:none;}
.projectList{float: left;}
.projectList li{height:62px; width: 279px; background: #f7f7f7; padding: 6px 10px 2px 12px; border-bottom: 1px solid #e3e3e3;}
.projectList li.first{border-top-left-radius: 5px}
.projectList li.last{border-bottom-left-radius: 5px; border-bottom: 1px solid #f7f7f7;}
.projectList h2, .projectList p{color: #444444;}
.projectList p{font-size: 12px; margin: 5px 0 0 0;}
.projectList .active h2, .projectList .active p{color: #f8f8f8;}
.tags{font-size: 10px; float: right; position: relative; bottom: 0;}

.project{display: none; padding: 15px 10px 10px 25px; float: right; width: 604px; background: url(images/project_left_background.png) no-repeat left top; border-bottom-right-radius: 5px; border-top-right-radius: 5px; height: 330px; position: absolute; left: 300px;}
.project.active{display: block;}
.project h1{font-size: 15px;}
.projectInfo{font-weight: bold; color: #002a5c;}
.projectInner{display: inline-block; margin-left: 15px;}
.focus{overflow: hidden; display: inline-block;}
.focus h3{width: auto; display: block; margin-left: 15px;}
.focusInner{background: #f7f7f7; border:1px solid #b9b9b9; float: left; padding: 10px 15px; width: 570px;}
.focusInner p{margin: 0;}
.projectColumn{ float: left; width: 500px; margin: 0 10px 10px 0;}
.projectColumn p{font-size: 13px; line-height: 20px;}
.clients{margin: 20px 30px;}
.clients h1{font-size: 15px; margin: 0 0 0 20px;}
.clients ul{height: 150px; width: 940px; border: 1px solid #d8d8d8; border-radius: 5px; overflow:hidden;}
.clients li{margin: 10px; float:left;}

.button{ border:none; font-family: "century gothic", verdana, arial, helvetica, sans-serif; display: block; height: 35px; line-height: 35px; width: 280px; margin: 5px 10px; color: #d4eefd; font-size: 14px; text-align:center; float:left; position: relative; font-weight: bold; letter-spacing: 1px;}
.button.gray{color: #002a5c; background: url(images/button_gray.png);}
.button.gray:hover{color: black;}
.button.blue{color: #d4eefd; background: url(images/button_blue.png);}
.button.blue:hover{color: #fff;}

.notice{font-size: 12px;color: #2a2a2a;font-weight: bold;float: left;width: 100%;}

#footer{height: 178px; background-color: #111; background-image: url(images/footer_background_shadow.png), url(images/footer_background.png); background-repeat: no-repeat, repeat-x; background-position: center 2px, 0 0; width: 100%; color: white; margin-top: 80px; border-top: 1px solid black; border-bottom: 0px solid #828282; position: ;}
.footerColumn{height: 137px;width: 220px; float: left; margin: 0 0 0 20px; padding: 38px 0 0 0; color: #ececec; font-size: 12px; text-shadow: #000 1px 1px 0px;}
.footerColumn h3{color: #ececec; text-transform: uppercase; letter-spacing: 1px; font-size: 14px;}
.lowProfile{color: #d3d3d3;}
.footerColumn a{color: #fedfb9;}
.footerColumn a:hover{color: #fdb052;}
/*.footerColumn a:focus{padding:1px 0 0 1px;}
*/
#footerWrapper{padding: 0 10px;}
#footerNavigation{overflow: auto; height: 50px; list-style-type: none;}
#footerNavigation li{ float: right; line-height: 50px; margin: 0 24px 0 0; color: #767878;}
#footerNavigation li a{color: #767878;}
#footerNavigation li a:hover{color: #000;}