/* # # # # # # # Base elements # # # # # # # */

html, body { height: 100%; }
body { background: #d9e6ec url(../graphics/top-strip.png) repeat-x 0 0; font: 11px/140% Arial, Tahoma, Sans-Serif; text-align: justify; }

h1, h2, h3, h4 { margin: 0 0 1em; }
h1 { font-size: 18px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4 { font-size: 12px; }

#page-home .pane-1 h2, #page-about h2, #page-contact h2, #page-projects h2 { background: url(../graphics/heading-tick.png) no-repeat left center; color: #0088c5; height: 50px; line-height: 50px; padding-left: 37px; }

p { margin: 0 0 1.5em; }
p, li { line-height: 1.75em; }

a:link, a:visited { color: #0088c5; }
a:hover, a:active { color: #8bc53e; }

.clear { clear: both; }

/* # # # # # # # Structure # # # # # # # */

#container { margin: 0 auto; min-height: 100%; position: relative; }
#inner-container { background: url(../graphics/side-shadows.png) no-repeat 0 0; margin: 0 auto; padding: 0 26px; padding-bottom: 50px; position: relative; width: 800px; }
#header { width: 800px; }
#header h1 { background-image: url(../graphics/header.png); height: 220px; margin: 0; text-indent: -1000em; }
#body { background-color: #d9e6ec; padding: 40px; width: 720px; }
#footer { background: url(../graphics/footer.png) repeat-x 0 0; bottom: 0; color: #fff; font-size: 12px; height: 50px; line-height: 50px; margin: 0; position: absolute; text-align: center; width: 100%; }
#footer a:link, #footer a:visited { color: #bbb; }
#footer a:hover, #footer a:active { color: #ddd; }

#page-home .pane-1 { border-right: 1px solid #0088c5; float: left; padding-right: 30px; width: 420px; }
#page-home .pane-2 { float: right; padding-left: 30px; width: 239px; }

#page-header { background-image: url(../graphics/page-header-panel.png); height: 223px; margin-bottom: 40px; padding: 10px; position: relative; }
#page-header-overlay { background-image: url(../graphics/page-header-overlay.png); height: 223px; position: absolute; width: 700px; z-index: 1; }

/* # # # # # # # Navigation # # # # # # # */

#navigation { background-image: url(../graphics/navigation.png); height: 35px; padding: 0 20px; }
#navigation li { float: left; line-height: 35px; margin: 0 20px; padding: 0 9px; text-transform: lowercase; }
#navigation li a { display: block; font-size: 12px; }
#navigation li a:link, #navigation li a:visited { color: #fff; }
#navigation li a:hover, #navigation li a:active { color: #fff; }
#navigation li.current { padding: 0; }
#navigation li.current .button-left { background: url(../graphics/navigation-button-left.png) no-repeat 0 center; display: block; float: left; height: 35px; width: 9px; }
#navigation li.current .button-right { background: url(../graphics/navigation-button-right.png) no-repeat 0 center; display: block; float: left; height: 35px; width: 9px; }
#navigation li.current .button-body { background: url(../graphics/navigation-button-body.png) repeat-x 0 center; display: block; float: left; height: 35px; }

/* # # # # # # # Case studies # # # # # # # */

#carousel { background-image: url(../graphics/carousel-panel.png); height: 183px; margin-bottom: 40px; padding: 30px 40px; position: relative; }
#carousel-previous { background-image: url(../graphics/carousel-button-previous.png); display: block; height: 22px; left: -12px; position: absolute; text-indent: -1000em; top: 106px; width: 18px; }
#carousel-next { background-image: url(../graphics/carousel-button-next.png); display: block; height: 22px; position: absolute; text-indent: -1000em; width: 18px; right: -12px; top: 106px; }
#carousel .case-study { display: none; height: 183px; margin-right: 40px; overflow: hidden; width: 640px; }
#carousel .case-study:first-child { display: block; }
#carousel .case-study h2 { background: none; color: #000; height: auto; line-height: inherit; margin-bottom: 0.5em; padding: 0; }
#carousel .case-study-description { float: left; height: 183px; margin-right: 20px; position: relative; width: 340px; }
#carousel .case-study-description p { margin-bottom: 1em; }
#carousel .case-study-images { float: left; height: 183px; margin-left: 20px; width: 260px; }
#carousel .case-study-images li { display; none; }
#carousel .case-study-images li:first-child { display; block; }
#carousel .case-study-images img { display: block; }
#carousel .case-study-images .thumbnail-scaled, #carousel .case-study-images img { border: 5px solid #8bc53e; width: 250px; height: 173px; }
#carousel .case-study-images .thumbnail-scaled img { border: none; height: auto; width: auto; }
#carousel .case-study .read-more { bottom: 0; margin: 0; position: absolute; width: 100%; }
#carousel .case-study .read-more a { background-image: url(../graphics/read-more-button.png); display: block; font-size: 12px; height: 27px; line-height: 27px; margin: 0 auto; text-align: center; text-transform: lowercase; width: 83px; }
#carousel .case-study .read-more a:link, #carousel .case-study .read-more a:visited { color: #fff; }
#carousel .case-study .read-more a:hover, #carousel .case-study .read-more a:active { color: #fff; }

/* # # # # # # # About # # # # # # # */

#page-header-images { z-index: 0; }
#page-header-images li { display: none; }
#page-header-images li:first-child { display: block; }

#team-members li { min-height: 280px; }
#team-members h3 { color: #0088c5; margin: 0; }
#team-members h4 { text-transform: uppercase; font-size: 9px; }
#team-members .team-member-description { border-color: #0088c5; border-style: solid; border-width: 0 0 0 1px; float: right; margin: 0 0 0 -1px; padding: 0 0 0 30px; width: 419px; }
#team-members .team-member-photo { border-color: #0088c5; border-style: solid; border-width: 0 1px 0 0; float: left; padding: 0 10px 0 0; width: 260px; }
#team-members .team-member-photo img { border: 5px solid #fff; }

/* # # # # # # # News # # # # # # # */

#news .news-item { margin-bottom: 30px;  }
#news h2 { background: url(../graphics/heading-news.png) no-repeat left center; color: #0088c5; height: 50px; line-height: 50px; margin-bottom: 0; text-align: right; }
#news p { margin-bottom: 1em; }
#news .date { color: #0088c5; margin-top: -15px; text-align: right; text-transform: uppercase; }

/* # # # # # # # Projects # # # # # # # */

#projects .project { margin-bottom: 60px; }
#projects h3 { color: #0088c5; }
#projects .project-description { border-color: #0088c5; border-style: solid; border-width: 0 0 0 1px; float: right; margin: 0 0 0 -1px; padding: 0 0 0 30px; width: 419px; }
#projects .alternative .project-description { border-width: 0 1px 0 0; float: left; margin: 0 -1px 0 0; padding: 0 30px 0 0; }
#projects .project-images { border-color: #0088c5; border-style: solid; border-width: 0 1px 0 0; float: left; padding: 0 10px 0 0; width: 260px; }
#projects .alternative .project-images { border-width: 0 0 0 1px; float: right; margin-right: -20px; padding: 0 0 0 30px; }
#projects .project-images li { float: left; margin: 0 20px 20px 0; width: 110px; }
#projects .project-images li.bottom { margin-bottom: 0; }
#projects .project-images img, #projects .project-images .thumbnail-scaled { border: 5px solid #fff; display: block; height: 100px; width: 100px; }
#projects .project-images .thumbnail-scaled img { border: none; height: auto; width: auto; }

/* # # # # # # # Contact # # # # # # # */

#page-header { position: relative; }
#page-header .top-left, #page-header .top-right, #page-header .bottom-left, #page-header .bottom-right { height: 12px; margin: 10px; position: absolute; width: 12px; z-index: 1; }
#page-header .top-left { background-image: url(../graphics/page-header-overlay-top-left.png); left: 0; top: 0; }
#page-header .top-right { background-image: url(../graphics/page-header-overlay-top-right.png); right: 0; top: 0; }
#page-header .bottom-left { background-image: url(../graphics/page-header-overlay-bottom-left.png); bottom: 0; left: 0; }
#page-header .bottom-right { background-image: url(../graphics/page-header-overlay-bottom-right.png); bottom: 0; right: 0; }
#page-header-map { height: 223px; width: 700px; z-index: 0; }

#contact-details { border-left: 1px solid #0088c5; float: right; padding-left: 30px; width: 239px; }
#contact-details h3 { font-size: 12px; margin-bottom: 0.5em; }
#contact-details ul, #contact-details ol, #contact-details p { line-height: 1.75em; margin-bottom: 1em; padding-left: 1em; }
#get-in-touch { float: left; padding-right: 30px; width: 420px; }

#contact-form li:first-child { border-top: none; }
#contact-form li { border-top: 1px dashed #bbb; min-height: 40px; padding: 8px 0; }
#contact-form label { float: left; width: 200px; }
#contact-form span.required { clear: left; color: #999; display: block; float: left; }
#contact-form input { border: 0; width: 206px; }
#contact-form textarea { height: 90px; margin-top: 10px; width: 406px; }
#contact-form input, #contact-form textarea { border: 2px solid #bbb; color: #4d4d4d; font-family: inherit; font-size: 100%; padding: 3px; -moz-border-radius: 4px; }
#contact-form .invalid { border-color: #c74343; }
#contact-form .disabled { border-color: #f0f0f0; }

#status-box { background-color: #fff; border: 2px solid #cdcdcd; display: none; margin-bottom: 20px; padding: 10px 40px 10px 10px; -moz-border-radius: 4px; position: relative; }
/*#status-box.success { border-color: #8ad33c; }*/
#status-box.failure { border-color: #c74343; }
#status-box #status-message { margin: 0; }
#status-box #status-box-close { background-image: url(../graphics/cross.png); display: block; height: 16px; position: absolute; right: 12px; text-indent: -1000em; top: 10px; width: 16px; }