/*------------------------------------------------------------------
[Master Stylesheet]

Project: Thirsty Work	
Version:	0.5
Last change:	
Assigned to:	Patrick Blown - Hinterlands Consultancy
Primary use:	Screen
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
 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, sub, sup, 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; }
address { font-style: normal; }

/*Clear fix for floated content and container height stuff*/
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/*------------------------------------------------------------------
 Structural CSS
-------------------------------------------------------------------*/
#page { width: 1000px; margin: 0 auto 0 auto;}
#content { _height: 620px; height: 620px; position: relative; }
#footer { height: 60px; }

/*------------------------------------------------------------------
Visual CSS
-------------------------------------------------------------------*/
body.brown1{ background-color: #ba6a38; }
body.brown2 { background-color: #6f2e21; }
body.brown3 { background-color: #c78257; }
body.brown4 { background-color: #7e4635; }
body.white #page, body.white #page a { color: #000; }
body.white #footer a { color: #6f2e21; }

#page { 	color: #fff; }
#page a { color: #fff; }

#content { 
	padding: 50px 100px 0 100px;
	text-align: center;
}
#content p { padding: 5px 150px 5px 150px; }

#page.detail .output {
	position: relative;
	width: 314px;
	height: 200px;
	padding: 16px;
	margin: 150px auto 5px auto;
	background-color: #fff;
	color: #000;
	text-align: left;
	line-height: 11px;
}
#page.detail .output p, #page.detail .output h1  { padding: 3px 10px 10px 10px; text-transform: none;}
#page.detail p { text-transform: uppercase; padding: 5px;}
#page.detail .output h1 { text-transform: uppercase; font-weight: bold; }

#content .button a,#content ul.button li a,#content div.button a,#content .button strong {
	text-decoration: none;
	text-transform: uppercase;
	color: #ba6a38;
	text-align: center;
}
#content .button a:hover, #content ul.button li a:hover { color: #834118; }

#content img { vertical-align: middle; }
#footer ul { width: 900px; margin: 0 auto 0 auto; }
#footer { padding-top: 20px; }
#footer li {
	display: inline;
	padding: 0 24px 0 24px;
}
#footer a {text-transform: uppercase; }

/*------------------------------------------------------------------
Font CSS. Includes cascaded changes
-------------------------------------------------------------------*/
p, a, span, h1, h2 , table, 
fieldset label.special,
#page #content div.popup div p,
#page #content div.popup div a,
#page #content div.popup div strong { font-family: Arial, Helvetica, sans-serif; }

#page.home #content p,
body.white #content p,
#footer a  { font-family: 'Times New Roman', Times, 'Bookman Old Style', serif; }


#content .button a,
#content ul.button li a,
#content div.button a,
#content .button strong,
#page.preview #content div.button,
fieldset strong, fieldset label  { font-family: 'Arial Black', Gadget, sans-serif; font-weight: 500; }


p, a, span, h1, h2 , table,
body.white #content div.button a,
#page.payment #content ul.button li a,
#page.trade #content ul.button li a,
#content .button strong,
#page #content div.popup div p,
#page #content div.popup div a,
#page #content div.popup div strong { font-size: 10px; }

fieldset label.special, fieldset label.small { font-size: 8px; }
#page #content fieldset span.output { font-size: 9px; }

#content .button a,#content div.button a,#content .button strong { font-size: 12px; }
#content ul.button li a { font-size: 10px; }
#page.preview #content ul.button li a { font-size: 14px; }
#page.home #content div.button a { font-size: 11px; }
#page.home #content p, body.white #content p { font-size: 14px; }


/*------------------------------------------------------------------
Background images
-------------------------------------------------------------------*/
div.ausorder, div.intorder  { background: url(images/order-bg.gif) no-repeat center 53px transparent; }
div.preview { background: url(images/preview-bg.gif) no-repeat right 54px transparent; }
div.payment { background: url(images/payment-bg.gif) no-repeat center 90px transparent; }
div.trade { background: url(images/trade-bg.gif) no-repeat center 110px transparent; }
div.detail{ background: url(images/detail-bg.gif) no-repeat center 50px transparent; }
div.sitemap { background: url(images/detail-bg.gif) no-repeat center 50px transparent; }

