/********************************************
   AUTHOR:          http://www.creativestate.com 
   WEBSITE:     http://www.intheraw.com/
   TEMPLATE NAME:  In The Raw
   DATE:           Feb-13th-2010
 *******************************************/ 
 
/********************************************
   HTML ELEMENTS
********************************************/ 
 
* { margin: 0; padding: 0px; }

html, body { margin: 0; padding: 0px; height: 100%;}

body {background: #000 url(/images/mainBg.jpg);}
#homebody { }

img{
border: 0px;
}

a:active, a:focus{outline: 0;}

a{
color: #fff;
}
a:visited{
color: #666;
}

.special{
display: block;
margin-bottom: 15px;
font-size: 1.3em;
color: #fff;
letter-spacing: -.03em;
}

.clear { clear: both}

/* ----------HEADINGS--------------------- */

h2, h3, h4, .glossymenu b { color: #fff; font: 18px Arial,'Trebuchet MS', Helvetica, sans-serif; margin-bottom: 10px; letter-spacing: 1px  }


/* ----------Centered Container Or the Layout--------------------- */

#container { 
margin: 0 auto -4em; /* make sure this matches in the body footer DIV */
width: 980px;
background: url(/images/contentbg.jpg) no-repeat top center;
} 


/* --------------LABELS BUTTONS & FORMS-----------*/
 
label {
font: bold 10pt 'Trebuchet MS', Arial, Sans-serif;
color: #777;
}
 
.form, textarea {
width: 20em;
border: 1px solid #777;
font: 10pt 'Trebuchet MS', Arial, Sans-serif;
color: #86878b;
padding: 2px;
margin-bottom: 20px;
}
 
.button {
width: 6em;
font: bold 10pt 'Trebuchet MS', Arial, Sans-serif;
color: #fff;      
background: #4fc2f0;
padding: 4px 5px;
border: 1px solid #46a1c6;
}




/* --------------HEADER------------- */

#topContain{
height: 573px;
margin: 0 auto;
background: url(/images/homeHeaderBg.jpg) no-repeat center top;
}

#inner #topContain{
height: 383px;
background: url(/images/innerHeaderBg.jpg) no-repeat center top;
}

#header {height: 141px;}

#header .holder{ width: 980px; margin: 0 auto}
#header .holder h1 { width: 453px; height: 140px; float: left; clear: right; text-indent: -9999em; background: url(/images/logo.png) no-repeat }
#header .holder a { text-indent: -9999em; }

#player{
display: block;
width: 68px;
position: relative;
top: 43px;
height: 21px;
}
#header .holder .nav{padding-top: 90px}
#header .holder #player { float: left; clear: right; width: 67px; }



/* ---------HEADER NAV ----------- */

#header .holder .nav { float: left; clear: right; width: 380px; padding-left: 65px; }

#headnav  ul#navigation { display: block; width: 316px; height: 13px; }
#headnav  ul#navigation li {float: left; list-style-type: none;}


/* --------------HEAD NAV------------- */
ul#headnav { list-style:none; height:13px;  }
ul#headnav li {display:inline;}
ul#headnav li a { height:13px; float:left; text-indent:-9999px;}



/* -----STATIC------ */
ul#headnav li#headnav-1 a { width:76px; background: url(/images/headnav.png) no-repeat 0 0; /* X and Y position at 0 */}
ul#headnav li#headnav-2 a { width:119px; background: url(/images/headnav.png) no-repeat -76px 0; /* X and Y position at 0 */}
ul#headnav li#headnav-3 a { width:121px; background: url(/images/headnav.png) no-repeat -195px 0; /* X and Y position at 0 */}



/* -----HOVER------ */
ul#headnav li#headnav-1 a:hover { width:76px; background: url(/images/headnav.png) no-repeat 0 -13px; /* X and Y position at 0 */}
ul#headnav li#headnav-2 a:hover { width:119px; background: url(/images/headnav.png) no-repeat -76px -13px; /* X and Y position at 0 */}
ul#headnav li#headnav-3 a:hover { width:121px; background: url(/images/headnav.png) no-repeat -195px -13px; /* X and Y position at 0 */}


