/*-----------------------------------------------------------------------------------*/
/*- Styles (main): css                                                          -*/
/*- => all pages                                                                    -*/
/*- Author: felicity.evans@readingroom.com                                        -*/
/*- Creation date: 14.08.09                                                          */
/*-----------------------------------------------------------------------------------*/
/*-- reset styles ---------------------------------------------*/
html {
    overflow: -moz-scrollbars-vertical;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, a, 
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, hr {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
img {display: block}  
td { vertical-align: middle;}
body { line-height: 1;}
ol, ul { list-style: none;}
blockquote, q { quotes: none;}

/* remember to define focus styles! */
:focus {/*outline: 1px dotted #444;*/}
/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* clearfix----------------------------------------*/
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.clearfix {display: inline-block;}
html[xmlns] .clearfix {display: block;}
* html .clearfix {height: 1%;}
/* basic text styles ----------------------------------------------------------------*/
h2, h3, h4, h5 {font-weight:bold;padding:0;margin:0;line-height:1.5em}
h2{font-size:2em;}
h3{font-size:1.8em}
h4{font-size:1.6em}
h5{font-size:1.4em}
p{font-size:1.4em;line-height:1.3em;color:#666; margin: 0.5em 0}
a{color: #7D3301; text-decoration: none}
a{cursor: pointer}
a:hover,a:focus{text-decoration:underline}

li {font-size:1.4em;color:#666666;}
li li {font-size: 1em; }

/* structure -------------------------------------------------------------------------*/
body{
    text-align:center;
    font-size:62.5%;
    font-family:tahoma, arial, verdana, sans-serif;
	background-color:#faf6e2;
	border-top:10px solid #f2ecd0;
}
h1{text-transform:uppercase;color:#7d3301;font-size:2.2em;margin-bottom:8px; line-height:1.2em;  font-family:Georgia, Times, serif;}
h2{text-transform:uppercase;color:#7d3301;font-size:2.2em;padding:0 0 6px 0; text-align: left; font-family:Georgia, Times, serif; clear: both}
h3{text-transform:uppercase;color:#7d3301;font-size:1.5em;padding:0 0 6px 0; text-align: left; font-family:Georgia, Times, serif; clear: both;line-height:1.2em;margin-top:1em;}
#outer{margin:0 auto;width:1050px}
#wrapper{text-align:left; position: relative;}
#column1, #column2{float:left;width:370px;margin-left:80px;display:inline;}
#column2{margin-left:70px; padding-bottom: 50px; }
body.article #column2{float: right; margin-right: 150px}
.content ol {list-style:decimal}
.content li {margin:0.5em 0 0.5em 1em; line-height: 1.3em}
#column1 {padding-bottom: 30px}
/* footer */
#footer{width:1000px;padding:20px 5px 30px 25px;clear:both;position:relative}
.home #footer {padding-top:60px}
.verification #footer {padding-top: 152px; padding-right: 25px; text-align: left; }
#footer p.strapline{text-transform:uppercase;color:#7d3301;font-size:1.7em;width:460px;margin:20px 0 30px 90px; float: left; letter-spacing: 0.1em;padding:0;}
#footer .footerLinks {border-bottom: 3px solid #f2ecd0; clear: both; text-align: left; width: 970px; margin-left: 3px; padding-left: 3px}
#footer .footerLinks li {float: left; margin-right: 14px; padding: 10px 0}
#footer .footerLinks li a{color: #5e5e5e; font-size: 0.9em}
#footer .credit {font-size: 1.2em; color: #9c9b93; float: right; width: 250px; margin: 20px 25px 0 0; text-align: right }
.drinkAware{width:164px;height:45px;float:left; position: relative; margin-top: 20px}
.drinkAware span{position:absolute;width:100%; height:100%;background: url("../images/interface/logo_drinkAware.gif") no-repeat;}
/* interface -------------------------------------------------------------------------*/
a.btn {background: url(../images/interface/btn_left.gif) top left no-repeat; display: inline-block; clear: both; font-size: 1.5em; text-transform: uppercase; color: #fbf6e3; padding-left: 10px; margin: 20px 0; font-weight: bold}
a.btn:hover {text-decoration: none; color: #fbf6e3;}
a.btn span {background: url(../images/interface/btn_right.gif) top right no-repeat; padding: 7px 30px 7px 0; display: inline-block; font-family: Georgia, Times New Roman, serif}
.hide {display: none}
/* navigation -------------------------------------------------------------------------*/
#nav{margin:0 auto; position: relative}
.stage1 #nav,
.stage2 #nav{margin: 0 0 0 210px}
#nav li{width:200px;float:left;text-align:center;padding-top:67px; font-size: 1em; padding-bottom: 23px}
#nav li.on {background: url(../images/interface/flourish.gif) bottom center no-repeat}
#nav li a{text-decoration:none; text-transform:uppercase; color: #000; font-size: 1.2em}
#nav li.nav_logo{padding:0;  z-index: 10 }
#nav li.centred {margin-left:100px;}
.subNav { font-size: 1em; margin: 0 0 15px 0; width: 100%; overflow: hidden;}
.subNav li {margin: 0 20px 0 0; float: left;}
.subNav li.active {font-weight: bold;}
/* home layout -----------------------------------------------------------------------*/
body.home{/*background:#faf6e2 url("../images/interface/bg_home.jpg") center 131px no-repeat;*/
background:#faf6e2; }
.homeImage  {margin-top: -15px; display:block;}
body.home object {margin-top: -15px; display:block;}
.homeContent {width:360px;margin-left:430px; padding-top:100px; margin-top: -475px; height: 30em}
.home p {margin-bottom:18px;padding-left:2px}
.home h1{clear:both; }
.enterHere{position:relative;display:block;width:125px;height:28px;}
.enterHere span{position:absolute;width:100%; height:100%;background: url("../images/interface/btn_getSample.gif") no-repeat;}
.getSample{position:relative;display:block;width:125px;height:28px;}
.getSample span{position:absolute;width:100%; height:100%;background: url("../images/interface/btn_getSample.gif") no-repeat;}
.traditionsBtn {width:185px; float: left}
.traditionsBtn span {background: url("../images/interface/btn_traditions.gif")}
.videoBtn {width:157px; float: right}
.videoBtn span {background: url("../images/interface/btn_videos.gif")}
/* listing layout -----------------------------------------------------------------------*/
body.listing {background:#faf6e2 url("../images/interface/bg_listing.jpg") no-repeat center 130px}
body.listing h1 {padding:130px 0 0 105px;}
body.listing div.introCol1 {margin-left:110px; width: 250px; float: left; height: 11em; display: inline}
body.listing div.introCol2 {margin-left:650px; width: 250px}
body.listing ul.topics {clear: both; padding-top: 40px; width: 1000px; margin-left: 45px}
body.listing ul.topics li {float: left; width: 430px;height: 15.7em; margin: 0 45px 15px 0; background: url(../images/interface/bg_border.gif) bottom left no-repeat; padding: 20px 0; font-size: 1em}
body.listing ul.topics li img {float: left; margin:0 7px 10px 0 }
body.listing ul.topics li p {width: 250px; float: left;}
body.listing ul.topics li p a {padding-left: 20px; background: url(../images/interface/comment.gif) 2px 3px no-repeat}
body.listing ul.topics li h2 {font-size: 1.9em; text-transform: none; width: 290px; float: left; line-height: 1em; margin-top:16px; clear: none}
body.listing ul.topics li h2 a {text-decoration: none; color: #7D3301}
/* subpage layout - -----------------------------------------------------------------------*/
body.subpage .content {clear: both; margin: 0 0 0 70px}

body.subpage .leftCol,
body.competition .leftCol{float: left; width: 400px; margin-top: 20px}
body.subpage img.featureImage {float: right; margin:-20px 60px -60px 0;}
body.subpage h1,
body.competition h1{clear: both; padding-bottom: 10px}
body.subpage .form {float: right}
/* competition layout - -----------------------------------------------------------------------*/
body.competition .content {clear: both; margin: 0 0 0 70px}
body.competition .leftCol {width:400px;}
body.competition img.featureImage {float: right; margin: 0 0 -40px 0;}
body.competition .rightCol {float: right; margin: 0 70px 0 60px; width: 450px;}
/* internal layout -----------------------------------------------------------------------*/

body.page01{background:#faf6e2 url("../images/interface/bg_articlePage.jpg") no-repeat top center;}
body.article h1{clear:both;padding-top:60px;font-size:2.6em;margin-left:80px;margin-bottom:18px}
body.article h2{background: url("../images/interface/bg_border.gif") no-repeat bottom center; text-indent: 0}
body.article h2.subtitle {background: none; font-size: 1.9em; text-transform: none; padding-bottom: 0}
body.article h3.subtitle {font-size: 1.3em}
body.article #column1 img {border-top:3px solid #F2ECD0; padding-top: 20px}
body.article #column1 li,
body.article #column2 li{margin: 1em 0 1em 1em; list-style-type: disc; line-height: 1.5em}
body.article #column1 blockquote,
body.article #column2 blockquote{margin: 1em 0 1em 1em; line-height: 1.3em; font-size: 1.4em; color:#666666; font-style: italic}
body.article #column1 blockquote p,
body.article #column2 blockquote p {font-size: 1em}
.backToArticles{position:relative;display:block;width:171px;height:28px;margin-left:80px;padding-bottom:90px}
.backToArticles span{position:absolute;width:100%; height:100%;background: url("../images/interface/btn_backToArticles.gif") no-repeat; display: block}
body.article p{margin-bottom:18px}
p.quote{color:#7D3301;padding:15px 10px 18px 10px;font-family:arial;font-weight:bolder;font-style:italic;font-size:1.7em}
p.top{padding-top:0}
.first .drop{font-size:4.5em;float:left;margin-right:2px;height:50px}
body.article #footer {padding-top: 60px}
/* comments -----------------------------------------------------------------------*/
.addthis_button {font-weight: bold; font-size: 1.4em; margin-top: 30px; display: block; line-height: 1.5em; padding-left: 15px; background: url("../images/interface/plus.gif") no-repeat left center;}
.videoShare {margin-left: 35px}
.article .prevNext {border-bottom: 3px solid #F2ECD0; padding: 0 0 10px 0;width:370px;}
.article .prev {display: block; float: left; padding-left: 20px; background:transparent url(../images/interface/boxArrowLeft.gif) no-repeat 2px 3px; }
.article .next {display: block; float: right; padding-right: 20px; background:transparent url(../images/interface/boxArrow.gif) no-repeat right 4px; margin-left: -230px}
.articleCommentContainer {width: 1000px}
.comments {width:370px;margin-left:80px; float: left; display: inline}
.comments ul{clear: both; background: url("../images/interface/bg_border.gif") no-repeat center bottom ;padding-bottom:3px; margin-bottom: 20px}
body.article .comments li{padding:12px 12px 12px 18px; font-size: 1em; margin: 0; list-style-type: none}
.comments li p{margin-bottom:12px}
.comments li.even{background-color:#f0ebd1}
.comments h3{font-size:1.4em;font-weight:bold;color:#7d3301;padding-bottom:6px}
.showAll{position:relative;display:block;width:180px;height:27px;float:left}
.showAll span{position:absolute; top: 0; left: 0; width:100%; height:100%;background: url("../images/interface/btn_showAll.gif") no-repeat; display: block}
.minimise{position:relative;display:block;width:112px;height:27px;float:left}
.minimise span{position:absolute;width:100%; height:100%;background: url("../images/interface/btn_minimise.gif") no-repeat; top: 0; left: 0}
.caveat{font-size: 1.4em; margin-top: 10px}
.caveat a { font-size: 1em}
p.commentNumber{width:auto;float:right;background: url("../images/interface/icon_comment.gif") no-repeat;padding-left:20px}
/* article spotlights -------------------------------------------------------------*/
.spotlight {width:370px;margin:0 150px 50px 80px; float: right; display: inline; }
.spotlight p{margin:12px 12px 0 12px}
.member {width:370px;margin:0 150px 50px 80px; float: right; display: inline; background:url("../images/interface/member_bg.gif") top left no-repeat }
.member p {color: #fff; padding: 0px 10px 10px 10px; width: 340px}
.member a {color: #fff; text-decoration: underline}
.member h2 {color: #fff; background: none !important; padding: 10px 0 0 10px}
.member h2 a {text-decoration: none}
.learnMore{position:relative;display:block;width:311px;height:28px}
.learnMore span{position:absolute; top: 0; left: 0;width:100%; height:100%;background: url("../images/interface/btn_learnMoreAboutTheGlenlivet.gif") no-repeat;}
/*  range */
h2.range {margin: 0; position: relative; top: 40px; left: 60px; color: #d09724; font-size: 1.8em }
ul.range {clear: both; width: 1000px;margin-top: 0; background: url("../images/interface/list_bg.gif") top left no-repeat; padding: 30px 0 20px 50px }
ul.range li {float: left; width: 380px;height: 14em; margin: 0 45px 5px 0; background: url(../images/interface/bg_border_small.gif) 130px bottom no-repeat; padding: 20px 0; font-size: 1em}
ul.range li img {float: left; margin-right: 7px }
ul.range li p {width: 230px; float: left; font-size: 1.3em}
ul.range li p a {font-weight: bold; padding-left: 20px; background: url(../images/interface/boxArrow.gif) 2px 3px no-repeat; font-family: Georgia, Times, "Times New Roman", serif}
ul.range li h2 {font-size: 1.9em; text-transform: none; width: 240px; float: left; line-height: 1em; margin-top:16px; clear: right}
ul.range li h2 a {text-decoration: none; color: #7D3301; }
/* comment form  -----------------------------------------------------------------------*/
.form h2 {text-transform: none; font-size: 1.7em}
.form .callOut {font-size: 1.1em; margin: 1em 0; width: 350px}
.form .firstParagraph {margin: 2em 0 1em 0;}
.form .lastParagraph {margin: 1em 0 2em 0;}
.form .tsandcs {margin: 1em 0 0 110px;font-size:1.2em;}
.form,
.validation,
.attention{background: #f0ebd1; padding: 15px; margin: 0}
.validation {margin-bottom: 20px; font-weight: bold}
.form .mandatory {font-size: 0.8em}
.form label {color: #7d3301; font-size: 1.4em; width: 105px; display: inline-block;vertical-align: top;line-height:1.4em}
div.error {margin-bottom: 20px}
label.error,
div.error span{ width:auto !important; color: #000; font-size: 1em}
div.error span.errorMsg {font-size: 1.4em; line-hieght: 1.4em}
div.error ul li {color:#000000; font-size: 1.2em}
/* validation errors list */

form ul#validations {list-style-type: none; padding: 0; margin: 0;}
form ul#validations li {padding: 0 0 0 15px; margin: 0 0 .5em 0; font-size: 1.3em; line-height: 1.5em; background: url(../images/interface/blt-validation_errors.gif) no-repeat 0 .5em;}
form ul#validations li label.error {font-size: 1em; line-height: 1.5em; color:#000000; padding:0; margin:0; display: block; vertical-align: top; width: 100% !important;}

.form fieldset {margin: 4px 0; clear: both}
.form input, .form select,
.form textarea {background: #faf6e2; color:#666666; border: 1px solid #c1bca5; font-size: 1.2em; font-family:tahoma,arial,verdana,sans-serif;  }
.form textarea {padding: 3px; margin-bottom: 10px}
/*.form .checkBox {margin: 4px 0 7px 0}
.form .checkBox label {width:180px;  padding-right: 10px;margin-left: 110px; font-size: 1.2em; }
.form .checkBox input{border: none; background: none}
*/
.form .checkBox {margin: 4px 0 10px 0}
.form .checkBox label{width:180px;font-size: 1.2em;margin-top:1px}
.form .checkBox input{margin-left:110px;border: none; background: none}
.form select {background: #faf6e2; border: 1px solid #c1bca5;}
.form input.submit,
.form input.imageSubmit{ border: none; margin: 10px 5px 0 110px}
.form input.text {width: 232px}
#comment-form .form input.text,
#comment-form .form textarea{width: 200px}
.form .postcode input.text {width: 126px}
.comments .form.hide{display:none}
/* contact form  -----------------------------------------------------------------------*/
.contactForm {margin-right: 20px; width: 400px}
.contactForm .comments {margin-left: 0}
.contactForm textarea {margin-left: 2px}
/*.contactForm .checkBox label {margin-top: 4px}*/
.contactForm span.checkbox {display: inline-block; vertical-align: top}
.contactForm .firstParagraph{margin-top:1em}
/* verification form  -----------------------------------------------------------------------*/
body.verification {background:#faf6e2}
body.verification p.callOut {margin: 70px 0 10px 50px;}
.verify {margin: 0; background: none; width: 400px }
.verify p,
.verify fieldset{margin-left: 50px; font-weight: bold; }
.verify label {width: 50px}
.verify .imageSubmit {margin-left: 50px !important}
#validation_form .validation{margin-left: 50px; display: block; padding: 0px; width: 200px; background: none }
#validation_form .validation em {padding: 15px;  font-style: normal; background: #F0EBD1; line-height: 4em}
/* competition form  -----------------------------------------------------------------------*/
.compForm {margin-top: 20px}
.compForm .comments {margin: 0 2px 0 0}
.form fieldset.friends  {padding: 8px 0;border-top:3px solid #F2ECD0; width: 370px}
.form fieldset.friends input {margin: 2px 0}
.compForm .addMore {display: block; float: right; font-size: 1.3em; margin: 10px 60px; font-weight: bold}
/* invitations -----------------------------------------------------------------------*/
.invitations {margin-top: 30px}
.invitations h2 {text-transform: none; font-size: 1.7em}
.invitations table {table-layout: fixed; font-size: 1.4em}
.invitations th {padding:10px 14px; color:#5E5E5E; border-bottom:3px solid #F2ECD0;}
.invitations td {padding:10px 0px 10px 14px;}
.invitations .imageSubmit { margin: 10px 0 0 14px}
.questionnaire label {width: 190px}
.questionnaire fieldset {margin: 8px 0}
.questionnaire input.text {width: 60px}
.questionnaire input.imageSubmit {margin-left: 190px}
/* Text only pages  -----------------------------------------------------------------------*/
.textOnly .content {width: 600px; padding: 30px 0 0 170px;}
.terms {width: 600px; margin: 2em 0em; padding: 0 2em;}
 ol.smallterms { width:auto !important; text-align:left; margin-top:3em;}
 ol.smallterms li { font-size:1.1em;  }
.terms li {font-size: 1.2em}
.terms li li{font-size: 1em}
.textOnly .content ul li {list-style: disc}
/* video  ----------------------------------------------------------------------- */
.video {clear: both; margin-left: 40px}

#videoWrapper {clear: both; float: left; position: relative; padding-bottom: 40px; width: 100%;}
#videoContent {clear: both; float: left; padding-right: 40px; padding-bottom: 40px; padding-left: 70px; width: 372px; text-align: left;}
#video {float: right; padding-right:70px; padding-bottom: 20px; width: 498px;}
#player {display:block;width:498px;height:269px}
#videoThumbnails {clear:both;width:102%;margin:0 0 160px 27px}
#videoThumbnails a{float: left; width: 105px; text-transform: uppercase; margin-right: 1px; font-family: Georgia, Times, serif}
#videoThumbnails a {color: #4E4946; font-weight: bold; font-size: 1.1em; display: block; }
#videoThumbnails a:hover {text-decoration: none}
#videoThumbnails span {background: url(/images/interface/vid_intro.jpg) 0 -75px no-repeat; height: 74px; width: 104px; display: block; margin-bottom: 10px}
#videoThumbnails a:hover span,
#videoThumbnails a span.playing{background-position: 0 0px; height: 75px; margin-bottom: 9px;  }
#videoThumbnails a.tasting span {background-position: 0 -223px}
#videoThumbnails a.tasting:hover span,
#videoThumbnails a.tasting span.playing{background-position: 0 -149px}
#videoThumbnails a.glass span {background-position: 0 -371px}
#videoThumbnails a.glass:hover span,
#videoThumbnails a.glass span.playing{background-position: 0 -297px}
#videoThumbnails a.swirling span {background-position: 0 -520px}
#videoThumbnails a.swirling:hover span,
#videoThumbnails a.swirling span.playing{background-position: 0 -445px}
#videoThumbnails a.yr12 span {background-position: 0 -671px}
#videoThumbnails a.yr12:hover span,
#videoThumbnails a.yr12 span.playing{background-position: 0 -597px}
#videoThumbnails a.yr15 span {background-position: 0 -819px}
#videoThumbnails a.yr15:hover span,
#videoThumbnails a.yr15 span.playing{background-position: 0 -744px}
#videoThumbnails a.nadura span {background-position: 0 -968px}
#videoThumbnails a.nadura:hover span,
#videoThumbnails a.nadura span.playing{background-position: 0 -891px}
#videoThumbnails a.yr18 span {background-position: 0 -1118px}
#videoThumbnails a.yr18:hover span,
#videoThumbnails a.yr18 span.playing{background-position: 0 -1043px}
#videoThumbnails a.yr21 span {background-position: 0 -1269px}
#videoThumbnails a.yr21:hover span,
#videoThumbnails a.yr21 span.playing{background-position: 0 -1193px}
#videoThumbnails a.yr25 span {background-position: 0 -1420px}
#videoThumbnails a.yr25:hover span,
#videoThumbnails a.yr25 span.playing{background-position: 0 -1344px}
/* buttons  ----------------------------------------------------------------------- */
.downloadTheVideo {position:relative;display:block;width:208px;height:28px;}
.downloadTheVideo span{position:absolute;width:100%; height:100%;background: url("../images/interface/btn-download_video.gif") no-repeat;}
.shareWithAFriend {position:relative;display:block;width:208px;height:28px;}
.shareWithAFriend span{position:absolute;width:100%; height:100%;background: url("../images/interface/btn-share.gif") no-repeat;}
/* Add This  ----------------------------------------------------------------------- */
body #at15s_head,
body #at16pf,
body #at16psf,
body #at16pt{background-color: #F0EBD1}
body #at16pf {display: none}
body #at15s {border: 1px solid #7D3301;}
body #at_hover .at_item:hover,
body #at_hover .at_item.athov,
body #at_share .at_item:hover {border: 1px solid #F0EBD1 !important; background: #FAF6E2 !important }