/* -----------------------------------------------
MASTER STYLESHEET
--------------------------------------------------

CONTENTS

1: SITE MASTER SETUP (including reset.css from eric meyer)

2: LAYOUT
	
3: GLOBAL ELEMENTS / CONTROLS

4. IMPORTED / PLUGIN CSS

/* -----------------------------------------------
1. SITE MASTER SETUP
----------------------------------------------- */

/* Imported mostly from Eric Meyer reset.css - http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
/* end of import */

html { height: 100%; font-family: Arial, Helvetica, sans-serif; } 
body { height: 100%; text-align: center; background-color: #fff; background-position: center top!important; background-repeat: no-repeat!important; color: #666; font-size: 12px; line-height: 17px; }
h1 {  } 
h2 { clear: both; font-size: 20px; color: #ed1b2f; padding: 5px 0 0 0; margin: 20px 0 25px 0; }
h2.large { font-size: 28px; margin: 20px 0 -20px 0; }
div.col1 h2 { margin-top: 0; }
h3 { clear: both; font-size: 16px; color: #ed1b2f; padding: 5px 0 0 0; margin: 0 0 15px 0; }
h3.green { color: #7fc54e; margin: 0 0 3px 0; }
div.col1 h3 { margin: 0; }
h4 { clear: both; font-size: 14px; color: #ed1b2f; padding: 5px 0 0 0; margin: 0 0 15px 0;  }
h5 {  }
h6 {  }
p { margin: 0 0 14px 0; }
a { color: #00aeef; }
a:hover {  }
hr { color: #ed1b2f; border: 1px solid #ed1b2f; background: #ed1b2f; height: 1px; margin: 0 0 15px 0; }
address { margin: -8px 0 20px 0; display: block; line-height: 20px; }

/* -----------------------------------------------
2. LAYOUT
----------------------------------------------- */

div#wrapper { width: 835px; height: 100%; margin: 0 auto; text-align: left; }
div.wrapper-home { background: url('../images/bg-main-home.gif') left 64px no-repeat; }
div.wrapper-strawberry { background: url('../images/bg-main-strawberry.gif') left 64px no-repeat; }
div.wrapper-colabottle { background: url('../images/bg-main-colabottle.gif') left 64px no-repeat; }
div.wrapper-bubblegum { background: url('../images/bg-main-bubblegum.gif') left 64px no-repeat; }

div#header { background: url('../images/bg-header-nav.gif') top left no-repeat; width: 817px; padding: 9px; overflow: hidden; }

div#content { clear: both; width: 817px; overflow: hidden; padding: 9px; }
body.home div#content { padding: 0!important; width: 835px!important; background: url('../images/bg-home-central.gif') left 330px no-repeat; }

div.row-container { width: 817px; overflow: hidden; clear: both; margin: 0 0 9px 0; }
body.home div.row-container { width: 835px; }
div.home-row-container { overflow: hidden; clear: both; width: 835px; }

div.home-row-container div.col1 { float: left; width: 454px; margin: 0 0 0 9px; padding: 45px 18px 0 0; }
div.home-row-container div.col2 { float: left; width: 345px; margin: 0 9px 0 0; padding: 80px 0 0 0; text-align: right; }

div.three-col .col1, div.three-col .col2, div.three-col .col3 { width: 266px; float: left; margin: 0 9px 0 0; }
div.three-col .col1 {  }
div.three-col .col2 {  }
div.three-col .col3 { margin: 0; }

div.double-col-left .col1, div.double-col-left .col2 { width: 266px; float: left; margin: 0 9px 0 0; }
div.double-col-left .col1 { width: 541px; }
div.double-col-left .col2 { margin: 0; }

div.double-col-right .col1, div.double-col-right .col2 { width: 266px; float: left; margin: 0 9px 0 0; }
div.double-col-right .col1 {  }
div.double-col-right .col2 { width: 541px; margin: 0; }

/* colum padding page specific (layout) */

body.home div.row-one div.col1 { margin-top: 30px; margin-left: 9px; }
body.home div.row-one div.col2 { margin-top: 30px; }
body.home div.row-one div.col3 { margin-top: 120px; margin-right: 9px; }

body.pens div.row-one div.col1 { margin-top: 30px; }
body.pens div.row-one div.col2 { margin-top: 0; }

body.competition div.row-one div.col1 { margin-top: 30px; }
body.competition div.row-one div.col2 { margin-top: 350px; }
body.competition div.row-one div.col3 { margin-top: 10px; }

body.lost div.row-one div.col1 { margin-top: 30px; }
body.lost div.row-one div.col2 { margin-top: 130px; }
body.lost div.row-one div.col3 { margin-top: 105px; }

body.won div.row-one div.col1 { margin-top: 30px; }
body.won div.row-one div.col2 { margin-top: 130px; }
body.won div.row-one div.col3 { margin-top: 105px; }

body.contact div.row-one div.col1 { margin-top: 30px; }
body.contact div.row-one div.col2 { margin-top: 100px; }
body.contact div.row-one div.col3 { margin-top: 100px; }

body.stockists div.row-one div.col1 { margin-top: 30px }
body.stockists div.row-one div.col2 { margin-top: 100px; }
body.stockists div.row-one div.col3 { margin-top: 0 }
body.stockists div.row-two div.col1 { margin-top: 30px; }
body.stockists div.row-two div.col2 { margin-top: 80px; }
body.stockists div.row-two div.col3 { margin-top: 0 }

div#footer { clear: both; background: #d7df5a url('../images/bg-footer.gif') left top no-repeat; width: 817px; padding: 55px 9px 29px 9px; overflow: hidden; }
body.home div#footer { background-image: url('../images/bg-footer-home.gif')!important; }

/* -----------------------------------------------
3. GLOBAL ELEMENTS / CONTROLS
----------------------------------------------- */

/* logo */
div#logo { background: url('../images/logo-uni-ball-scented.png') no-repeat scroll top left; width: 234px; height: 243px; float: left; }
div#logo a { text-indent: -3000px; margin: 0; padding: 0; display: block; width: 234px; height: 243px; }

/* primary-navigation */
div#navigation { margin: 15px 0 0 0; float: left; }
div#navigation ul { width: 564px; overflow: hidden; }
div#navigation ul li { float: left; margin: 0 15px 0 0; }
div#navigation ul li.last { margin: 0; }
div#navigation ul li a { height: 29px; display: block; text-indent: -3000px; }
div#navigation ul li a.competition { background: url('../images/bg-our-competition-off.gif') no-repeat scroll top left; width: 155px; }
div#navigation ul li a.competition:hover { background-image: url('../images/bg-our-competition-on.gif'); }
div#navigation ul li a.competition.selected { background-image: url('../images/bg-our-competition-on.gif'); }
div#navigation ul li a.pens { background: url('../images/bg-our-pens-off.gif') no-repeat scroll top left; width: 100px;  }
div#navigation ul li a.pens:hover { background-image: url('../images/bg-our-pens-on.gif'); }
div#navigation ul li a.pens.selected { background-image: url('../images/bg-our-pens-on.gif'); }
div#navigation ul li a.stockists { background: url('../images/bg-our-stockists-off.gif') no-repeat scroll top left; width: 139px; height: 29px; }
div#navigation ul li a.stockists:hover { background-image: url('../images/bg-our-stockists-on.gif'); }
div#navigation ul li a.stockists.selected { background-image: url('../images/bg-our-stockists-on.gif'); }
div#navigation ul li a.details { background: url('../images/bg-our-details-off.gif') no-repeat scroll top left; width: 125px; height: 29px; }
div#navigation ul li a.details:hover { background-image: url('../images/bg-our-details-on.gif'); }
div#navigation ul li a.details.selected { background-image: url('../images/bg-our-details-on.gif'); }

/* paragraph colours */
p span { font-weight: bold; }
p span.strawberry { color: #ef4525; }
p span.pineapple { color: #eead33; }
p span.cola { color: #000; }
p span.cherryade { color: #b61c20; }

/* social network links */
div#social-networks { overflow: hidden; float: right; margin: 0 0 40px 0; }
body.home div#social-networks { margin: 0; }
div#social-networks ul {  }
div#social-networks ul li { float: left; width: 95px; margin: 0 30px 0 0; }
div#social-networks ul li.last { margin: 0; }
div#social-networks ul li a { color: #666; text-decoration: none; display: block; line-height: 15px; padding: 0 0 0 35px; } 
div#social-networks ul li a:hover { text-decoration: underline; } 
div#social-networks ul li.facebook a { background: url('../images/icn-facebook.gif') left top no-repeat; }
div#social-networks ul li.twitter a { background: url('../images/icn-twitter.gif') left top no-repeat; }

/* pen-colours */
ul.pen-colours { width: 100%; overflow: hidden; padding: 0 0 20px 0; margin: 0 0 10px 0; border-bottom: 1px solid #ccc; }
ul.pen-colours li { float: left; width: 130px; height: 30px; color: #ed1b2f; }
ul.pen-colours li span { display: block; margin: 3px 0 0 0; }
ul.pen-colours li img { float: left; padding: 0 3px 0 0; }

/* carousel */
div#carousel { margin: -40px 0 0 0; position: relative; height: 410px; }
li.jcarousel-item { height: 200px; }
div.jcarousel-next { background: url('../images/img-nose-right.gif') no-repeat scroll top right; width: 62px; height: 199px; cursor: hand; margin: 90px 0 0 0; }
div.jcarousel-prev { background: url('../images/img-nose-left.gif') no-repeat scroll top left; width: 60px; height: 194px; float: left; cursor: hand; margin: 94px 0 0 0; }
div.jcarousel-next { float: right; }
div.jcarousel-container { width: 448px; height: 362px; }
div.inner { position: absolute; top: 0; left: 0; z-index: 100000; background: url('../images/img-nose-frame.gif') no-repeat left top; width: 326px; height: 362px; }
div.jcarousel-clip, div.jcarousel-clip li { width: 326px; height: 335px; padding: 15px 0 0 0; }

/* carousel form */
div#carousel form { background: url('../images/bg-carousel-form.gif') no-repeat scroll top left; width: 369px; height: 41px; padding: 55px 0 0 0; position: absolute; top: 318px; right: 15px; z-index: 20000; }
div#carousel form input { border: 0 none; background: #f9f9f9; font-size: 14px; margin: 4px 0 0 45px; width: 200px; }
div#carousel form input.button { position: absolute; top: 36px; right: 49px; width: auto; }
div#carousel form label { display: none; }

/* home page specifics */
p.trip { color: #7d4808; font-size: 14px; width: 266px; float: right; text-align: left; }
body.home div.col1 h3 { margin: 0 0 20px 0; }

/* steps (home page) */
ul.steps { margin: 20px 0 0 0; width: 100%; overflow: hidden; background: url('../images/bg-homepage-bubble.gif') top right no-repeat; }
ul.steps li { color: #7d4808; padding: 0 0 15px 35px; width: 230px; }
ul.steps li.one {  background: url('../images/bg-steps-one.gif') no-repeat; }
ul.steps li.two { background: url('../images/bg-steps-two.gif') no-repeat; }
ul.steps li.three { background: url('../images/bg-steps-three.gif') no-repeat; }

/* fruit scents (pen page) */
div.fruity-scents { color: #ed1b2f; width: 541px; overflow: hidden; }
div.fruity-scents dl {  }
div.fruity-scents dt { font-size: 16px; margin: 0 0 15px 0; }
div.fruity-scents dd { float: left; text-align: center; margin: 0 20px 0 0; background-position: center bottom; background-repeat: no-repeat; width: 90px; padding: 0 0 0 0; font-size: 14px; }
div.fruity-scents dd img { clear: both; padding: 0 10px; }
div.fruity-scents dd.last { margin: 0; }

/* sweet scents (pen page) */
div.sweety-scents { color: #ed1b2f; clear: both; margin: 55px 0 10px 0; width: 541px; overflow: hidden; }
div.sweety-scents dl {  }
div.sweety-scents dt { font-size: 16px; margin: 0 0 15px 0; }
div.sweety-scents dd { float: left; text-align: center; margin: 0 20px 0 0; background-position: center bottom; background-repeat: no-repeat; width: 90px; padding: 0 0 0 0; font-size: 14px; }
div.sweety-scents dd img { clear: both; padding: 0 10px; }
div.sweety-scents dd.last { margin: 0; }

/* speech bubble (pen page) */
div.speech-bubble { background: #2baad9 url('../images/bg-blue-speech-top.gif') top left no-repeat; width: 266px; overflow: hidden; }
div.speech-bubble h3 { color: #ffffff; margin: 0!important; padding: 15px 10px 10px 10px;  width: 266px; overflow: hidden; font-size: 15px; }
div.speech-bubble p { background: #2baad9 url('../images/bg-blue-speech-bottom.gif') bottom left no-repeat; padding: 0 10px 160px 10px; color: #fff; margin: 0; font-size: 12px; }

/* stockists link */
body.pens div.col2 a.stockists { text-decoration: none; color: #ed1b2f; padding: 30px 25px 4px 0; display: block; background: url('../images/icn-go-arrow.gif') 230px 18px no-repeat; font-size: 13px; }

/* try again link */
a.try-again { color: #7fc54e; text-decoration: none; font-size: 13px; padding: 7px 25px 4px 0; display: block; background: url('../images/icn-go-arrow.gif') 220px -5px no-repeat; font-size: 13px; margin: -5px 0 15px 0; }

/* win free competition */
p.win-free { color: #ed1b2f; font-size: 14px; }

/* winner / loser block (with selected nose) */
div#winner-loser-block { position: relative; text-align: center; height: 250px; }
div#winner-loser-block img { margin: 0 20px 0 0; }
div#winner-loser-block div.overlay { position: absolute; top: 0; left: 0; z-index: 10000;  width: 260px; height: 237px; }
div.winner div.overlay { background: url('../images/bg-nose-win.png') no-repeat scroll top left; }
div.loser div.overlay { background: url('../images/bg-nose-lose.png') no-repeat scroll top left; }
div#winner-loser-block div.text { position: absolute; top: 190px; left: 15px; z-index: 20000; }

/* runners up block */
div.runners-up dl { color: #ed1b2f; width: 100%; overflow: hidden; margin: 0 0 20px 0; }
div.runners-up dl dt { font-size: 15px; font-weight: bold; margin: 0 0 5px 0; }
div.runners-up dl dd { float: left; width: 110px; margin: 0 0 2px 0; }
body.home div.runners-up dl { color: #7d4808; font-size: 14px; width: 266px; float: right; text-align: left; }

div.runners-up ul li { color: #ed1b2f; font-weight: bold; font-size: 15px; float: left; width: 133px; padding: 0 0 20px 0; }
div.runners-up ul li img { display: block; }

/* could win call to action */
a.could-win-call { background: url('../images/img-win-trip-call-to-action.jpg') no-repeat scroll top left; width: 262px; height: 269px; display: block; text-indent: -3000px; }

/* form block */
div.form-block { border: 1px solid #dedede; padding: 10px; }
div.form-block div.info { margin: 0 0 10px 0; font-style: italic; }
div.form-block span.mandatory { font-weight: bold; color: red; }
div.form-block label span.mandatory { padding: 0 0 0 3px; }
div.form-block fieldset {  }
div.form-block h2 { color: #ed1b2f; font-size: 13px; margin: 0 0 10px 0; }
div.form-block legend { display: none; }
div.form-block ol {  }
div.form-block ol li { overflow: hidden; padding: 0 0 8px 0; }
div.form-block ol li label { width: 100px; float: left; font-weight: bold; display: block; }
div.form-block ol li input { border: 1px solid #ababaa; padding: 2px; width: 330px; font-size: 11px; }
div.form-block ol li textarea { border: 1px solid #ababaa; padding: 2px; width: 330px; font-family: arial, helvetica, sans-serif; font-size: 11px; }
div.form-block ol li.checkbox { margin: 0 0 0 100px; }
div.form-block ol li.checkbox input { float: left; width: auto; border: 0 none; padding: 0; margin: 2px 0 0 0; }
div.form-block ol li.checkbox label { float: left; font-weight: normal; display: block; width: 300px; padding: 2px 0 0 5px; }
div.form-block ol li input.button { margin: 5px 0 0 96px; width: auto; border: 0 none; }
input#newsletter-submit { margin: 5px 0 0 96px; width: auto; border: 0 none; }

/* stockists */
ul.stockists { font-weight: bold; margin: 0 0 40px 0; }
ul.stockists li { margin: 0 0 10px 0; font-size: 13px; }

/* contact */
ul.contact li { margin: 0 0 6px 0; }
ul.contact li a { color: #ed1b2f; font-weight: bold; }

/* vcard / hcard */
div.vcard { margin: 10px 0 0 0; }
div.adr { margin: 0 0 10px 0; }
div.vcard div.organization-name { font-weight: bold; }
div.vcard div.tel, div.vcard div.email { margin: 0 0 6px 0; }
div.vcard span.label { font-weight: bold; }
div.vcard span.type { display: none; }
div.vcard a { color: #ed1b2f; font-weight: bold; }

/* footer elements */
div#footer-links { width: 400px; margin: -22px 0 0 0; }
div#footer-links ul { width: 400px; overflow: hidden; margin: 0 0 0 10px; }
div#footer-links ul li { float: left; margin: 0 50px 0 0; }
div#footer-links ul li.last { margin: 0; }
div#footer-links ul li a { text-decoration: none; color: #000; font-size: 11px; }
div#footer-links ul li a:hover { text-decoration: underline; }
div#footer-logo { width: 244px; height: 25px; float: right; }
div#footer-logo p a { background: url('../images/kogo-uniball-footer.gif') no-repeat scroll top left; width: 244px; height: 25px; text-indent: -3000px; display: block; }

/* -----------------------------------------------
4. IMPORTED / PLUGIN CSS
----------------------------------------------- */




/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */