/* Supavine
   on6162.co.nz - Erwin Raaphorst - 13 October 2008 */

html, body, ol, ul, h1, h2, h3, h4, form, fieldset, img, p, blockquote { border:0; margin:0; padding:0; }

body {
 background:url(../bg/bg.jpg) center center repeat;
 font:76%/1.25 arial, helvetica, sans-serif;
 color:#333;
 text-align:center;
 min-width:800px;
 }

html{ overflow-y:scroll; } /* scrollbar FF */

a { outline:none; }
p { padding:0.5em 0; }

#top { background:url(../bg/bgtop.jpg) center top repeat-x; }

#wrap {
 width:790px;
 margin:0 auto;
 text-align:left;
 word-spacing:0.05em;
 letter-spacing:0;
 line-height:1.4em;
 font-size:1em;
 overflow:hidden;
 padding-bottom:20px;
 }

.logo { background:url(../img/supavinelogo.jpg) no-repeat; width:340px; height:115px; text-indent:-9000px; float:left; display:inline; margin:20px 0 0 20px;  }
.logo a { display:block; width:340px; height:115px; }

.topline { float:right; margin:40px 20px 0 0; display:inline; }
.topline li { padding:8px; text-align:right; }
.topline span { padding:3px 8px; border-bottom:2px solid #46b443; background-color:#fff; }

#header { height:215px; width:721px; margin:0 auto; }

.topline { font-size:1.4em; color:#000; }

#content { background:url(../bg/bgcontenttop.png) center top no-repeat; margin-top:160px; padding-top:20px; }
#contexp { background:url(../bg/bgcontentexp.png) center center repeat-y; }
#contbot { background:url(../bg/bgcontentbot.png) center bottom no-repeat; }

.article { padding:30px 60px 0; overflow:hidden; }

.sidebar { float:right; width:200px; }

.intro { font-size:1.2em; width:550px; }
.inner .intro { width:auto; }

.contimg { width:168px; float:left; margin-top:20px; }
.contimg img { padding:3px; background-color:#fff; border:1px solid #030; display:block; }
.inner .contimg { width:auto; margin-top:10px; }


/* TESTIMONIAL */

.testcont { clear:both; padding:10px 40px; }

.block { background:url(../bg/bgblock.png) center top no-repeat; padding:40px 30px 20px 40px; overflow:hidden; }
.blockexp { background:url(../bg/bgblockexp.png) center top repeat-y; }
.blockbot { background:url(../bg/bgblockbot.png) center bottom no-repeat; }

.testimg img { padding:3px; background-color:#fff; border:1px solid #ccc; float:right; margin-top:15px; }
.testimg span { color:#999; font-size:.7em; text-transform:uppercase; text-align:right; display:block; }

.testcont p { width:420px; color:#666; padding-left:40px; }
blockquote { background:url(../img/quote.png) 5px 5px no-repeat; padding:0 0 5px 40px; margin-top:10px; float:left; }
.testcont blockquote p { padding:0; color:#333; }

.box { background:url(../bg/bgbox.jpg) 0 0 repeat; border:1px solid #bdbcbd; padding:15px; position:relative; }
.boxtxt { background:#fff url(../bg/bgtxtbox.png) left bottom repeat-x; border:1px solid #bdbcbd; padding:10px; }
.box img { padding:4px; background-color:#fff; border:1px solid #bebdbd; float:right; margin:-20px 0 0 20px; }

.shadow { background:url(../bg/shadow.jpg) right bottom no-repeat; padding-bottom:7px; clear:both; }
.article .contimg .shadow { padding-bottom:6px; margin-bottom:10px; }
.article .shadow { margin-bottom:30px; }

.bannerinno, .bannertrolley, .bannerlowcost, .bannergreen { height:100px; width:196px; position:absolute; top:0; right:0; z-index:10; }
.bannerinno { background:url(../img/bannerinnovations-trans.png) 0 0 no-repeat; }
.bannertrolley { background:url(../img/bannertrolley-trans.png) 0 0 no-repeat; }
.bannerlowcost { background:url(../img/bannerlowcost-trans.png) 0 0 no-repeat; }
.bannergreen { background:url(../img/bannergreen-trans.png) 0 0 no-repeat; }

.box .button { padding:0; border:none; background-color:none; float:none; margin:10px 0 5px 3px;; }

a.button { background:url(../img/button.png) 0 0 no-repeat; height:25px; width:133px; display:block; text-indent:-9000px; }
a:hover.button { background-position:0 -25px; }
.inner a.button { margin:10px 0 40px 60px; }
a.button.more { background-position:0 -50px; }
a:hover.button.more { background-position:0 -75px; }
a.button.enquire { background-position:0 -100px; }
a:hover.button.enquire { background-position:0 -125px; }
.inner a.button.home { clear:both; margin:20px 0; }

#footer { padding-top:10px; margin:0 auto; text-align:center; color:#fff; font-size:0.9em; }

a:link, a:visited { color:#900; text-decoration:none; }
a:hover { color:#06c; text-decoration:underline; }

.contactdetails { border-left:2px solid #587b9c; padding-left:15px; margin-top:24px; float:left; width:270px; }
.contactdetails ul strong { padding-right:5px; }
.contactdetails img { float:left; padding:3px; background-color:#fff; border:1px solid #99b3cb; margin-right:10px; }

.big { font-size:1.2em; }
.thanks { padding-bottom:2em; } 

/* HEADINGS */
h1, h2, h3, h4, h5, h5 { line-height:normal; }
h1, h3 { font-weight:normal; }
h2, h3 { font-family:"Trebuchet MS", Arial, helvetica, sans-serif; color:#030; letter-spacing:-0.05em; } 
h1 { font-size:1.5em; }
h2 { font-size:2.2em; letter-spacing:-0.05em; margin-bottom:5px; }
.testcont h2 { margin-bottom:20px; }
.box h2 { font-size:1.6em; color:#587b9c; margin-bottom:20px; }
.box h2 span { border-bottom:1px solid #587b9c; margin-bottom:10px; padding-bottom:5px; }
h3 { font-size:1.6em; margin-bottom:10px; }
h4 { font-size:1.2em; margin-bottom:5px; }

/* LISTS */

ol, ul { list-style:none; }
.end { margin-bottom:1em; } 

.usp { width:435px; float:left; margin:20px 40px 40px 0; }
.usp ul { border-top:1px solid #030; padding:10px 0 20px; font-size:1.1em; }
.usp li, .bullet li { background:url(../img/bulletgreen.png) 0 .5em no-repeat; padding:0 0 3px 1em; margin-left:2px; }

.boxtxt li { background:url(../img/bulletblue.png) 0 .5em no-repeat; padding:0 0 3px 1em; margin-left:2px; }

/* misc */

.clear { clear:both; }
.clear-l { clear:left; }
.clear-r { clear:right; }
.fl { float:left; }
.fr { float:right; }


/* WEB CREDIT */
.credit { margin:0.3em auto; }
.credit a:link, .credit a:visited { background:url(../img/checkwhite.png) left 0 no-repeat; padding-left:17px; color:#fff; text-decoration:none; display:inline-block; }
.credit a:hover { color:#cf0; }

/* CONTACT FORM */ 

.required { margin-bottom:2px; } 

.contactform { display:inline-block; width:380px; float:left; padding-bottom:30px; } /* for IE6 bug */
.contactform fieldset { float:left; clear:left; width:100%; margin:1em 0 0; border-style:none; }
.contactform fieldset ol { float:left; clear:left; padding:1em 0 0; list-style:none; }
.contactform fieldset li { float:left; clear:left; width:100%; padding-bottom:1em; }
.contactform label { position:relative; float:left; width:6em; margin-right:1em; }
.contactform label img { position:absolute; left:5.7em;  top:0.5em; }  
.contactform .contactsubmit { float:none; width:auto; padding:0 0 3em 7em; }
.contactform input { width:19em; }
.contactform textarea { width:21em; height:5em; font-family:arial, helvetica, sans-serif; font-size:1em; overflow:auto; }
.contactsubmit input { width:auto; margin-right:10px; background: #e5e5e5; cursor:pointer;  }
.contactsubmit input:hover { background-color:#ccc; }
.contactform input, .contactform textarea, .contactsubmit input { border:1px #587b9c solid; padding:3px; }
.contactsubmit input { padding:3px 15px; }