/* -----ACTIVE------ */
ul#headnav li#headnav-1 a.current { width:76px; background: url(/images/headnav.png) no-repeat 0 -13px; /* X and Y position at 0 */}
ul#headnav li#headnav-2 a.current { width:119px; background: url(/images/headnav.png) no-repeat -76px -13px; /* X and Y position at 0 */}
ul#headnav li#headnav-3 a.current { width:121px; background: url(/images/headnav.png) no-repeat -195px -13px; /* X and Y position at 0 */}



/* ----------------------------MAIN NAV--------------------------- */

#nav .holder{ margin: 0 auto;  width: 980px}



/* --------------NAVBAR------------- */
ul#topnav { list-style:none; height:58px;}
ul#topnav li {display:inline;}
ul#topnav li a { height:58px; float:left; text-indent:-9999px;}



/* -----STATIC------ */
ul#topnav li#topnav-1 a { width:136px; background: url(/images/navbar.png) no-repeat 0 0; /* X and Y position at 0 */}
ul#topnav li#topnav-2 a { width:144px; background: url(/images/navbar.png) no-repeat -136px 0; /* X and Y position at 0 */}
ul#topnav li#topnav-3 a { width:219px; background: url(/images/navbar.png) no-repeat -280px 0; /* X and Y position at 0 */}
ul#topnav li#topnav-4 a { width:213px; background: url(/images/navbar.png) no-repeat -499px 0; /* X and Y position at 0 */}
ul#topnav li#topnav-5 a { width:128px; background: url(/images/navbar.png) no-repeat -712px 0; /* X and Y position at 0 */}
ul#topnav li#topnav-6 a { width:140px; background: url(/images/navbar.png) no-repeat -840px 0; /* X and Y position at 0 */}



/* -----HOVER------ */
ul#topnav li#topnav-1 a:hover { width:136px; background: url(/images/navbar.png) no-repeat 0 -59px; /* X and Y position at 0 */}
ul#topnav li#topnav-2 a:hover { width:144px; background: url(/images/navbar.png) no-repeat -136px -59px; /* X and Y position at 0 */}
ul#topnav li#topnav-3 a:hover { width:219px; background: url(/images/navbar.png) no-repeat -280px -59px; /* X and Y position at 0 */}
ul#topnav li#topnav-4 a:hover { width:213px; background: url(/images/navbar.png) no-repeat -499px -59px; /* X and Y position at 0 */}
ul#topnav li#topnav-5 a:hover { width:128px; background: url(/images/navbar.png) no-repeat -712px -59px; /* X and Y position at 0 */}
ul#topnav li#topnav-6 a:hover { width:140px; background: url(/images/navbar.png) no-repeat -840px -59px; /* X and Y position at 0 */}


/* -----ACTIVE------ */
ul#topnav li#topnav-1 a.current { width:136px; background: url(/images/navbar.png) no-repeat 0 -59px; /* X and Y position at 0 */}
ul#topnav li#topnav-2 a.current { width:144px; background: url(/images/navbar.png) no-repeat -136px -59px; /* X and Y position at 0 */}
ul#topnav li#topnav-3 a.current { width:219px; background: url(/images/navbar.png) no-repeat -280px -59px; /* X and Y position at 0 */}
ul#topnav li#topnav-4 a.current { width:213px; background: url(/images/navbar.png) no-repeat -499px -59px; /* X and Y position at 0 */}
ul#topnav li#topnav-5 a.current { width:128px; background: url(/images/navbar.png) no-repeat -712px -59px; /* X and Y position at 0 */}
ul#topnav li#topnav-6 a. current { width:140px; background: url(/images/navbar.png) no-repeat -840px -59px; /* X and Y position at 0 */}

/* ----------------------------MAIN NAV--------------------------- */




