* {margin: 0;padding: 0;}
img {border: none;}


/* fontface  */
@font-face {
    font-family: 'YanoneKaffeesatzRegular';
    src: url('http://www.brentporter.ca/fonts/YanoneKaffeesatz-Regular-webfont.eot');
    src: url('http://www.brentporter.ca/fonts/YanoneKaffeesatz-Regular-webfont.eot?#iefix') format('eot'),
         url('http://www.brentporter.ca/fonts/YanoneKaffeesatz-Regular-webfont.woff') format('woff'),
         url('http://www.brentporter.ca/fonts/YanoneKaffeesatz-Regular-webfont.ttf') format('truetype'),
         url('http://www.brentporter.ca/fonts/YanoneKaffeesatz-Regular-webfont.svg#webfonthKXnaAjv') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* Body */ 
body {position:relative; height:100%; margin: 0;padding: 0;font-size: 12px;font-family:  Arial, Verdana, Helvetica, sans-serif;color: #666;line-height: 1.8em;background: url(../images/background.jpg) top left repeat #191919;}
body.contact {height:auto; padding-top:30px}

/* Site Wrapper */ 
#site-wrapper {height: auto;position:relative;overflow:hidden;background:#191919;}

/* Container */ 
.container {margin:0 auto; width:960px; position:relative;}

/** Header **/
#lightray-l {background:url(../images/lightray-l.png) no-repeat top left; height:350px; width:608px; position:absolute; top:0; left:0; z-index:10}
#lightray-r {background:url(../images/lightray-r.png) no-repeat top right; height:350px; width:608px; position:absolute; top:0; right:0; z-index:10}
#home-page #header {background:url(../images/home-bg.jpg) repeat-x top left; height:900px;  position:relative; }
#top {height:270px;width:960px;}

/* Logos */
#logos {width:960px; height: 35px; padding-top:20px}
#sgdc {float:left; width:266px; height: 35px;}
#web50 {float:left; width:266px; height: 35px;margin-left:25px}
#wineaward {float:left; width:200px; height: 35px;}
#no {float:left; width:42px; height: 46px; padding:0 20px 0 0;}
#fb, #tw, #li {float:right; width:40px; height: 35px;}
#bp-logo-trans {float:left; width:960px; height: 103px; margin:50px auto; background:url(../images/bp-logo-trans-small.jpg) no-repeat top center;}

/* Quotes */
blockquote p {margin-bottom: 0; font-style: italic;  text-align: center; color:#CCC}
blockquote cite {font-style: normal; display: block; text-align: center; text-transform: uppercase; font-size: 10px; font-weight: bold; letter-spacing: 1px; font-family: Arial, Helvetica, sans-serif; }
blockquote cite span{font-style: italic; letter-spacing: 0;text-transform: none; font-weight: normal;}
blockquote {font-family: Georgia, Times, serif;width: 900px; /* required */margin: 0 auto;}
#quote_wrap {margin: 20px 0; padding: 20px;}

/* Footer Wrapper */
#footer-wrapper {height:auto;position:relative;background:#191919 url(../images/background.jpg) repeat-x left top;}

/* Nav */ 
ul.nav {position:absolute;top:-3px;right:20%;padding: 0;margin: 0;list-style: none; z-index:20} 
ul.nav li {display:block;float:left;width:60px;height:120px;cursor:pointer;padding: 0 10px 0 10px;}

/* Portfolio */ 
ul.column {width: 100%;padding: 0;margin: 300px 0 50px ;list-style: none;}
ul.column li {float: left;width: 200px;padding: 0;margin: 5px 0;display: inline;}
.block {font-size: 1em;margin-right: 10px;padding: 20px;background: #111;border: 1px solid #000;border-right: 1px solid #252525;border-bottom: 1px solid #252525;-moz-border-radius: 5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;position:relative;}
.block img {width: 89%;padding: 5%;margin: 0 auto;-ms-interpolation-mode: bicubic;display: block;/*	-webkit-border-radius: 5px;	-moz-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px; */border: 1px solid rgba(0, 0, 0, 0.3);-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .7);-moz-box-shadow: 0 0 10px rgba(0, 0, 0, .7);box-shadow: 0 0 10px rgba(0, 0, 0, .7);border-top: 1px solid #222222;background: #191919;}
.block h2 {font-size: 2.2em;}
.block:hover {background: #222;border: 1px solid #111;border-right: 1px solid #333;border-bottom: 1px solid #333;cursor:pointer}
.block:hover img {background: #444;}
.block:hover h2 {color: #666;}
.block:hover p {color: #666;}

/* Ribbons */
.ribbon {position:absolute;width:114px;height:116px;top:-7px;left:-9px;display:block;z-index:99}
.newrelease {background:url(../images/ribbon-newrelease.png) no-repeat;}
.award {background:url(../images/ribbon-award.png) no-repeat;}
.twitter {background:url(../images/ribbon-twitter.png) no-repeat;}
.fbook {background:url(../images/ribbon-facebook.png) no-repeat;}
.contactme {background:url(../images/ribbon-contactme.png) no-repeat;}
/*.noie6 {background:url(../images/IE6-sucks.png) no-repeat top center; width:705px; height:69px; margin:-3px auto 0 auto}*/

/* Facebook */
#facebooklike {margin:-5px 0 5px 0}

/* Twitter */
#tweets {color:#666;padding: 5px  0 0 0}
#tweets ul {padding-left:0;margin:0;width:100%;}
#tweets li {line-height:15px;list-style-type:none;width:100% !important;}
#tweets .hash {color:#AAA;}
small {display:none;}
#tweets a:link, #tweets a:active, #tweets a:visited {text-decoration:none;color:#CCFF33;}
#tweets a:hover {text-decoration:underline;color:#CCFF33;}

/* Contact Form */
form, input, select, textarea {margin:0;padding:0;color:#fff;}
p.number {margin:0 0 5px 90px;}
.boxwrap {margin:10px 5%}
.box {margin:0 auto; width:420px;padding: 20px 20px 0;background: #111;border: 1px solid #000;border-right: 1px solid #252525;border-bottom: 1px solid #252525;-moz-border-radius: 5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;position:relative}
div.box div {width:100%;display: block;padding:5px 0;}
div.box div label {display: block;color:#bbb;font-size:12px;float:left;width:80px;text-align:right;padding:5px 10px 0 0;}
div.box .input_text {padding:10px;width:300px;background:#262626;border-bottom: 1px double #171717;border-top: 1px double #171717;border-left:1px double #333;border-right:1px double #333;-moz-border-radius: 5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;	font-size:14px;}
div.box .message {padding:10px;width:300px;background:#262626;border-bottom: 1px double #171717;border-top: 1px double #171717;border-left:1px double #333;border-right:1px double #333;-moz-border-radius: 5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;overflow:hidden;height:100px;font-family:Arial, Verdana, Helvetica, sans-serif;line-height:1.8em;font-size:14px;}
div.box .button {margin:0 0 30px 0;padding:7px 10px;background:#CC0000;border:0px;position: relative;top:10px;left:290px;border-bottom: 1px double #660000;border-top: 1px double #660000;border-left:1px double #FF0033;border-right:1px double #FF0033;-moz-border-radius: 5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;cursor: pointer;}
div.box div label.error {display:block; color:#CC0000;float:none;font-size:11px;width: 280px;margin: 0 0 0 90px;text-align:left;padding:0;}
#response {margin:0 0 10px 90px;width:320px;}
#footer {padding: 0 0 50px 0}

/* Clearfix */
.clearfix:before, .clearfix:after {content: "\0020";display: block;height: 0;visibility: hidden;}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}

/** Typography **/

/* Anchors */ 
a {color: #777;text-decoration:none}
a:hover {color: #999}

/* Type */ 
h1, h2 {font-family: 'YanoneKaffeesatzRegular', arial, serif; font-size: 25px; margin: 10px 0;padding: 10px 0;}
h1 {font-size: 28px; margin: 0 auto; line-height: 1em; color: #444;}

/* Colours */ 
.red {color: #CC0000}

/** Structure **/
.full-width {width:960px;}
.one_half {width:465px;}
.one_third {width:300px;}
.one_forth {width:217.5px;}
.two_third {width:630px;}
.three_forth {width:712.5px;}
.one_half, .one_third, .one_forth, .two_third, .three_forth {float:left; margin-right:30px; height:auto; overflow:hidden;}