/*
* @name: 	main.css
* @desc:	Global Stylesheet
* @author: 	Matt Kircher
* @modified: 	7.27.10
*/

/* Imported Styles
--------------------------------------------------------*/
@import url("reset.css");
@import url("clearing.css");


/* General
--------------------------------------------------------*/
body{
	font-family:Arial, Helvetica, sans-serif;
	font-size:1em;
	text-align:center;
	color:#757879;
	background-color:#fff;
}

a{ color:#757879; font-weight:bold; text-decoration:none; }
a:hover{ color:#333; }

h1, h2, h3, h4, h5, h6{ font-size:1em; }

hr{ color:#757879; background-color:#EDEDED; border:none; height:1px; width:100%; margin:30px 0px; }

/* Classes
--------------------------------------------------------*/	
	
	/*misc*/
	.subhead{ font-size:0.875em; color:#999 !important; }
	
	img[align="left"]{ margin:0px 10px 10px 0px; }
	img[align="right"]{ margin:0px 0px 10px 10px; }

/* Wrap
--------------------------------------------------------*/
#wrap-area1, #wrap-area2{ 
	text-align:left;
	margin:auto;
	width:900px; 
	padding:0px;
	position:relative;
}

/* Header
--------------------------------------------------------*/
#header{ position:relative; height:47px; padding-top:80px; margin-top:40px; background:url(../images/horizontal_border.png) 2px 0px repeat-x;  }

.r2l #header { position:relative; height:110px; padding-top:70px; margin-top:40px; background:url(../images/horizontal_border.png) 2px 0px repeat-x;  }

	/* Logo */
	#logo{ position:relative; float:left; left:50%; margin-right:-50%; margin-left:3px; }
	#logo a{ display:block; position:relative; float:left; left:-50%; top:-35px; width:391px; height:47px; overflow:hidden; text-indent:-10000000px; background:url(../images/content/logo.jpg) top left no-repeat #FFF; }
	
	.r2l #logo{ position:relative; float:left; left:50%; margin-right:-50%; margin-left:0px; }
	.r2l #logo a{ display:block; position:relative; float:left; left:-50%; top:-35px; width:122px; height:116px; overflow:hidden; text-indent:-10000000px; background:url(../images/content/r2l-logo.jpg) top left no-repeat #FFF; }
	
	/* main-nav */
	#navigation{ text-align:center; padding:30px 0px 85px; overflow:hidden; float:left; width:100%; }
		.iproduct #navigation{ min-width:900px; }
		.subpage #navigation{ padding-top:1px; }
	
	#main-nav{
		position:relative; 
		clear:left;
		float:left;
		left:50%;
		z-index:200;
	}
	#main-nav > ul{ position:relative; float:left; right:50%; text-align:left; }
	#main-nav ul.top_menu{ position:relative; float:left; right:50%; text-align:left; }
		
		/* custom superfish skin */
		
			/*override general menu elements */
			.sf-menu li:hover ul,
			.sf-menu li.sfHover ul{ top:1.6em; }
		
			.sf-menu{ float: left; margin-bottom:1em; }
			.sf-menu a{ border-left:none; border-top:none; padding:4px 3px 4px 16px; text-decoration:none; font-size:0.75em; }
			.sf-menu a, .sf-menu a:visited{ color:#757879; }
			
			/*override subsequent list items */
			.sf-menu li li{ background-color:#FFF; padding-left:0px; }
			.sf-menu li li a{ padding:1px 3px 1px 24px; }
			
			/*override hover state */
			.sf-menu li.selected > a,
			.sf-menu li.sf-breadcrumb > a,
			.sf-menu li:hover, .sf-menu li.sfHover,
			.sf-menu a:focus, .sf-menu a:hover, 
			.sf-menu a:active{ background-color:#FFF; color:#D58A21; outline:0; }
			
			/* r2l override hover state */
			.r2l .sf-menu li.selected > a,
			.r2l .sf-menu li.sf-breadcrumb > a,
			.r2l .sf-menu li:hover, .r2l .sf-menu li.sfHover,
			.r2l .sf-menu a:focus, .r2l .sf-menu a:hover,
			.r2l .sf-menu a:active{ background-color:#FFF; color:#8d0029; outline:0; }
			
			/*override arrow positions based on em height */
			a > .sf-sub-indicator{ top:2px; }
			
			/* custom superfish top menu skin overrides */			
			#main-nav > .sf-menu{ margin-bottom:0px !important; }
			#main-nav > .sf-menu > li > a{ text-transform:uppercase; font-size:0.875em; }
			#main-nav > .sf-menu > li.selected a{ color:#7A4B1C; background-color:#FFF; }
			.r2l #main-nav > .sf-menu > li.selected a{ color:#8d0029; background-color:#FFF; }
			
			#main-nav > .sf-menu > li.selected > a,
			#main-nav > .sf-menu > li.sf-breadcrumb > a{ color:#7A4B1C; }
			.r2l #main-nav > .sf-menu > li.sf-breadcrumb > a{ color:#8d0029; }
			
			#main-nav > .sf-menu > li > a:hover,
			#main-nav > .sf-menu > li.sfHover > a:hover{ color:#D58A21; background-color:#FFF; }
			
			.r2l #main-nav > .sf-menu > li > a:hover,
			.r2l #main-nav > .sf-menu > li.sfHover > a:hover{ color:#8d0029; background-color:#FFF; }
			
			#main-nav > .sf-menu > li > a, 
			#main-nav > .sf-menu > li > a:hover,
			#main-nav > .sf-menu > li.sfHover > a:hover{ background:url(../images/nav_separator.png) left no-repeat #FFF !important; margin-left:7px; }
			
			#main-nav > .sf-menu > li:first-child > a{ padding-left:0px; }
			#main-nav > .sf-menu > li:first-child > ul li a{ padding-left:7px; }
			
			#main-nav > .sf-menu > li:first-child > a, 
			#main-nav > .sf-menu > li.first_child > a, 
			#main-nav > .sf-menu > li:first-child > a:hover,
			#main-nav > .sf-menu > li.first_child > a:hover,
			#main-nav > .sf-menu > li.sfHover:first-child > a:hover,
			#main-nav > .sf-menu > li.sfHover.first_child > a:hover{ background:none !important; }
			
			#main-nav{ visibility:hidden; }
			
			/*IE 6,7*/
			* html #main-nav .first_menu{ margin-bottom:0px !important; }
			* html #main-nav .first_menu a{ text-transform:uppercase; font-size:0.875em; }
			* html #main-nav .first_menu li ul li a{ text-transform:none; font-size:0.75em; }
			
			* html .sf-sub-indicator{ top:2px; }
			* + html .sf-sub-indicator{ top:2px; }
			
			/*menu colors*/
			* html #main-nav .selected a, * html #main-nav .sf-breadcrumb a{ color:#7A4B1C; background-color:#FFF; }
			* html #main-nav .selected ul li a, * html #main-nav .sf-breadcrumb ul li a{ color:#757879 !important; }
			* html #main-nav .selected ul .selected a, * html #main-nav .sf-breadcrumb ul .selected a,
			* html #main-nav .selected ul .sf-breadcrumb a, * html #main-nav .sf-breadcrumb ul .sf-breadcrumb a{ color:#D58A21 !important; }
			* html .r2l #main-nav .selected ul .sf-breadcrumb a, * html #main-nav .sf-breadcrumb ul .sf-breadcrumb a{ color:#8d0029 !important; }
			
			* html #main-nav li ul li a{ padding-left:16px !important; }
			
			* html #main-nav .first_menu li a, 
			* html #main-nav .first_menu li a:hover{ background:url(../images/nav_separator.png) left no-repeat #FFF; margin-left:7px; }
			* html #main-nav .first_menu li ul li a, 
			* html #main-nav .first_menu li ul li a:hover{ background:none !important; }
			
			* html #main-nav .first_menu .first_menu_item a{ background:none !important; }

/* Masthead
--------------------------------------------------------*/
#masthead{ position:relative; height:340px; width:720px; padding:0px 90px 0px 90px; }
.nomasthead #masthead{ display:none; }

	/* best of philly sticker*/
	#best_of_philly{ display:inline; }
	#best_of_philly a{ width:74px; height:74px; background:url(../images/content/best_of_philly_2010_sticker.jpg) top right no-repeat #FFF; text-indent:-100000px; overflow:hidden; position:absolute; right:0px; top:0px; margin-bottom:-74px; margin-left:-74px; }
	
	/* food and wine sticker*/
	#food_wine { display:inline; }
	#food_wine a, #food_wine em{ width:74px; height:10px; background:url(../images/content/foodandwine.png) top right no-repeat #FFF; text-indent:-100000px; overflow:hidden; position:absolute; right:0px; top:15px; margin-bottom:-74px; margin-left:-74px; }
	
	/* wine spectator sticker*/
	#wine_spectator { display:inline; } 
	#wine_spectator a, #wine_spectator em { width:76px; height:21px; background:url(../images/content/winespectator.png) top right no-repeat #FFF; text-indent:-100000px; overflow:hidden; position:absolute; right:0px; top:35px; margin-bottom:-74px; margin-left:-74px; }
	
	/* esquire sticker */
	#esquire { display:inline; }
	#esquire a, #esquire em{ width:75px; height:19px; background:url(../images/content/esquire.png) top right no-repeat #FFF; text-indent:-100000px; overflow:hidden; position:absolute; right:0px; top:61px; margin-bottom:-74px; margin-left:-74px; }

	/* callouts */
	#callout{ position:absolute; bottom:0; left:-19px; width:80px; padding:20px 0px 0px 19px; }
	#callout h2{ width:38px; height:38px; float:left; margin-bottom:-19px; background:url(../images/orange_burst.png) top left no-repeat transparent; overflow:hidden; text-indent:-100000px; position:relative; top:-19px; left:-19px; }
	#callout p{ font-size:0.689em; color:#824C1F; background-color:#F5F5EE; text-transform:uppercase; text-align:right; line-height:1.7em; padding:10px 10px 20px 5px; }
	#callout p a{ color:#824C1F; }
	
	* html #callout{ height:1%; }
	* html #callout h2{ background-image:url(../images/orange_burst.gif); }
	
	/* callouts on r2l */
	/* left side */
	.r2l #callout{ position:absolute; bottom:135px; left:-19px; width:80px; padding:20px 0px 0px 19px; }
	.r2l #callout h2{ width:38px; height:17px; float:left; background:url(../images/red-burst.png) top right no-repeat transparent; overflow:hidden; text-indent:-100000px; position:relative; top:-10px; left:33px; }
	.r2l #callout p{ font-size:0.689em; color:#3a3637; background-color:#fff; text-transform:uppercase; text-align:right; line-height:1.7em; padding:10px 10px 20px 5px; }
	.r2l #callout p a{ color:#3a3637; display: block; }
	
	* html .r2l #callout{ height:1%; }
	* html .r2l #callout h2{ background-image:url(../images/red-burst.gif); }
	
	/* right side */
	.r2l #callout2 { /* position:absolute; bottom:100px; left:800px; width:80px; padding:20px 0px 0px 19px; */ display:none; }
	.r2l #callout2 h2{ width:38px; height:17px; float:left; background:url(../images/red-burst.png) top left no-repeat transparent; overflow:hidden; text-indent:-100000px; position:relative; top:-10px; left:0px; }
	.r2l #callout2 p{ font-size:0.689em; color:#3a3637; background-color:#fff; text-transform:uppercase; text-align:left; line-height:1.7em; padding:10px 10px 20px 5px; }
	.r2l #callout2 p a{ color:#3a3637; font-weight: normal;}
	.r2l #callout2 p em {text-transform: lowercase; font-style: normal;}
	
	* html .r2l #callout2 { height:1%; }
	* html .r2l #callout2 h2{ background-image:url(../images/red-burst.gif); }

	#masthead-gallery ul{ width:230px; height:340px; overflow:hidden; margin:0px 0px 0px 15px; padding:0px; float:left; }
	#masthead-gallery ul:first-child,
	#masthead-gallery ul.first_child{ margin:0px; }
	
	#masthead-gallery li img{ opacity: 0; -ms-filter: "alpha(opacity=0)"; filter: alpha(opacity=0); }
	
/* Content
--------------------------------------------------------*/
#content{ clear:both; padding:30px 0px; background:url(../images/horizontal_border.png) 2px 0px repeat-x; }
#content p, #content li{ line-height:2em; font-size:0.73125em; }
#content h1, #content h2, #content h3, #content h4, #content h5, #content h6,
#content p, #content ul, #content ol{ margin-bottom:12px; color:#515354; }

#content form{ color:#515354; }

#content h1, #content h2, #content h3, #content h4, #content h5, #content h6{ text-transform:uppercase; }
#content ul{ padding-left:24px; }
#content ul li{ list-style:disc; }

	* + html #content{ clear:both; }

	.home #content{ display:none; } /* remove if you want to display content on the homepage */

	/* forms */
	form{ padding:20px 50px; border:1px solid #EDEDED; }
		form fieldset{ margin:10px 0px; }
		form input, form textarea{ border:1px solid #757879; padding:5px 7px; }
		form input[type="radio"], form input[type="checkbox"]{ border:none; }
		form input, form select, form textarea{ font:12px Arial, Helvetica, sans-serif; }
		form select optgroup{ font-style:normal; }
		form label{ cursor:pointer; }
		form dl{ font-size:0.689em; }
			form dt{ margin-bottom:6px; }
			form dd{ margin-bottom:15px; }
			form dt label{ font-weight:bold; color:#7A4B1C; text-transform:uppercase; }
			form .required{ font-weight:bold; color:#D58A21; }
			form#gcards .required{ font-weight:normal; color:#515354; }
			form .required:before{ content:"* "; }
			form#gcards .required:before { content:none; } /* overrides default above for gift card form */
		
		form button[type="reset"], form button[type="submit"]{ cursor:pointer; padding:4px 7px; font-weight:bold; font-size:0.689em; }
		form button[type="reset"]{ border:none; background-color:#FFF; color:#999; }
		form button[type="submit"]{ border:1px solid #757879; background-color:#EDEDED; color:#757879; }

	/* gallery */
	#gallery{ opacity: 0.0; -ms-filter: "alpha(opacity=0)"; filter: alpha(opacity=0); margin:20px 0px; }
	#gallery .thumbnails{ padding:0px 0px 0px 49px; }
	* + html #gallery .thumbnails{ padding-left:25px !important; }
	#gallery .thumbnails li{ float:left; margin:0px 0px 10px 5px; list-style:none; position:relative; }
	#gallery .thumbnails li .dropshadow{ float:left; position:absolute; left:-4px; top:6px; z-index:1; }
	#gallery .thumbnails a{ display:block; float:left; position:relative; z-index:2; border:2px solid #FFF; width:85px; height:65px; overflow:hidden; margin:0px 4px 4px 0px; }
	#gallery .thumbnails a img{ width:120px; }
	
	#gallery-image{ text-align:center; position:relative; z-index:1; margin:20px 0px; height:400px; width:900px; overflow:hidden; }
	#gallery-image img{ position:relative; z-index:1; max-width:100%; max-height:100%; }
	
		/* Future usage for titles in gallery */
		#gallery-image .title{ position:relative; z-index:2; font-size:0.689em; font-weight:bold; padding:15px 0px 10px; height:13px; opacity: 0; -ms-filter: "alpha(opacity=0)"; filter: alpha(opacity=0); margin-bottom:-39px; background-color:#FFF; color:#000; }
	
	#gallery-controls{ height:22px; padding:10px 0px; position:relative; margin-bottom:20px; }
	#gallery-controls a{ display:block; overflow:hidden; text-indent:-10000px; position:absolute; width:11px; height:22px; }
	#gallery-controls a.previous{ left:48%; background:url(../images/gallery_controls_previous.png) left no-repeat; }
	#gallery-controls a.next{ left:52%; background:url(../images/gallery_controls_next.png) right no-repeat; }
		
/* Footer
--------------------------------------------------------*/
#footer{ width:100%; overflow:hidden; clear:both; text-align:center; padding:15px 0px 30px; background:url(../images/horizontal_border.png) 2px 0px repeat-x; }
	
	/* footer navigation */
	#footer-nav{ position:relative; float:left; left:50%; margin-bottom:10px; }
	* html #footer-nav{ margin-bottom:0px; }
	* + html #footer-nav{ margin-bottom:0px; }
	
		#footer-nav ul{ display:block; position:relative; float:left; right:50%; }
		#footer-nav li{ float:left; }
		
		#footer-nav li a{ display:block; text-transform:uppercase; float:left; margin-left:10px; margin-bottom:0px; padding:35px 0px 36px 14px; background:url(../images/nav_separator.png) 0px 36px no-repeat; font-size:0.75em; }
		#footer-nav li:first-child a,
		#footer-nav li.first_child a{ background:none; padding-left:0px; margin-left:0px; }
		
		#footer-nav li.accented a{ font-size:1.375em; color:#D58A21; position:relative; top:-7px; margin-bottom:-10px; text-transform:lowercase; }
		#footer-nav li.accented a:hover{ font-size:1.375em; color:#7A4B1C; }
		
		#footer-nav li.bordered{ padding-left:0px; margin-left:30px; background:url(../images/vertical_border.png) top left repeat-y; height: 93px; }
		#footer-nav li.bordered a{ margin-right:0px; padding-right:0px; padding-left:20px; background:none; }
	
	/* gutter */
	#gutter{ clear:both; padding:20px 0px 30px 0px; background:url(../images/horizontal_border.png) 2px 0px repeat-x; }
	#gutter p{ margin-bottom:20px; }
	
		/* contact info / links */
		#contact-info{ font-size:0.75em; }
			#contact-info{ height:28px; }
			#contact-info .facebook, #contact-info .twitter{ display:inline-block; position:relative; top:8px; }
			#contact-info .facebook a, #contact-info .twitter a{ display:block; width:28px; height:28px; text-indent:-1000000px; overflow:hidden; background-image:url(../images/social_icons.png); background-repeat:no-repeat; }
			#contact-info .facebook a{ background-position:0px 0px; }
			#contact-info .twitter a{ background-position:-28px 0px; }
			
		/* press quotes */
		#press-quotes{ padding:0px 20px; }
		#press-quotes p{ color:#515354; font-size:0.75em; line-height:1.4em; text-align:center; }
		
		/* corporate links */
		#corporate-links{ clear:both; font-size:0.625em; position:relative; float:left; width:100%; overflow:hidden; }
		#corporate-links ul{ position:relative; clear:left; float:left; left:50%; }
		#corporate-links li{ position:relative; float:left; right:50%; margin-left:5px; padding-left:10px; background:url(../images/nav_separator.png) left no-repeat; }
		#corporate-links li:first-child,
		#corporate-links li.first_child{padding-left:0px; margin-left:0px; background:none; }
		#corporate-links a{ text-transform:uppercase; }
			

	/* copyright */
	#copyright{ display:none; }
	

/*
	formtable styles - for gift card order form
*/

table #formtable {
	width: 100%;
	}
	

#formtable tr.cards td {
	padding-bottom: 25px;
}

#formtable tr.cards2 td {
	padding-bottom: 0px;
}

#formtable tr.cards td ul {
	padding-top: 15px;
	margin-left: 0;
	padding-left: 0;
}

#formtable tr.cards td ul li {
	list-style: none;
}
	
#formtable td {
	padding-bottom: 5px;
	text-align: left;
}

.formtable td.label {
    vertical-align:middle;
    }
 
#formtable ul, #formtable li {
	margin-left: 0;
}

#formtable li input {
	padding: 0;
	margin: 0;
}


#formtable th {
	text-align: left;
	font-weight: normal;
}

#formtable th.section {
	padding: 30px 0 20px 0;
	font-weight: bold;
}

#formtable td.single {
	padding-bottom: 10px;
}

#formtable td.order {
	padding-top: 10px;
}