/* --------------HOME ROTATOR------------- */
#rtr, #subrtr {}
#rtr {height: 372px;}
#rtr .rtrholder { 
margin: 0 auto; 
width: 982px;
height: 372px;
overflow: hidden;
}
#rtr .rtrholder img{margin-left: 1px;}
#subrtr{
width: 982px;
margin: 0 auto;
}
#subrtr img{
margin-left: 1px;
}


/* --------------MAIN------------------------------------------------*/
#main { min-height: 100%; height: auto !important; height: 100%; margin-bottom: 20px}


/* ----------------------------------HOME 3 BLOCKS------------------------*/

#main .homecontent { margin: 0px; padding-top: 27px; height: auto; }

#main .homecontent .boxone, .boxtwo, .boxthree {
float: left;
clear: right;
width: 308px;
height: auto;
height: 100%;
margin-right: 28px;
margin-bottom: 26px;
padding: 0px;
}

#main .homecontent .text, .video { 
background: #111 url(/images/boxbg.gif) no-repeat; 
height: 157px;
}

#main .homecontent .video {text-align: center; background: #111 url(/images/boxwinebg.gif) no-repeat; }

#main .homecontent .boxthree {margin-right: 0px;}

.topone, .toptwo, .topthree { width: 308px; height: 152px; }
.topone { background: url(/images/boxtop_one.png) no-repeat}
.toptwo { background: url(/images/boxtop_two.png) no-repeat}
.topthree { background: url(/images/boxtop_three.png) no-repeat}

.bottom { width: 308px; height: 10px; background: url(/images/boxbot.gif) no-repeat }

#main .homecontent p {
font-family: Arial,'Trebuchet MS', Helvetica, sans-serif;
font-size: 12px;
line-height: 1.6em;
color: #787877;
margin: 0px 20px 26px 20px;
padding-top: 14px;
clear: both;
height: 95px;
overflow: hidden;
}

#main .homecontent a { 
float: right;
font-family: Arial,'Trebuchet MS', Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
font-size: 11px;
margin-right: 18px;
padding: 5px;
color: #590c0c;
text-decoration: none
}

#main .homecontent a:hover { text-decoration: underline}


/* ----------------------------------HOME 3 BLOCKS------------------------*/





/* --------------------------------------------------------------------INSIDE PAGES----------------------------------------------------------------------------*/
#subrtr {height: 184px; text-align: center}
#subrtr img { border: 0px}

#holder {padding-top: 20px;}

/* ----------------------------------INSIDE PAGES LEFTSIDE BLOCKS------------------------------------------*/

#leftside { float:left; width: 306px; padding: 0px; min-height: 400px; height: auto; padding-top: 24px; }

#leftside .one, .two, .three { margin-bottom: 38px; clear: both }
#leftside .one .pic, #leftside .two .pic, #leftside .three .pic { width: 306px; height: 102px; }

#leftside .two .pic {width: 306px}

#leftside .one .pic {background: url(/images/lefttwo_top.png) no-repeat;}
#leftside .two .pic {background: url(/images/leftone_top.png) no-repeat;}
#leftside .three .pic {background: url(/images/leftthree_top.png) no-repeat;}

#leftside .three{
display: none;
}


#leftside .container { 
background: #121211 url(/images/leftboxbg.gif) no-repeat; 
padding: 0px; 
width: 306px;
min-height: 54px;
height: 100%;
height: auto
}

#leftside .container { margin: 0; padding: 0; }

#leftside ul#wine, ul#merch { padding-top: 15px; padding-left: 16px }

#leftside .three h2 {width: 159px; height: 22px; float: left; clear: right; text-indent: -9999em; background: url(/images/leftthree_title.png) no-repeat; margin: 16px}

#leftside .three h3 { 
margin: 14px 0px 0px 218px; 
padding: 0; 
width: 68px; 
height: 30px; 
background: url(/images/leftbox_open.png) no-repeat; 
text-indent: -9999em; position: absolute
}


