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

/* palette

lime            :   #ade346
orange          :   #f89715
blue            :   #4d8ae9
grey            :   #7e7e7e
dark grey       :   #4c4c4c
light grey      :   #d8d8d8

*/

/* branding */
#branding {width:900px; height:142px; border: none; margin-top:0px; position:absolute; top:0px;}
#branding a span {display: none;}
#contact_details {float:right; margin-top: 5px; width:235px;}
#contact_details li {float:right;}
/* #contact_details > li:first-child {border-left: dotted 1px #9b9b9b; padding-right:0px;} */
#phone {float:right; margin-top:5px; font-size:18px;}

/* content holders */
#cwd {text-align:center;}
#main {text-align:left; width:900px; min-height:800px; height:auto !important; margin-top:152px; margin-left:auto; margin-right:auto;}
.content {clear:both;}

/* menu */
#menu {width:900px; padding:0px; list-style: none; clear:both;}
#menu li, #footer li {float:left;}
#menu li a, #footer li a {color:#fff; text-decoration:none;}
#menu li a {text-indent:-9999px;}

/* home */
.intro {float:right; padding: 20px 20px 20px 20px; width:260px; height:346px;}
.intro img {float:left; margin: 5px 15px 5px 0px; border: 1px solid #7e7e7e; padding:2px;}

/* main image tags */
#tag {position:relative;}
#tag p {margin-bottom:0px;}
#tag div {position:absolute; border: 1px solid #f2f2f2;}
#tag div {background: transparent url('/assets/back-trans.png') repeat;}
#about {padding: 10px 10px 10px 40px; left:220px; width:300px; top:100px; text-align:right;}
#services {padding: 10px 10px 10px 40px; left:170px; width:350px; top:50px; text-align:right;}
#portfolio {padding: 10px 40px 10px 10px; left:20px; width:300px; top:20px; text-align:left;}
#testimonials {padding: 10px 10px 10px 40px; left:220px; width:300px; top:190px; text-align:right;}
#faq {padding: 10px 40px 10px 10px; left:20px; width:350px; top:60px; text-align:left;}
#contact {padding: 10px 40px 10px 10px; left:20px; width:460px; top:20px; text-align:left;}

/* main images */
#about_image {background: transparent url('/assets/web-design-cheshire.jpg') no-repeat;}
#services_image {background: transparent url('/assets/web-design-services.jpg') no-repeat;}
#portfolio_image {background: transparent url('/assets/web-design-portfolio.jpg') no-repeat;}
#testimonials_image {background: transparent url('/assets/web-design-testimonials.jpg') no-repeat;}
#faq_image {background: transparent url('/assets/web-design-faq.jpg') no-repeat;}
#contact_image {background: transparent url('/assets/web-design-contact.jpg') no-repeat;}
#about_image, #portfolio_image, #services_image, #testimonials_image, #faq_image, #contact_image {width:900px; height:391px;}
#carousel_container {margin:-10px 30px 5px 45px;}
#carousel li {margin:4px; height:75px;}

/* homepage promos */
.testimonial {background: transparent url('/assets/testimonial-small.png') no-repeat; width:261px; height:363px;}
.technologies {background: transparent url('/assets/technologies-small.png') no-repeat; width:261px; height:364px;}
.main_promo {background: transparent url('/assets/box-large.png') no-repeat top; width:584px; height:200px; border: 1px solid #ade346; float:left;}
.main_promo h2, .services_list h2, .sub_promos li h2, .client h2 {margin:5px 0px 5px 10px;}
.main_promo p, .services_list p, .sub_promos li p {margin:20px;}
.sub_promos {margin-top:10px; float:left; display:inline; clear:both; width:586px;}
.sub_promos li {background: transparent url('/assets/box-medium.png') no-repeat top; display:block; float:left; width:286px; height:249px; border: 1px solid #ade346;}
.sub_promos li p a img {padding:20px 20px 20px 0px;}
.sub_promos li ~ li {margin-left:10px;}

/* services */
.services_list, .portfolio_list {display:inline; float:left; width:584px; height:auto;}
.services_list li {background: transparent url('/assets/box-large.png') no-repeat top; width:584px; height:auto; border: 1px solid #ade346; float:left; position:relative; margin-bottom:20px;}
.services_list li img {float:right; height:128px; width:128px; margin:30px; margin-right:20px;}

/* portfolio */
.boxgrid {width: 280px; height: 200px; margin: 20px 27px 20px 0px; float:left; border: solid 1px #d8d8d8; 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:#fff;}
.caption .boxcaption {top:200px; left:0px;}

/* clients */
.client {background: transparent url('/assets/box-massive.png') no-repeat top; width:898px; height:auto; border: 1px solid #ade346; float:left; position:relative; margin-bottom:20px; margin-top:10px;}
.client p, .client .bullets {margin:20px}
.panel-overlay p {margin-left:12px; margin-top:0px;}
.client h3 {margin-left:20px}
.client .bullets li {text-indent:50px;}
#project {margin-top:20px;}
#portfolio_links {text-align:center; width:100%; height:40px;}
#portfolio_links a {width:140px; display:block; float:left; margin-left:100px;}

/* testimonials */
.profile {float:left; margin: 25px; margin-bottom:0px; border: 1px solid #7e7e7e; padding:2px;}
.profile_content p {margin:20px;}

/* footer */
#footer {color:#fff; width:825px; height:20px; clear:both; background-color:#ade346; padding:20px; padding-left:55px; background: transparent url('/assets/footer.png') no-repeat;}
#footer li a {color:#fff; text-decoration:underline;}

/* misc */
.left {float:left;}
.right {float:right;}
.clear {clear:both;}
#ie6Warning {height:600px; width:600px; margin-top:200px; margin-bottom:2000px;}

/* contact form */
#form {margin-top:110px; margin-left:20px;}
#contact_form {background: transparent url('/assets/back-trans.png') repeat; border: 1px solid #f2f2f2; height:220px; width:470px; padding:20px; margin-bottom:20px; margin-top:20px;}
#contact_form label {width:150px; float:left;}
#contact_form input {background-color:#fff; width:290px; height:20px; color:#747474; border: 1px solid #4d8ae9; padding-left:10px; margin-bottom:5px;}
#contact_form textarea {width:280px; height:50px; background-color:#fff; overflow:hidden; margin-bottom:10px; color:#747474; padding:10px; border: 1px solid #4d8ae9;}
#contact_form select {width:300px; color:#747474; border: 1px solid #4d8ae9; float:right; margin-right:20px;}
#send {text-align:right; clear:both;}
#send input {padding-left:0px; margin-top:10px; margin-right:20px; height:30px; width:130px;}