#formtable td.label {
	text-align: right;
	padding-right: 0.5em;
	}
#formtable .input {
	vertical-align: middle;
	}

#formtable label.error {
	display: block;
	float: left;
}

/* these 2 declarations ensure that the error message gets contained and doesn't break layout */
#formtable .cards ul {
	float: left;
	width: 100%;
}

#formtable .cards ul, #formtable .cards ul li {
	float: left;
}

 
.helpbox { display: inline; }

#security-help { /* ensures that ccv error message falls below */
	/* padding-right: 150px; */
}

.helpbox .info, .helpbox .infos {
	display: none;
	font-size: x-small;
	color: #696;
}

.helpbox a.more span, .helpbox a.mores span {
	display: none;
}

.helpbox a.more:link,
.helpbox a.more:visited,
.helpbox a.more:hover,
.helpbox a.more:active,
.helpbox a.mores:link,
.helpbox a.mores:visited,
.helpbox a.mores:hover,
.helpbox a.mores:active {
	display: -moz-inline-box;
	padding: 2px;
	display: inline-block;
	vertical-align: bottom;
	background-image: url(/gsuniverse/sitetemplates/dsr/images/question_icon.png);
	background-repeat: no-repeat;
	width: 14px;
	height: 14px;
	text-decoration: none;
}

/* Open Table edits
------------------------------------------------------------- */

#content #OT_logoLink {
    top:150px;
}
#content #OT_logo{
    top:170px;
}


#content #OT_searchWrapper dl {
    left:50px;
    top:8px;
    padding:10px 0 20px 0;
}


/*--------- sunset time widget ----------*/	
.r2l #sunsettime {
	bottom: 100px;
	right: -19px;
	padding: 20px 19px 0px 0px;
	position: absolute;
	text-transform: uppercase;
	width: 75px;
	font-size: 0.689em;
	line-height: 1.7em;
	color: #3A3637;
}