/* -----------------WINE----------------------- */
ul#wine, ul#merch { list-style:none; height:22px;  }
ul#wine li, ul#merch li {display:inline;}
ul#wine li a, ul#merch li a { height:22px; float:left; text-indent:-9999px;}
/* -----STATIC------ */
ul#wine li#wine-1 a { width:244px; background: url(/images/leftbox_sigwine.png) no-repeat 0 0; /* X and Y position at 0 */}
/* -----HOVER------ */
ul#wine li#wine-1 a:hover { width:244px; background: url(/images/leftbox_sigwine.png) no-repeat 0 -21px; /* X and Y position at 0 */}
/* -----ACTIVE------ */
ul#wine li#wine-1 a.current { width:244px; background: url(/images/leftbox_sigwine.png) no-repeat 0 -21px; /* X and Y position at 0 */}


/* -----------------MERCH----------------------- */
/* -----STATIC------ */
ul#merch li#merch-1 a { width:244px; background: url(/images/leftbox_merch.png) no-repeat 0 0; /* X and Y position at 0 */}
/* -----HOVER------ */
ul#merch li#merch-1 a:hover { width:244px; background: url(/images/leftbox_merch.png) no-repeat 0 -21px; /* X and Y position at 0 */}
/* -----ACTIVE------ */
ul#merch li#merch-1 a.current { width:244px; background: url(/images/leftbox_merch.png) no-repeat 0 -21px; /* X and Y position at 0 */}



#leftside .bottom { width: 306px; height: 6px; background: url(/images/leftbox_bot.gif) no-repeat}


/* ----------------------------------MAIN CONTENT------------------------------------------*/

#main .top, .bot {margin-left: 337px;}
#main .top { background: url(/images/subcontent_top.gif) no-repeat; width: 643px; height: 10px;}
#main .bot { background: url(/images/subcontent_bot.gif) no-repeat; width: 643px; height: 10px; margin-bottom: 60px;}


#main h1 {
font-family:'HelveticaNeue-UltraLight','Helvetica Neue UltraLight','Helvetica Neue',Arial,Helvetica,sans-serif;
font-size:60px;
font-weight:100;
color: white;
padding: 0;
letter-spacing: 1px;
position: relative;
top: 15px;
margin: 0 0 25px 337px;
}


#main .content {
width: 601px;
margin: 0 0 0 31px;
float: left;
padding: 20px;
min-height: 600px; /* Height of Background Img */
background: #101010 url(/images/subcontent_bg.gif) repeat-x;
border-left: 1px solid #414141;
border-right: 1px solid #414141;
font-family: Arial,'Trebuchet MS', Helvetica, sans-serif;
font-size: 13px;
line-height: 1.6em;
color: #cecece;
}

#main .content p, li { 
padding-bottom: 20px
}


#main .content ul { margin: 12px 0px 20px 30px; }
#main .content ul li { padding-bottom: 0px; background: url(/images/arrow.png) no-repeat center left; list-style-type: none; padding-left: 18px; line-height: 1.6em }

#main .content .aboutpic { 
float: right; 
margin: 0px 0px 20px 20px;
box-shadow: 0px 0px 6px #000;
-webkit-box-shadow: 0px 0px 6px #000;
-moz-box-shadow: 0px 0px 6px #000;
border-radius: 1px;
-webkit-border-radius:  1px;
-moz-border-radius:  1px;
padding: 1px;
background-color: #8f8f8f
}


/* --------------TESTIMONIALS------------- */ 
#testimonials { 
height: 100%; 
height: auto; 
min-height: 50px;  
background: url(/images/testimonialsbg.png) no-repeat top left;  
padding: 15px 40px 15px 40px;
text-align: center
}

#testimonials b { font: 22px Georgia, 'Times New Roman', Serif; font-style: italic; color: #cecece; }


#testimonials p.quoted { 
float: right; 
font-family: Georgia, 'Times New Roman', Serif; 
font-style: italic;  
width: 150px; 
margin-bottom: -20px;  
padding: 0; 
margin-top: -10px;
text-align: right
}



#testimonials span { 
float: right; 
background: url(/images/testimonialsquote.png) no-repeat; 
width: 31px; 
height: 21px; 
margin-left: 12px; 
margin-right: -30px;
margin-top: -10px
}



