/* Main CSS Styles Document 
Author: 	Steven Gleave
Last Modified: 	01/12/2008
*/

/* Import Master Reset */
@import url(reset.css);

body { margin: 0; padding: 0; background:#000; font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif; }

#wrapper { width:980px; height:660px; margin:0 auto; margin-top:10px; }

#header { float:left; width:980px; height:100px; margin-bottom:10px; }
#logo { float:left; width:100px; height:100px; }
#header_image { float:left; width:860px; height:75px; margin-left:20px; background:#FFF; }
#nav { float:left; width:860px; height:25px; margin-left:20px; background:#EF230F; }

#nav ul { position:relative; margin-left:80px; list-style-type:none; padding:0; }
#nav ul li.top { display:inline; width:128px; position:relative; float:left; }
#nav table { border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0; }
#nav a:hover { visibility:visible; position:relative; z-index:200; }
#nav li:hover { position:relative; z-index:200; }


#nav :hover ul ul, 
#nav :hover ul :hover ul ul,
#nav :hover ul :hover ul :hover ul ul,
#nav :hover ul :hover ul :hover ul :hover ul ul { position:absolute; left:-9999px; top:-9999px; height:0; margin:0; padding:0; list-style:none; }
#nav :hover ul.sub { left:20px; top:25px; white-space:nowrap; width:120px; height:auto; z-index:300; padding-top:5px; background:url(../images/menu/trans.gif); }
#nav :hover ul.sub li { display:block; float:left; width:100%; height:25px; }
#nav :hover ul.sub li span { display:block; height:25px; float:left; width:90px; font-weight:normal; }
#nav :hover ul.sub li b { display:block; height:25px; float:left; width:30px; font-weight:normal; }
#nav :hover ul.sub li a { display:block; position:relative; font-size:11px; height:25px; width:120px; margin-right:-30px; line-height:25px; text-indent:10px; color:#FFF; text-decoration:none; background:url(../images/menu/trans.gif); }
#nav :hover ul.sub li span a:hover { color:#f97; }
#nav :hover ul.sub li:hover > span a { color:#f97; }
#nav :hover ul :hover ul,
#nav :hover ul :hover ul :hover ul,
#nav :hover ul :hover ul :hover ul :hover ul,
#nav :hover ul :hover ul :hover ul :hover ul :hover ul
{ left:120px; top:0; white-space:nowrap; width:120px; z-index:400; height:auto; }
#nav :hover ul.wide { width:150px; }
#nav :hover ul.wide li span { width:120px; }
#nav :hover ul.wide li a { width:150px; }
#nav :hover ul.narrow { width:90px; }
#nav :hover ul.narrow li span { width:60px; }
#nav :hover ul.narrow li a { width:90px; }

#nav :hover ul.narrow :hover ul,
#nav :hover ul :hover ul.narrow :hover ul,
#nav :hover ul :hover ul :hover ul.narrow :hover ul,
#nav :hover ul :hover ul :hover ul :hover ul.narrow :hover ul
{ left:90px; }

#nav li > span { background: url(../images/menu/tab-midleft.png); }
#nav li > b { background: url(../images/menu/tab-midright.png); }
#nav li.fly > b { background: url(../images/menu/tab-midright-sub.png); }

#nav li.subtop > span,
#nav li.flytop > span { background:url(../images/menu/tab-topleft.png); }
#nav li.subtop > b { background:url(../images/menu/tab-topright.png); }

#nav li.flytop > b { background:url(../images/menu/tab-topright-sub.png); }

#nav li.subbot > span,
#nav li.flybot > span { height:35px !important; background:url(../images/menu/tab-botleft.png); }

#nav li.subbot > b { height:35px !important; background:url(../images/menu/tab-botright.png); }
#nav li.flybot > b { height:35px !important; background:url(../images/menu/tab-botright-sub.png); }


#nav ul li a { width:128px; height:25px; float:left; display:block; }
#nav ul li a.home { background:url(../images/menu/home.png); }
#nav ul li a.home:hover { background:url(../images/menu/home.png) 0px 25px; }
#nav ul li a.wine { background:url(../images/menu/wine_gallery.png); }
#nav ul li a.wine:hover { background:url(../images/menu/wine_gallery.png) 0px 25px; }
#nav ul li a.pairings { background:url(../images/menu/pairings.png); }
#nav ul li a.pairings:hover { background:url(../images/menu/pairings.png) 0px 25px; }
#nav ul li a.campaign { background:url(../images/menu/campaign.png); }
#nav ul li a.campaign:hover { background:url(../images/menu/campaign.png) 0px 25px; }
#nav ul li a.contacts { background:url(../images/menu/contacts.png); }
#nav ul li a.contacts:hover { background:url(../images/menu/contacts.png) 0px 25px; }
#nav ul li ul { position:absolute; top:25px; width:115px; margin:0; display:none; padding:8px 0;z-index:500; }
#nav ul li:hover ul { display:block; left:-1px; float:none; }
#nav ul li li { display:block; float:none; }
#nav ul li li a { float:none; display:block; background:#CCCCCC; }
#nav ul li li a:hover { float:none; display:block; background:#FFF; }
 
#content { float:left; width:730px; height:440px; margin-bottom:10px; background:#000; }
#content a:link { text-decoration: underline; }

#content_right { float:left; width:240px; height:440px; margin:0 0 10px 10px; background:#000; }
#content_right a:link { text-decoration: underline; }
#content_wine_gallery { width:980px; height:440px; margin-bottom:10px; background:#000; }

#content_pairings { float:left; width:730px; height:410px; margin-bottom:10px; padding:15px 0 0 0; }
#content_pairings .category { width:220px; float:left; margin-right:35px; }
#content_pairings .category2 { width:300px; float:left; margin-right:35px; display:none; }

#content_pairings h1 { font-size:20px; font-weight:bold; color:#FFF; }
#content_pairings h1.red { font-size:20px; font-weight:bold; color:#FF0000; }
#content_pairings ul { width:250px; margin-bottom:20px; list-style-type:none; padding-bottom:5px; border-bottom:5px solid #FF0099;}
#content_pairings ul li { padding-right:1em; display:inline; }
#content_pairings ul li.last { padding-right:0; }
#content_pairings ul li a { color:#FFF; text-decoration:none; font-size:14px; }
#content_pairings ul li a:hover { color:#FF0099; }
#content_pairings ul li.active a { color:#FF0099; }

#content_right_pairings { float:left; width:180px; height:380px; margin:0 0 10px 10px; padding:30px 30px; }

#content_right_pairings ul { margin: 0; list-style-type: none; padding: 0; }
#content_right_pairings ul li { padding-bottom: 1.5em; font-size:16px; font-weight:bold; }

#content_right_pairings ul li a { text-decoration:none; }
#content_right_pairings ul li a.green { color:#339933; }
#content_right_pairings ul li a.magenta { color:#FF0099; }
#content_right_pairings ul li a.yellow { color:#FFFF00; }
#content_right_pairings ul li a.cyan { color:#0099CC; }
#content_right_pairings ul li a.orange { color:#FF7F00; }
#content_right_pairings ul li a.lavender { color:#CC99CC; }
#content_right_pairings ul li a.red { color:#FF0000; }
#content_right_pairings ul li a.lightpurple { color:#FF0080; }


#content_right_pairings ul li a:hover { text-decoration:underline; }
#content_right_pairings ul li.active a { border-bottom: 2px solid; }

#content_campaign { float:left; width:730px; height:410px; margin-bottom:10px; padding:5px 0 0 0; }

#content_campaign h1 { font-size:20px; font-weight:bold; color:#FFF; }
#content_campaign h1.red { font-size:20px; font-weight:bold; color:#FFF; }
#content_campaign ul { width:500px; margin-bottom:20px; list-style-type:none; padding-bottom:5px; border-bottom:5px solid #FF0099;}
#content_campaign ul li { padding-right:1em; display:inline; }
#content_campaign ul li.last { padding-right:0; }
#content_campaign ul li a { color:#FFF; text-decoration:none; font-size:14px; }
#content_campaign ul li a:hover { color:#FF0099; }
#content_campaign ul li.active a { color:#FF0099; }


#content_technotes { float:left; width:730px; height:410px; margin-bottom:10px; padding:15px 0 0 0; }
#content_technotes .category2 { width:580px; float:left; margin-right:35px; display:none; }
#content_technotes .category2 p { text-align:justify; }
#content_technotes h1 { font-size:20px; font-weight:bold; color:#FFF; }

#bottom_content { width:980px; height:100px; }
#music_player { float:left; width:730px; height:100px; background:#000; }
#bottom_links { float:left; width:240px; height:100px; margin-left:10px; background:#000; text-align:right; }
#bottom_links a { font-size: 10px; ; color:#FFF; }
#bottom_links a:hover { text-decoration: underline; }

#footer { width:980px; height:10px; padding:15px 0; text-align:center; }

/*--- Typeography ---------------*/
p { font-size:13px; color:#FFF; font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif; line-height:1.5em; margin-bottom:1em; }

h1.home { font-size:16px; font-weight:bold; line-height: 1.5; margin:1.6em 0 1.2em 0; color:#FFF; text-align:center; }
h1 { line-height: 1; margin:0 0 15px 0; color:#FFF;}
h2 { font-size: 1.5em; margin-bottom: 0.75em; color:#FFF;}
h3 { font-size: 1em; line-height: 1; margin-bottom: 1em; }
h4 { font-size: 0.7em; line-height: 1.25; margin-bottom: 1.25em; color:#FFF;}
h5 { font-size: 0.8em; font-weight: bold; margin-bottom: 1.5em; color:#FFF;}
h6 { font-size: 0.6em; font-weight: bold; margin-bottom: 1.5em; color:#FFF;}

strong { font-weight: bold; }

a:link { text-decoration:underline; color: #FFF; }
a:visited { text-decoration:underline; color:#FFF; }
a:hover { text-decoration:underline; color:#FF0099; }
a:active { text-decoration:underline; color:#FFF; }

.clear { clear:both; }