/*------------------------------------------------------------------
Unique Stylings
-------------------------------------------------------------------*/
#page.home #content div.button{ float: right; width: 140px; }
#page.home #content div.button a { color: #fff; }
#page.home #content div.button a:hover { color: #ddd; }


body.white #content div.button {
	position: absolute;
	top: 156px;
	right: 168px;
	width: 120px;
	height: 69px;
	padding: 0px 0px 0px 138px;
	background: url(images/gradient1.png) no-repeat 0 0 transparent;
	_background: url(images/gradient1ie.gif) no-repeat 0 0 transparent;
	
}

body.white #content div.button a {
	margin-top:40px;
}

body.white #content div.button a#more{
	margin-top:0;
	height: 7px;
	padding-top: 58px;
	background: url(images/bottle2.png) no-repeat 10px 0 transparent;
	_background: url(images/bottle2.gif) no-repeat 10px 0 transparent;
	
}



body.white #content div.button  a#more:hover{ background-position: 10px -69px; }
body.white #content ul.button  { width: 450px; margin: 0 auto 0 auto; }

#page.sitemap #content ul {margin-top:180px;margin-left:335px;}
#page.sitemap #content ul li {display:block;width:300px;height:30px;text-align:left;}
#page.sitemap #content ul li a {font-size:16px;}

#page.trade #content ul.button { margin: 326px auto 0 auto; _height: 0px; }
#page.trade #content ul.button li { margin: 0 57px 0 0px; display: inline; position: relative; }

#page.payment #content ul.button { margin: 380px auto 0 auto; _height: 0px; }
#page.payment #content ul.button li { margin: 0 0 0 130px; display: inline; position: relative; }
#page.payment #content p { text-transform: uppercase; line-height: 14px;}

#page.preview #content ul, #page.payment #content ul{ text-align: left; }
#page.preview #content ul {margin-left:-20px;}
#page.preview #content div.button { margin: 0 -50px 0 -50px; font-size: 10px; text-transform: uppercase; 	color: #ba6a38; }
#page.preview #content ul.button li a {
	width: 325px;	
	background-position: right 0;	
	text-align: right;	
}
#page.preview #content ul.button li a#dust_jacket {
	height: 82px;
	padding: 66px 110px 0 0;
	background-image: url(images/preview-sprite1-150.gif);
}
#page.preview #content ul.button li a#typical_pages {
	height: 86px;
	padding: 62px 110px 0 0;
	background-image: url(images/preview-sprite2-150.gif);
}
#page.preview #content ul.button li a#bottle_catalogue_page {
	height: 91px;
	padding: 45px 110px 0 0;
	background-image: url(images/preview-sprite3-150.gif);
}
#page.preview #content ul.button li a#bottle_photographs {
	height: 78px;
	padding: 20px 110px 0 0;
	background-image: url(images/preview-sprite4-150.gif);
}

#page.preview #content ul.button li a:hover,
body.white #content ul.button li a:hover { background-position: right -150px; }
#page.trade #content ul.button li a:hover { background-position: center -163px; color:#ab5b29; }
#page.payment #content ul.button li a:hover, #page.payment #content ul.button li a.aus_first:hover, #page.payment #content ul.button li a.aus_second:hover, #page.payment #content ul.button li a.int:hover { background-position: center -150px; }


body.white #content ul.button li a,
#page.payment #content ul.button li a { 	
	margin: 0 20px 10px 0;
	height: 0px;
	padding-top: 150px;	
}
body.white #content ul.button li a {
	width:130px;
}
#page.payment #content ul.button li a {
	width: 150px;
}
#page.payment #content ul.button li a.aus_first { 
	background:url(images/payment-sprite1-150.gif) no-repeat center 0 transparent;
}
#page.payment #content ul.button li a.aus_second { 
	background:url(images/payment-sprite2-150.gif) no-repeat center 0 transparent;
}
#page.payment #content ul.button li a.int { 
	background:url(images/payment-sprite3-150.gif) no-repeat center 0 transparent;
}
#page.trade #content ul.button li a { 
	width: 140px;
	height: 0px;
	padding-top: 163px;
	background-position: center 0;
}
body.white #content ul.button li,
#page.payment #content ul.button li  { float: left; }

#page.trade #content ul.button li  { float: right; }

#page.preview #content ul.button li a,
#page.payment #content ul.button li a,
body.white #content ul.button li a,
body.white #content div.button  a,
#page.trade #content ul.button li a {
	display: block;
	background-repeat: no-repeat;
}

/*------------------------------------------------------------------
Popup Styling
-------------------------------------------------------------------*/
#page #content div.popup { position: absolute; }

#page.payment #content ul.button li div.left, #page.payment #content ul.button li div.right { width: 305px; height: 460px; }
#page.trade #content div.center { left: 0; width: 100%; }
#page.trade #content div.center div { width: 430px; height: 240px; margin: 140px auto 0 auto;  padding: 30px 20px 0 30px;}

#page.payment #content ul.button li div.left {
	top: -320px;
	left: -240px;
	background: url(images/arrow1.png) no-repeat right bottom transparent;
	_background: url(images/arrow1.gif) no-repeat right bottom transparent;
}
#page.payment #content ul.button li div.right {
	top: -345px;
	left: 40px;
	padding-left: 68px;
	background: url(images/arrow2.png) no-repeat left bottom transparent;
	_padding-left: 47px;
	_background: url(images/arrow2.gif) no-repeat left bottom transparent;
}
#page #content div.popup div {
	position: relative;
	border: 5px solid #bb6938;
	background-color: #fff;
	width: 230px;
	height: 240px;
	padding: 10px 5px 8px 8px;
}

#page.payment #content ul.button li div.left div { padding-top: 25px; }

#page.ausorder #content div.center,
#page.intorder #content div.center {
	z-index: 10;
	width: 163px;
	height: 190px;
	left: 140px;
	top: 10px; 
	background: url(images/arrow3.png) no-repeat 50px top transparent;
	_background: url(images/arrow3.gif) no-repeat 50px top transparent;
}
#page.intorder #content div.center {
	left: 170px;
	top: 18px;
}

#page.ausorder #content div.center div,
#page.intorder #content div.center div {
	border-color: #6e2f21;
	left: -320px;
	top: 80px;
	position:absolute;
	width: 850px;
	height: 140px;
	padding: 10px 10px 5px 10px;
	margin: 0 auto 0 auto;
}
#page.ausorder #content div.center div {
	height: 200px;
}	
#page.intorder #content div.large div {
	border-color: #6e2f21;
	left: -320px;
	top: 80px;
	position:absolute;
	width: 900px;
	height: 140px;
	padding: 10px 10px 5px 10px;
	margin: 0 auto 0 auto;
}
	
#page #content .popup { text-align: left; margin: 0 100px 0 0;}
#page #content .popup a { color: #000; }
#page #content .button div.popup strong, #page #content .button div.popup a{ color: #000; text-transform: none; }

#page #content div.popup div p { padding: 8px 5px 5px 8px; text-transform: none; color: #000; line-height: 16px; }
#page #content .button div.popup div a, #page #content div.popup div a { 
display: inline; 
padding: 0; 
margin: 0; 
text-transform: none; 

text-decoration: none;
font-weight: normal;}

#page #content  div.popup div a:hover { text-decoration: underline; }
#page #content .button div.popup div span a,
#page #content div.popup div span a{
	position: absolute;
	top: 5px;
	right: 5px;
	width: auto; 
	height: auto; 
	text-transform: uppercase;
	color: #929498;
	font-size: 8px;
}

#page #content div.popup div table, #page #content div.popup div table p { color: #000;	text-transform: none; line-height: 9px; }
#page #content div.popup div td, #page #content div.popup div th { border-bottom: 2px solid #ba6a38; padding: 8px 7px 8px 0; text-align: center;} 
#page #content div.popup div th {text-align: right;}
#page #content div.popup div p.ins {float:right;text-align:left;line-height:10px;width:200px;padding-top:22px;}
#page #content div.popup div p.ins input {margin:0;padding:0;}
#page #content div.popup div p.hint {float:right;text-align:left;line-height:10px;width:140px;padding-top:40px;}
#page #content div.popup div tr.middle td, #page #content div.popup div tr.middle th {border-bottom: 1px solid #ba6a38;}
#page #content div.popup div tr.noborder td, #page #content div.popup div tr.noborder th, #page #content div.popup div td.noborder {border-bottom: 0;}
#page #content div.popup div th { margin-right: 100px; }
#page #content div.popup p.notice {text-align:left;padding:2px 0;margin:0;}


/*------------------------------------------------------------------
Form Style
-------------------------------------------------------------------*/
fieldset {
	position: relative;
	margin: 0 auto 0 auto;
	text-align: left;
	width: 550px;
	padding: 101px 0 0 0;
	text-transform: uppercase;
}
 
fieldset ul li {
	display: block;
	position: relative;
	float: left;
	height: 25px;
	width: 100%;
}
#page #content fieldset p { text-align: center; padding: 0px 0 15px 0; }

fieldset label { 
	font-size: 9px;
	float: left;
	text-align: right; 
	display: block; 
	width: 160px; 
	height: 16px;
	padding: 4px 8px 0 0;
}

fieldset input { 
	float: left;
	width: 260px; 
	height: 15px;  
	border: none;
	padding: 0px;
}

fieldset select {
	float: left;
	width: 115px;
}

#page #content fieldset span.output {
	display: block;
	position: relative;
	z-index: 1;
	float: left;
	height: 11px;
	width: 115px;
	padding: 4px 0 0 0;
	margin: 2px 0 3px 0; 
	color: #000;
	text-transform: none;
	background-color: #fff;
	background-position: center center;
	background-repeat: no-repeat;
}
body #page.intorder fieldset ul li label {
	width:200px;
}
body #page.intorder fieldset ul {
	margin-left:-30px;
}
fieldset ul li.special { height: 30px; }
fieldset ul li.special label { position: relative; z-index: 3; }
fieldset ul li.special label.special { text-align: left; }
fieldset ul li.special pan { position: relative; z-index: 3; }
fieldset ul li.special input { width: 24px; }
#page.intorder fieldset ul li.special input { height: 25px; }
fieldset ul li.special input.small { width: 80px; }
#page #content fieldset .checkbox { width: 15px; height: 15px; }
fieldset label.small {
	margin-left: 7px;
	width: 125px; 
	padding: 0 0 0 0; 
	line-height: 1.2em; 
	height: 20px; 
}

fieldset label.special { 
	width: 90px; 
	padding: 0 0 0 0;
	height: 20px;
}
fieldset input.small { width: 72px; }
fieldset select.small { width: 43px; margin-top: 1px; }

body #page.ausorder div.gradient,
body #page.intorder div.gradient {
	z-index: 0;
	position: absolute;
	left: -80px;
	top: 1px;
	width: 253px;
	height: 70px;
	width: 248px;
	background: url(images/gradient2.png) no-repeat right 0 transparent;
	_background-image: url(images/gradient2ie.gif);
	background-repeat: no-repeat;	
}

body #page.intorder div.gradient {
	height: 70px;
	width: 290px;
	top: -2px;
	background-repeat: no-repeat;
	background-image: url(images/gradient3.png);
	_background-image: url(images/gradient3ie.gif);
}

body #content div.gradient a {
	position: relative; 
	display: block; 
	width: 90px; 
	height: 0px;
	margin: -30px 0 0 -70px;
	padding-top: 79px;	
	background: url(images/sprite-clock-79.gif) no-repeat 10px 0 transparent;	
	color: #000;
	text-align: center;
	text-decoration: none;
}

body #page.intorder div.gradient a { margin-top: -20px; }
body #content div.gradient a:hover { background-position: 10px -79px; }


/*------------------------------------------------------------------
More Information Page
-------------------------------------------------------------------*/
#page #content a#more {	
	line-height:11px;
}
#page #content p#more_desc {
	margin-top:-3px;
	padding-top:0;
	line-height:15px;
}

/*--------------------------------------------------------------------
Sample Page jQuery Overlay
--------------------------------------------------------------------*/
#page.preview div.overlay {
    background:url(images/whiteoverlay.png);
	position:absolute; 
	display:none;	
	width:1000px;	
	padding:50px;
} 
 
/* default close button positioned on upper right corner */ 
#page.preview div.overlay div.close { 
    background-image:url(images/close.png);
	position:absolute; 
	width:25px; 
	height:25px; 
	top:20px; 
	left:25px; 
	cursor:pointer;  
	display:block;  
	z-index:999; 
}



/*------------------------------
thirsty notice
--------------------------------*/
#page.payment #notice {
	position:absolute;
	top:120px;
	left:430px;
	width:400px;
	height:286px;
	background:url(images/out_of_office_notice.png) no-repeat;
}



/*------------
H1 Styling
--------------*/

.brown1 .home #content h1 {
	font-size: 23px;
	color: #2d2422;
}