/* --------------ACCORDION------------- */ 

.glossymenu{ 
padding: 0;
width: 641px; /*width of menu*/ 
margin-left: -20px;
position: relative;
}

.glossymenu a.menuitem {
background: #1c1c1c url(/images/menubar_bg.gif) repeat-x;
font-family: Arial,Helvetica,sans-serif;
font-size: 1.4em;
text-transform: lowercase;
color: #fff;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
padding-left: 20px;
letter-spacing: 2px;
text-decoration: none;
height: 29px;
}

.glossymenu .submenu{
margin-bottom: 40px;
}
.menuItem{
margin-bottom: 15px;
}

.glossymenu h2{
margin-top: 20px;
width: 285px;
background: #da1c1c;
padding: 4px;
float: left;
}
.glossymenu h2.wide {
margin: 20px;
width: 590px;
background: #da1c1c;
padding: 4px;
float: none;
}

.glossymenu .submenuheader {padding-top: 10px; clear:both;}

.glossymenu a.menuitem .statusicon{ position: absolute; top: 0px; right: 5px; border: none;}

.glossymenu .menuleft, .glossymenu .menuright { padding: 20px;}
.glossymenu .menuleft { width: 300px; float: left; }
.glossymenu .menuright { width: 255px; margin-left: 330px;  }
.glossymenu .menuleft p, .glossymenu .menuright p { 
padding: 0px !important;
}
.glossymenu #menuSub{
display: block;
font-weight: bold;
color: #da1c1c;
}
.glossymenu strong {letter-spacing: 0px; font-size: 14px; font-weight: bold; color: #fff}

.glossymenu em { font-style: normal; font-family: Arial,'Trebuchet MS', Helvetica, sans-serif;
font-size: 13px;
line-height: 1.6em;
color: #cecece;
margin-left: 5px;
}

/* --------------FOOTER AND SUBFOOTER------------- */
#footer, #subfooter, .push { 
clear: both;
width: 100%;
height: 4em; /* make sure this matches in the body container DIV */
bottom: 0;
left: 0;
margin: 0 auto; 
position: relative;
} 

#footer { padding-top: 30px;}

#inner #subfooter {
background: #000;
height: 330px;
}
#subfooter { padding-top: 58px;   }

#subfooter {border-top: 1px solid #212121; }

#footer .content, #subfooter .content { width: 980px; margin: 0 auto; position: relative;   }

#footer .left, .right, #subfooter .left, .right {margin-top: 10px;}
#footer .left, #subfooter .left { width: 476px; float: left; }
#footer .right, #subfooter .right { width: 434px; float: right; }


/* --------------FOOTER BOTTOM BUTTONS----------------*/

#footer .photogallery, .connection,
#subfooter .photogallery, .connection
{text-indent:-9999em; display:block; margin-bottom: 60px}

#footer .photogallery, #subfooter .photogallery {
background:transparent url(/images/footer_photogallery.png) no-repeat top right;
float:right;
width:476px;
height:156px;
}

#footer .photogallery:hover, #subfooter .photogallery:hover {
background-position: right -152px;
}

#footer .connection, #subfooter .connection {
background:transparent url(/images/footer_connection.png) no-repeat top left;
float:left;
width:433px;
height:160px;
}

#footer .connection:hover, #subfooter .connection:hover {
background-position: 0 -159px;
}

/* --------------FOOTER BOTTOM BUTTONS----------------*/


/* --------------FOOTER LINKS----------------*/

#footer ul, #subfooter ul { margin: 0px; padding: 0px;}
#footer li, #subfooter li {list-style-type: none; display: inline;  }
#footer li a, a.last, #subfooter li a, a.last { font: 14px Arial, Helvetica, Sans-Serif; color: #525551; border-right: 1px solid #525551; padding: 0px 8px; text-decoration: none; }
#footer li a.last, #subfooter li a.last { border: 0}
#footer li a:hover, #subfooter li a:hover { text-decoration: underline}


