/* holds all layout styles and anything that overrides main.css */
@import url(reset.css);
@import url(main.css);

/* palette
orange          :   #fa621f
dark grey       :   #868686
light grey      :   #f5f5f5
navy            :   #001542
deep blue       :   #063eb6
light blue      :   #7cbbf0
very light blue :   #b8dfff
*/

/* branding */
#branding {width:960px; height:130px; margin-top:10px;}
#branding #logo {float:left; width:120px; height:120px; padding-left:184px; padding-right:184px;} 
#branding #logo #home {display:block; text-indent:-9999px; background: transparent url('../assets/logo.jpg') no-repeat; width:120px; height:120px;}
#branding .phone {float:right; text-align:right; margin-top:25px;}
#branding .phone p {margin-right:2px; margin-bottom:5px;}
#branding .phone p a {text-decoration:none;}
#branding .phone #call, #footer div h2 {color:#f8561f; font-size:22px;}
#search {float:left; width:230px; height:25px; margin-top:50px;}
.search_input {background: transparent url('/assets/textbox-search.png') no-repeat; border:none; width:145px; height:20px; padding-left:10px; padding-top:5px; color:#868686; float:left;}
.search_button {float:right; width:75px;}

/* main content */
#outer_wrapper {position:relative; margin-left:auto; margin-right:auto; text-align:center; width:100%;}
#wrapper {text-align:left; width:960px; position:relative; margin-left:auto; margin-right:auto; clear:both; height:auto !important; min-height:1200px;}
#main {height:auto !important; min-height:1000px;}
#content {margin-top:20px; clear:both;}
.content_left {float:left; width:640px;}
.content_right {float:right; width:320px; text-align:center;}
#shadow, #clients, .case_studies {background: transparent url('/assets/shadow.png') no-repeat; width:960px; height:419px; text-align:left;}
#shadow {z-index:-10; text-align:center;}
#clients img, .case_studies a {margin:10px;}
.case_studies div {margin:10px; height:358px; width:568px; border:1px solid #7cbbf0; background-color:#7cbbf0;}
.case_studies div h2, .case_studies div p, .case_studies div ul {margin:10px;}
.case_studies div p, .case_studies div ul {color:#fff; margin-left:45px;}
.case_studies div ul li span {width:120px; display:block; float:left;}
.case_studies div p a {margin:0px;}

/* menu */
#menu {width:960px; height:33px; padding:0px; margin:0px; margin-bottom:30px;}
#menu li {float:left; text-indent:0px; text-align:center; text-transform:lowercase; background: transparent url('/assets/menu-divider.png') no-repeat;}
#menu li a {display:block; width:160px; height:29px; font-size:16px; padding-top:5px; color:#868686; text-decoration:none;}
#menu .no_divider, #menu .selected_section + li {background:none;}
#menu .no_divider:hover, #menu li:hover, #menu .selected_section {background: transparent url('/assets/tab.png') no-repeat;}
#menu li a:hover, #menu .selected_section a {color:#fff;}
#menu li #contact {background: transparent url('/assets/tab-hover.png') no-repeat; text-align:center; color:#fff;}
#menu .architects {background: transparent url('/assets/tab-architect.png') no-repeat; position:absolute; text-align:center; top:174px; right:0px;}
#menu .architects a {color:#fff;}
#menu .architects a:hover {background: #001542 url('/assets/tab-architect-hover.png') no-repeat;}

/* small boxes */
#boxes {clear:both;}
#boxes li {width:260px; height:auto; background-color:#7cbbf0; border:1px solid #fff; padding:20px; float:left; margin-top:20px; text-align:left;}
#boxes li h2 {margin-bottom:0px; color:#fff;}
#boxes li:first-child + li {margin-left:27px; margin-right:27px;}
#boxes li img {width:240px; height:157px; border:10px solid #fff; margin-top:20px; margin-bottom:20px;}
#boxes li .button {float:right;}
#boxes li p {height:170px;}
#boxes .taller p {height:250px;}
#boxes .medium p {height:240px;}
#boxes .medium span {color:#fff; clear:both; margin-top:20px; margin-bottom:20px; width:240px; display:block;}
#boxes .shorter p {height:50px;}

/* map */
#icons {width:100%; height:100px;}
#icons li {width:110px; height:110px; float:left; text-indent:0px; list-style-image:none; text-align:center;}
#icons li:hover {cursor:pointer;}
#map {border: 1px solid #000; margin-bottom:20px;}
#newbuild:hover {background: transparent url('/assets/mapmarkers-newbuild.png') no-repeat center;}
#modular:hover {background: transparent url('/assets/mapmarkers-modular.png') no-repeat center;}
#refit:hover {background: transparent url('/assets/mapmarkers-refit.png') no-repeat center;}

/* project gallery */
#project_gallery li {background: transparent url('/assets/shadow-small.png') no-repeat; width:300px; height:240px; text-align:left; margin-top:20px; float:left; margin-right:30px;}
.boxgrid {width: 280px; height: 200px; margin:10px; float:left; overflow: hidden; position: relative;}
.boxgrid img {position: absolute; top: 0px; left: 0px; border: 0px;}
.boxgrid p {padding: 0 10px; color:#fff;}
.boxcaption {float: left; position: absolute; background: #000; height: 100px; width: 100%; opacity: .8; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";}
.boxcaption h2 {margin:5px 0px 0px 10px; color:#7cbbf0;}
.boxcaption a {color:#7cbbf0;}
.caption .boxcaption {top:200px; left:0px;}

/* footer */
#footer {width:100%; height:76px; clear:both; background: transparent url('../assets/footer.png') center repeat-x; text-align:center; padding-top:20px; padding-bottom:20px; margin-top:10px;}
#footer div {margin-left:auto; margin-right:auto; width:960px; text-align:center; margin-bottom:20px;}
#footer ul {margin-left:auto; margin-right:auto; width:960px;}
#footer ul li {float:left; margin-left:18px; margin-right:18px;}
#footer ul li a {color:#fff; display:block; text-decoration:none;}
#footer ul li a:hover {color:#fa621f;}

/* contact form */
#contact_form, #hq_map {width:430px; min-height:535px; float:left; background-color:#7cbbf0; border:1px solid #fff; padding:20px; padding-bottom:0px; color:#fff; margin-bottom:20px;}
#hq_map {float:right;}
#hq_map #map {width:430px; height:430px;}
.info_error {background-color:red; border: 1px solid red; margin-bottom:20px; padding:10px;}
#contact_form label {width:110px; float:left;}
#contact_form input {background: transparent url('/assets/textbox-trans.png') no-repeat; border:none; width:313px; height:29px; padding-top:5px; padding-left:5px; color:#747474;}
#contact_form textarea {border:none; width:293px; height:204px; background: transparent url('/assets/textbox-multiline-trans.png') no-repeat; overflow:hidden; color:#747474; padding:10px;}
#contact_form select {background: transparent url('/assets/textbox-trans.png') no-repeat; border:none; width:313px; height:25px; clear:both; color:#747474; padding-left:5px;}

/* search */
.search_results {width:580px; min-height:855px; background-color:#7cbbf0; border:1px solid #fff; padding:20px; float:left; margin-bottom:20px; text-align:left;}
.search_result {background-color:#7cbbf0; border:1px solid #fff; padding:20px; height:140px; margin-bottom:20px;}

/* swan story gallery */
#thumbs {width:360px; height:660px; float:left;}
#thumbs li {float:left; padding:0px 7px 14px 7px;}
#thumbs li img {width:90px; height:67px; border:5px solid #fff;}
#thumbs li:hover {cursor:pointer;}
#main_images {width:600px; height:660px; float:right; position:relative;}
#main_images div {position:absolute; top:0px; left:30px;}
#main_images div p {width:540px; text-align:center;}
#main_images div img {border:5px solid #fff; margin-bottom:20px;}

/* misc */
.label {text-align:left;}
.left {float:left;}
.right {float:right;}
.center{text-align:center;}
.clear {clear:both;}
.button {background: transparent url('../assets/button.png') center no-repeat; width:125px; height:32px; text-align:center; display:block; text-transform:lowercase; font-size:14px; color:#fff; padding-top:8px; text-decoration:none;}
.button:hover {background: transparent url('../assets/button-hover.png') center no-repeat; color:#fff; cursor:pointer;}