/* -----------------------------------------------------------------------
   TheVine screen styles
   Paul Bellamy, BellamyStudio 09.08
   This file contains chunks of the 
   Blueprint framework
----------------------------------------------------------------------- */

/* reset.css */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
body {line-height:1.5;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a img {border:none;}
	
/* typography.css */
html, body {height:100%; background:#f5f4f4 url('/images/template/bg_pattern.jpg')}
body {font-size:66%;color:#666;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;}
h1, h2, h3, h4, h5, h6 {color:#21909F; width:100%; border-bottom:3px solid #d9d8d8; padding-bottom:5px; font-weight:bold}
h1,h2,h3 {font-size:1em;line-height:1;margin-bottom:1em}

h4 {font-size:1em;line-height:1.25;margin-bottom:1.25em;height:1.25em;}
h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}
h6 {font-size:1em;font-weight:bold;}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}
p {margin:0 0 1.5em;}
p img {float:left;margin:1.5em 1.5em 1.5em 0;padding:0;}
p img.right {float:right;margin:1.5em 0 1.5em 1.5em;}
a:focus, a:hover {color:#000;}
a {color:#444;text-decoration:none; font-weight:bold}
blockquote {margin:1.5em;color:#666;font-style:italic;}
strong {font-weight:bold;}
em, dfn {font-style:italic;}
dfn {font-weight:bold;}
sup, sub {line-height:0;}
abbr, acronym {border-bottom:1px dotted #666;}
address {margin:0 0 1.5em;font-style:italic;}
del {color:#666;}
pre, code {margin:1.5em 0;white-space:pre;}
pre, code, tt {font:1em 'andale mono', 'lucida console', monospace;line-height:1.5;}
li ul, li ol {margin:0 1.5em;}
ul, ol {margin:0 1.5em 1.5em 1.5em;}
ul {list-style-type:disc;}
ol {list-style-type:decimal;}
dl {margin:0 0 1.5em 0;}
dl dt {font-weight:bold;}
dd {margin-left:1.5em; font-weight:normal}
table {margin-bottom:1.4em;width:100%;}
th {font-weight:bold;background:#C3D9FF;}
th, td {padding:4px 10px 4px 5px;}
tr.even td {background:#E5ECF9;}
tfoot {font-style:italic;}
caption {background:#eee;}
.small {font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}
.large {font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}
.hide {display:none;}
.quiet {color:#999;}
.loud {color:#000;}
.highlight {background:#ff0;}
.added {background:#060;color:#fff;}
.removed {background:#900;color:#fff;}
.first {margin-left:0;padding-left:0;}
.last {margin-right:0;padding-right:0;}
.top {margin-top:0;padding-top:0;}
.bottom {margin-bottom:0;padding-bottom:0;}

/* grid.css */
.container {position:relative;width:850px;margin:0 auto; padding:30px 0 10px 0; }
body {margin:0}

.leftcol, .midcol, .widecol, .rightcol {float:left}

.leftcol {width:150px;margin:0 30px}
.midcol {width:244px;margin-right:22px;_margin-right:8px}
.widecol {width:510px; margin-right:25px}
.rightcol {width:60px}
img.thumb {margin:2px 2px 0 0}
img.thumblast {margin:5px 0 0 0}

.leftcol h1, .leftcol #address p {color:#d6002c; border-bottom:5px solid #d6002c; margin-bottom:0}
.leftcol h1 a {color:#d6002c}
.leftcol dl {list-style:none;padding:0;margin:0; font-weight:normal}
.leftcol dl dt {padding:3px 0 1px 0; border-bottom:3px solid #21909F; font-weight:bold}
.leftcol dl a {color:#21909F}
.leftcol dl dt.current {border-color:#8bc2ca}
.leftcol dl dt.current, .leftcol dl dt.current a{color:#8bc2ca}
.leftcol dl dd {padding:3px 0 1px 13px; margin:0; border:none}
.leftcol dl dd.space {padding-top:4px}
.leftcol dl dd a {font-weight:normal}
.leftcol dl dd.current a {color:#d6002c}

/* position address and logo */
#logo, #address {position:absolute; bottom:25px}
#address {width:150px; height:50px;font-weight:bold}
#logo {padding-bottom:10px; height:180px}
#address p, .unleaded {line-height:1.2; padding-bottom:3px }
#address a {color:#d6002c}

ul#hp_services {list-style:none; margin:0;padding:0;float:left;width:243px}
ul#hp_services li {float:left;width:110px; margin-right:10px; padding:2px 0}

#map {width:510px; height:350px}

/* force youtube player to fit column */
.midcol object, .midcol embed {width:244px !important;height:182px !important}

h2 span.date {color:#8bc2ca; padding-right:5px}

/newsletter label overlay*/
#newsletter {position:relative; float:left}
#newsletter form {padding:0;margin:0}
#newsletter div.label { position: relative; float: left; margin-right: 3px; clear: left; }
#newsletter label { position: relative; float: left; margin-right: 3px; clear: left; }
#newsletter label.over { color: #bbb; font-weight:normal; position: absolute; top: 9px; left: 10px; width:125px}
#newsletter input.text {float:left;width:150px; padding:3px; border:3px solid #ddd}
#newsletter input.join {border:none; background:transparent; color:#21909F; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-weight:bold}
#newsletter input.join:hover {color:#222}

.example {color:#999; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-weight:bold}

div.border {padding-right:4px;margin-right:5px;border-right:1px solid #eee;}
div.colborder {padding-right:24px;margin-right:25px;border-right:1px solid #eee;}
.box {padding:1.5em;margin-bottom:1.5em;background:#E5ECF9;}
hr {background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:.1em;margin:0 0 1.45em;border:none;}
hr.space {background:#f5f4f4;color:#f5f4f4;}
.clearfix:after, .container:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix, .container {display:inline-block;}
* html .clearfix, * html .container {height:1%;}
.clearfix, .container {display:block;}
.clear {clear:both;}

/* case study
----------------------------------------------------------------------- */
#casestudy {width:510px; height:380px; float:left; padding:0;overflow:hidden}
#casestudy ul, #case-study li{margin:0;padding:0;list-style:none;}
span#prevBtn, span#nextBtn {display:block; padding:10px}
/*span#prevBtn, span#nextBtn {position:absolute; height:10px; display:block; top:400px; width:55px; z-index:10}
span#prevBtn a, span#nextBtn a {display:block; text-indent:-999em; overflow:auto}*/
/*span#prevBtn a- {background:url('/images/template/previous_next.png') 0 0 no-repeat; width:55px}
span#nextBtn a {background:url('/images/template/previous_next.png') -56px 0 no-repeat; width:35px}
span#prevBtn {left:415px}
span#nextBtn {left:470px}*/

/* numeric controls */	
ol#controls{float:left; display:block; width:510px; margin:0 0 1em 0;padding:5px 0 10px 0; border-bottom:1px solid #ccc}
ol#controls li, ul#controls li.numeric{margin:0 5px 0 0;padding:0;float:left;list-style:none;height:20px;line-height:20px}
ol#controls li a, ul#controls li.numeric a{float:left;height:20px;line-height:20px;border:1px solid #ccc;background:#8bc2ca;color:#fff;padding:0 10px;text-decoration:none}
ol#controls li.current a, ul#controls li.current a{background:#d6002c;color:#fff}
ol#controls li a:focus, ul#controls li.numeric a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none}

/* forms.css */
label {font-weight:bold;}
fieldset {padding:1.4em;margin:0 0 1.5em 0;border:1px solid #ccc;}
legend {font-weight:bold;font-size:1.2em;}
input.text, input.title, textarea, select {margin:0.5em 0;border:1px solid #bbb;}
input.text:focus, input.title:focus, textarea:focus, select:focus {border:1px solid #666;}
input.text, input.title {width:300px;padding:5px;}
input.title {font-size:1.5em;}
textarea {width:390px;height:250px;padding:5px;}
.error, .notice, .success {padding:.8em;margin-bottom:1em;border:2px solid #ddd;}
.error {background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;}
.notice {background:#FFF6BF;color:#514721;border-color:#FFD324;}
.success {background:#E6EFC2;color:#264409;border-color:#C6D880;}
.error a {color:#8a1f11;}
.notice a {color:#514721;}
.success a {color:#264409;}

/* Badge! */
#badge {position:absolute; top:5px; right:-60px; width:170px; height:163px; z-index:100; background:url('/images/template/badge.png') 0 0 no-repeat}

/*homepage slideshow*/
#hp_slideshow {display:block;width:510px; height:380px;float:left;position:relative; margin-bottom:10px}
.slideShow ul, .slideShow li{list-style-type:none; margin:0; padding:0px}
.slideShow{display:table; clear:both; margin-bottom:10px}
.slide img{position:absolute}

/* finally... */
.last {margin-right:0;}