.csLogo {
background:transparent url(/images/footerlogo.gif) no-repeat top right;
display:block;
float:right;
height:30px;
text-indent:-9999em;
width:125px;
margin-bottom: 52px
}

a.csLogo { text-indent: -9999em}

/* --------------FOOTER LINKS----------------*/


/* --------------WINES----------------*/

#wines{
width: 600px;
height: 650px;
background: url(/images/winesBg.png) no-repeat right bottom;
}
#wines h2 em{
color: red;
}
#wines p{
font-size: 1.2em;
width: 250px;
margin-top: 30px;
line-height: 2;
}

#wines #prices{
display: block;
text-indent: -999em;
}

/* --------------GALLERY----------------*/

.gallery {
margin-left: -10px;
}
.gallery a img{
margin-left: 10px;
margin-bottom: 10px;
background: #000;
padding: 2px;
width: 65px;
height: 40px;
border: 1px solid #444;
-moz-box-shadow: 0px 0px 3px #000;
-webkit-box-shadow: 0px 0px 3px #000;
box-shadow: 0px 0px 3px #000;
}

/* -------------- STORE ----------------*/

#storeContain{
position: relative;
margin-left: -6px;
}

#storeContent{
display: none;
position: absolute;
top: 10px;
left: 10px;
width: 575px;
height: 666px;
padding: 10px;
background: url(/images/opacity.png);
}

#storeContent .product{
position: relative;
clear: both;
height: 102px;
padding-bottom: 19px;
margin-bottom: 19px;
border-bottom: 1px solid #393939;
}

#storeContent .productLast{
border-bottom: 0px;
}

#storeContent .product img{
float: left;
width: 200px;
border: 1px solid #fff;
margin-right: 20px;
}

#storeContent .product h3{
font-size: 1.2em;
color: #f20000;
text-transform: uppercase;
line-height: 1;
}
#storeContent .product h3 em{
color: #fff;
font-style: normal;
font-size: .8em;
}
#storeContent .product p{
line-height: 1;
margin-top: -3px;
padding: 0 0 7px 0 !important;
}
#storeContent select{
display: none;
}
#storeContent .cartButton{
display: block;
width: 122px;
height: 25px;
text-indent: -999em;
position: absolute;
bottom: 19px;
left: 222px;
background: url(/images/cartButton.png) no-repeat;
}
#storeContent .cartButton:hover{
background-position: 0 -25px;
}

/* -------------
 * Selects
 * ------------- */
 
.jqTransformSelectWrapper {
	width: 198px !important;
	position:relative;
	height: 22px;
	background: url(/images/select_left.png) no-repeat top left;
	float:left;
}

.jqTransformSelectWrapper div span {
	
	font-size: 12px;
	float: none;
	position: absolute;
	white-space: nowrap;
	height: 22px;
        width: 191px !important;
	line-height: 10px;
	padding: 8px 0 0 7px;
	overflow: hidden;
	cursor:pointer;
	/*border: 1px solid #CCCCCC;*/
/*	border-right: none;*/
}

.jqTransformSelectWrapper  a.jqTransformSelectOpen {
	display: block;
	position: absolute;
	right: 0px;
	width: 27px;
	height: 22px;
	background: url(/images/select_right.png) no-repeat center center;
}

.jqTransformSelectWrapper ul {
	position: absolute;
	width: 196px !important;
	top:11px;
	left: -30px;
	list-style: none;
	background-color: #222;
	border: solid 1px #777;
	display: none;
	margin: 0px;
	padding: 0px;
	height: 105px;
	overflow: auto;
	overflow-y: auto;;
}

.jqTransformSelectWrapper ul li{
background: none !important;
padding: 0px !important;
}

.jqTransformSelectWrapper ul a {
	display: block;
	padding: 0px 5px;
	text-decoration: none;
	color:#fff;
	background-color: #222;
	font-size: 12px;
}

.jqTransformSelectWrapper ul a.selected {
	background: #f20000;
	color: #fff;
}

.jqTransformSelectWrapper ul a:hover, .jqTransformSelectWrapper ul a.selected:hover {
	background:#444;
	color: #fff;
}