/*
Title:      CSS for SMARTDIRECT.CN
Author:     Clas Wineus, www.claswineus.com
Copyright:  2008, Clas Wineus.
*/

@charset "utf-8";

/*-----------------------------------------------------------------------
		Bugs/Compability/Fixes 
----------------------------------------------------------------------- */

/* Hides FireFox BoundingBox when links are clicked. */
:focus {-moz-outline-style: none;}

/* Tables should show empty. */
table {empty-cells: show;}

/* Default images have no border. */
img {border:0;}

/* Resets all elements to zero and desired default values */
html, body, div, span, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, code,
    del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {      
    margin:0; padding:0; border:0;
    font-weight:inherit;
    font-style:inherit;
    font-size:100%;  /* IE trick to allow proper resizing of text */
    font-family:inherit;
    vertical-align:baseline;
    outline:0;
	}

/*-----------------------------------------------------------------------
		Basic Styles
-----------------------------------------------------------------------*/

html, body {height:100%}

body {
    font-family: Arial,Helvetica,sans-serif;
	font-size:12px;
	line-height:16px;
    color:#333333;
	background-color:#ffffff;
	text-align: center;
}

/*  Headings
---------------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 { font-weight:100; margin:0px; padding:0px;}

h1 { font-size: 18px; line-height:23px;} 
h2 { font-size: 16px; line-height:20px; font-weight:bold;}
h3 { font-size: 14px; font-weight:bold; line-height:18px;}
h4 { font-size: 12px; font-weight:bold; line-height:16px;}
h5 { font-size: 8px; font-weight:bold; line-height:12px;}

/*  Typography
---------------------------------------------------------------------- */

p {margin:0px; padding:0px;}
a, a:focus, a:active {color: #005fad; text-decoration:none;}
a:hover	{color: #004d79; text-decoration:underline;}

/* Color Classes
---------------------------------------------------------------------- */
.red {color:#CC0000;}
.green {color:#117600;}
.yellow {color:#fcae16;}
.white {color:#ffffff;}
.lgrey {color:#777777;}

/* Global tags
---------------------------------------------------------------------- */

.left { float:left; }
.right { float:right; }
.align_left { text-align:left; }
.align_right { text-align:right; }

.lowercase { text-transform:lowercase;}
.uppercase { text-transform:uppercase;}

.clear { clear:both; }

.img_link>.country_flag {
	position:absolute;
	bottom:10px;
	right:10px;
	padding:0;
	border:1px solid #fff;
}

hr {display:none;}

.hr {
	float:left;
	display:block;
	height:0px;
	width:100%;
	border-bottom:1px solid #dbdbdb;
	margin:5px 0 5px 0;
	padding:0;
}

/*-----------------------------------------------------------------------
		Header
-----------------------------------------------------------------------*/

.header_bg {
	width:100%;
	background:#fff url("../images/bg_grey_fade.gif") repeat-x left bottom;
	border-bottom:10px solid #fead13;
}

#header {
	position:relative;
	width:980px;
	height:92px;
	margin:10px auto 0 auto;
	text-align: left;
}

#logo {
	position:absolute;
	left:5px;
	bottom:6px;
}

#topsearch {
	position:absolute;
	left:250px;
	top:0px;
	padding-left:3px;
	background:transparent url("../images/bg_yellow_round_left.gif") no-repeat left top;
}

#topsearch span {
	float:left;
	display:block;
	background:transparent url("../images/bg_yellow_round_right.gif") no-repeat right top;
	height:34px;
}

#topsearch h2 {
	float:left;
	color:#fff;
	font-weight:bold;
	margin:7px 0 0 6px;
}

#topsearch form {
	float:left;
}

#topsearch .searchfield {
	float:left;
	width:300px;
	height:22px;
	border:1px solid #cb8831;
	margin:3px 0 3px 8px;
	padding:4px 0 0 4px;
}

#topsearch .button {
	float:left;
	margin:4px 3px 0 3px;
}

#hotline {
	position:absolute;
	right:0px;
	top:0px;
	font-size:15px;
	font-weight:bold;
	color:#005fad;
}

#submenu {
	position:absolute;
	right:0px;
	bottom:6px;
	font-size:12px;
	color:#666666;
}

#submenu li {
	position:relative;
	float:left;
	display:block;
}

#submenu li a {
	display:block;
	color:#333333;
	line-height:12px;
	border-left:1px solid #999999;
	padding:0 6px 0 6px;
}

#submenu li.first a {
	border-left:0px;
	padding-left:0;
}

#submenu li:first-child a {
	border-left:0px;
	padding-left:0;
}

#submenu li a img {
	margin-right:4px;
}

/*-----------------------------------------------------------------------
		Top Menu
----------------------------------------------------------------------- */

#topmenu {
	position:absolute;
	left:250px;
	bottom:0px;
}

#topmenu ul {
	margin:0;
	padding:0;
	list-style:none;
}

#topmenu li {
	display:inline;
}

#topmenu a {
	float:left;
	margin:0 4px 0 0;
	padding:0 0 0 5px;
	text-decoration:none;
	background:transparent url("../images/tab_grey_left.gif") no-repeat left bottom;
}

#topmenu a span {
	float:left;
	display:block;
	padding:11px 14px 7px 8px;
	color:#fff;
	font-size:14px;
	font-weight:bold;
	background:transparent url("../images/tab_grey_right.gif") no-repeat right bottom;
	cursor:pointer;
}


#topmenu a:hover {
	text-decoration:none;
}


/* Section Color styles \*/
#topmenu .ms a {background:transparent url("../images/tab_ms_green_left.gif") no-repeat left bottom;}
#topmenu .ms a span {color:#555555;	background:transparent url("../images/tab_ms_green_right.gif") no-repeat right bottom;}

#topmenu .coupon a {background:transparent url("../images/tab_red_left.gif") no-repeat left bottom;}
#topmenu .coupon a span {background:transparent url("../images/tab_red_right.gif") no-repeat right bottom;}

#topmenu .current a {background:transparent url("../images/tab_yellow_left.gif") no-repeat left bottom;}
#topmenu .current a span {color:#fff; background:transparent url("../images/tab_yellow_right.gif") no-repeat right bottom;}

#topmenu .market a  {background:transparent url("../images/tab_marin_left.gif") no-repeat left bottom;}
#topmenu .market a span {color:#fff; background:transparent url("../images/tab_marin_right.gif") no-repeat right bottom;}


#topmenu .msoff a:hover {background:transparent url("../images/tab_ms_green_left.gif") no-repeat left bottom;}
#topmenu .msoff a:hover span {color:#555555;	background:transparent url("../images/tab_ms_green_right.gif") no-repeat right bottom;}

#topmenu .couponoff a:hover {background:transparent url("../images/tab_red_left.gif") no-repeat left bottom;}
#topmenu .couponoff a:hover span {background:transparent url("../images/tab_red_right.gif") no-repeat right bottom;}

#topmenu .currentoff a:hover {background:transparent url("../images/tab_yellow_left.gif") no-repeat left bottom;}
#topmenu .currentoff a:hover span {color:#fff; background:transparent url("../images/tab_yellow_right.gif") no-repeat right bottom;}

#topmenu .marketoff a:hover {background:transparent url("../images/tab_marin_left.gif") no-repeat left bottom;}
#topmenu .marketoff a:hover span {color:#fff; background:transparent url("../images/tab_marin_right.gif") no-repeat right bottom;}

/*-----------------------------------------------------------------------
		Page Structure
-----------------------------------------------------------------------*/

#page {
	position:relative;
	width:980px;
	margin:10px auto 0 auto;
	text-align: left;
}

#structure_links {
	margin:-4px 0 10px 0;
}

#structure_links a {
	text-decoration:underline;
}

#left_column {
	float:left;
	width:200px;
}

#main_column {
	float:left;
	width:560px;
	margin:0 10px 0 10px;
	z-index:1;
}

#right_column {
	float:left;
	width:200px;
}

#footer {
	float:left;
	text-align:center;
	width:980px;
	border-top:2px solid #fcae16;
	margin:10px 0 0 0;
	padding:15px 0 40px 0;
}

#footer p {
	padding:5px 0 0 0;
}

/*-----------------------------------------------------------------------
		Category menu (Left Column)
-----------------------------------------------------------------------*/

#category_menu_header {
	display:block;
	color:#fff;
	font-weight:bold;
	font-size: 16px;
	line-height:20px;
	background:transparent url("../images/bg_category_menu_top.gif") no-repeat 0 0;
	padding:8px 0px 8px 10px;
}

#category_menu_header:hover {
	text-decoration:none;
}

#category_menu {
	display:none;
}

#category_menu>ul {
	list-style:none;
	border-bottom:3px solid #fcae16;
	border-left:3px solid #fcae16;
	border-right:3px solid #fcae16;
}

#category_menu>ul>li {
	position:relative;
	z-index:500;
	border-left:1px solid #ffffff;
	border-bottom:1px solid #ffffff;
	border-top:1px solid #fcae16;
}

#category_menu>ul>li>a {
	display:block;
	font-size:15px;
	line-height:1.3em;
	font-weight:bold;
	color:#fcae16;
	padding:4px 10px 2px 10px;
	background:#fff url("../images/arrow.gif") no-repeat 184px 10px;
}

#category_menu>ul>li:hover {
	border-left:1px solid #005fad;
	border-bottom:1px solid #005fad;
	border-top:1px solid #005fad;
}

#category_menu>ul>li:hover>a {
	color:#005fad;
	background-position:184px -20px;
	text-decoration:none;
}

#category_menu>ul>li:hover>.flyout_container {
	display:block;
}

#category_menu>ul>li:hover>.cover {
	position:absolute;
	display:block;
	right:-5px;
	top:0;
	width:5px;
	height:26px;
	background-color:#fff;
	z-index:110;
}

/* Sub Menu */

.flyout_container {
	width:605px;
	padding-top:9px;
	display:none;
	position:absolute;
	left:193px;
	top:-20px;
	z-index:105;
	background:transparent url("../images/bg_submenu_top.gif") no-repeat top left;
}

/* Sub Menu position */
li.cat_1 .flyout_container {top:-30px;}
li.cat_2 .flyout_container {top:-30px;}
li.cat_3 .flyout_container {top:-30px;}
li.cat_4 .flyout_container {top:-30px;}
li.cat_5 .flyout_container {top:-30px;}
li.cat_6 .flyout_container {top:-170px;}
li.cat_7 .flyout_container {top:-140px;}
li.cat_8 .flyout_container {top:-120px;}
li.cat_9 .flyout_container {top:-110px;}

.flyout_menu {
	float:left;
	width:100%;
	background:transparent url("../images/bg_submenu_bottom.png") no-repeat bottom left;
	text-align: left;
	padding:0 10px 20px 0;
	min-height:150px;
}

.flyout_menu>ul {
	float:left;
	display:block;
	list-style:none;
	padding:0 10px 0 10px;
	margin:0 0 0 1px;
}

.flyout_menu>ul>li {
	width:180px;
	overflow: hidden;
	border-bottom:1px dashed #e2e2e2;
}

.flyout_menu>ul>li>a {
	display: block;
	color: #ea8f00;
	text-decoration: none;
	font-size: 13px;
	line-height:16px;
	padding:3px 5px 3px 5px;
	font-weight: bold;
}

.flyout_menu>ul>li>a:hover {
	color:#0060ad;
/*	background-color: #fbaf18;*/
}

.flyout_menu>ul>li>ul {
	float:left;
	list-style:none;
	padding:0 0 3px 0;
	margin:0;
}

.flyout_menu>ul>li>ul>li {
	width:165px;
	display: block;
	overflow: hidden;
	border:0px none;
}

.flyout_menu>ul>li>ul>li>a {
	display: block;
	width:100%;
	color: #555;
	text-decoration: none;
	font-weight:bold;
	font-size: 11px;
	line-height:14px;
	padding:0 5px 0 5px;
}

.flyout_menu>ul>li>ul>li>a:hover {
	color:#0060ad;
/*	background-color: #fbaf18;*/
}

.flyout_menu>ul>li>ul>.all {

}

.flyout_menu>ul>li>ul>.all>a {
	font-weight:normal;
	padding:0 0 2px 10px;
}

#sub_menu {
	margin-top:5px;
}

#sub_menu .frame {
	background-color:#fff9e0;
	border-top-width:1px;
	padding-top:8px;
}

#sub_menu ul>h3 {
	color:#005fad;
	font-weight:bold;
	margin-bottom:5px;
}

#sub_menu ul>li>a {
	color:#333333;
	padding-left:10px;
	background:transparent url("../images/arrow.gif") no-repeat left 3px;
}

#sub_menu ul>li.current>a {
	color:#005fad;
	font-weight:bold;
	padding-left:10px;
	background:transparent url("../images/arrow.gif") no-repeat left -27px;
}

/*-----------------------------------------------------------------------
		Boxes
-----------------------------------------------------------------------*/

.box {
	margin-bottom:10px;
}

.box .header h4 {
	padding:6px 0 4px 7px;
	margin-left:3px;
}

.box span {
	display:block;
}

.box .frame {
	border:1px solid #cfd5d9;
	border-top-width:0px;
	padding:10px 10px 10px 10px;
}

.box ul {
	list-style:none;
}

.box ul li {
	margin-bottom:3px;
}

/* Box Colors */
.box span.yellow .header {background:transparent url("../images/tab_yellow_left.gif") no-repeat left top;}
.box span.yellow .header h4 {color:#ffffff; background:transparent url("../images/tab_yellow_right.gif") no-repeat right top;}
.box span.yellow .frame {border-color:#fcae16;}

.box span.lightblue .header {background:transparent url("../images/tab_lightblue_left.gif") no-repeat left top;}
.box span.lightblue .header h4 {color:#155081; border-bottom:1px solid #b2c8db; background:transparent url("../images/tab_lightblue_right.gif") no-repeat right top;}
.box span.lightblue .frame {border-color:#c5d5ff;}

.box span.red .header {background:transparent url("../images/tab_red_left.gif") no-repeat left top;}
.box span.red .header h4 {color:#ffffff; background:transparent url("../images/tab_red_right.gif") no-repeat right top;}
.box span.red .frame {border-color:#f0310b;}

/*-----------------------------------------------------------------------
		Frontpage Tags Box
-----------------------------------------------------------------------*/

#tags {
	margin-top:10px;
}

#tags a {
	color:#333333;
	font-weight:bold;
	padding:1px;
}

/*-----------------------------------------------------------------------
		Front page objects (Main Column)
-----------------------------------------------------------------------*/

/* Promotion */

#promotion {
	float:left;
	margin-bottom:10px;
}

#promotion #flash {
	float:left;
	width:370px;
	height:265px;
	overflow:hidden;
	margin-right:5px;
}

#promotion a {
	float:left;
	margin-bottom:5px;
	width:185px;
	height:130px;
	overflow:hidden;
}

/* Headers */

.header_line {
	color:#fff;
}

.header_line>span{
	display:block;
	float:left;
	width:100%;
}

.header_line h2 {
	float:left;
	color:#fff;
	font-weight:bold;
	padding:4px 0 4px 10px;
}

.header_line img {
	padding:10px 0 0 10px;
}

.header_line .right {
	margin-top:6px;
	margin-right:5px;
}

.header_line a {
	color:#fff;
	font-size:11px;
	font-weight:bold;
	padding:5px;
}

/*  Colors  */
.header_line .yellow {background-color:#fcae16;}
.header_line .green {background-color:#5fad01;}


/*-----------------------------------------------------------------------
		Frontpage Product Lists
-----------------------------------------------------------------------*/

.frontpage_product_list {
	float:left;
	list-style:none;
	margin:6px 0 10px -10px;
}

.frontpage_product_list li {
	float:left;
	display:block;
	font-size:11px;
	line-height:14px;
	margin:0 0 6px 10px;
}

.frontpage_product_list a.img_link {
	position:relative;
	display:block;
	overflow:hidden;
	margin-bottom:2px;
	text-align:center;
	border:1px solid #d2d8dc;
}

.frontpage_product_list a {
	display:block;
	color:#333333;
	font-weight:bold;
	white-space:nowrap;
	overflow:hidden;
}

.frontpage_product_list img {
	border:0;
	padding:5px;
}

.frontpage_product_list li.large img {
	border:0;
	padding:10px;
}


/*  ---- SIZES -----  */

/*  Whats Hot  */
.frontpage_product_list#whats_hot li {width:144px;}
.frontpage_product_list#whats_hot li.large {width:252px;}
.frontpage_product_list#whats_hot a.img_link {height:90px;}
.frontpage_product_list#whats_hot li.large a.img_link {height:218px;}
.frontpage_product_list#whats_hot img {max-width:132px; max-height:80px;}
.frontpage_product_list#whats_hot li.large img {max-width:230px; max-height:198px;}

/*  Wine  */
.frontpage_product_list#wine_list li {width:132px;}
.frontpage_product_list#wine_list a.img_link {height:210px;}
.frontpage_product_list#wine_list img {max-width:120px; max-height:200px;}

/*  Organic  */
.frontpage_product_list#org_list li {width:132px;}
.frontpage_product_list#org_list a.img_link {height:120px;}
.frontpage_product_list#org_list img {max-width:120px; max-height:110px;}

/*  Categories  */
.frontpage_product_list#cat_list li {width:132px; font-size:12px; margin-bottom:10px;}
.frontpage_product_list#cat_list a.img_link {height:100px;}
.frontpage_product_list#cat_list img {max-width:120px; max-height:90px;}


/*-----------------------------------------------------------------------
		Frontpage Smartdirect News
-----------------------------------------------------------------------*/

#smartdirect_news li {
	border-top:1px dotted #cccccc;
	padding-top:10px;
}

#smartdirect_news li.first {
	border:0px none;
	padding-top:0;
}

#smartdirect_news li:first-child {
	border:0px none;
	padding-top:0;
}

/*-----------------------------------------------------------------------
		Frontpage "First time here?"
-----------------------------------------------------------------------*/

#first_time .frame {
	font-weight:bold;
	color:#155081;
	background:#d8e4ff url("../images/bg_first_time.gif") no-repeat left top;
	padding-top:36px;
	border:1px solid #b2c8db;
}

#first_time a {
	font-weight:bold;
	color:#155081;
}

/*-----------------------------------------------------------------------
		Frontpage Latest Products
-----------------------------------------------------------------------*/

#latest_products table {
	margin-bottom:6px;
}

#latest_products table td {
	border-bottom:1px dotted #cccccc;
	padding:2px 0 6px 0;
	text-align:left;
	vertical-align:bottom;
}

#latest_products table tr .col1 {
	width:62px;
}

#latest_products table .col2 {

}

#latest_products table td a {
	color:#333333;
	font-weight:bold;
	line-height:14px;
}

#latest_products table td img {
	max-width:55px;
	max-height:55px;
}


/*-----------------------------------------------------------------------
		Frontpage Loved Products
-----------------------------------------------------------------------*/

#loved_products_small li {
	display:block;
	margin:5px 0 0 0;
	padding-top:3px;
	background:transparent url("../images/bg_bubble_top_small.gif") no-repeat left top;
}

#loved_products_small li span {
	display:block;
	padding:5px 10px 20px 10px;
	background:transparent url("../images/bg_bubble_bottom_small.gif") no-repeat left bottom;
}


/*-----------------------------------------------------------------------
		New styles addes 090917
*/

/*-----------------------------------------------------------------------
		Latest Products
-----------------------------------------------------------------------*/

.latest_product_list {
	list-style:none;
	margin-bottom:20px;
}

.latest_product_list h2 {
	font-size:16px;
	margin-bottom:3px;
	color:#f9b015;
}

.latest_product_list li {
	margin-bottom:2px;
}

.latest_product_list li a{
	text-decoration:underline;
}

.latest_product_list li b{
	color:#444;
	font-size:11px;
}

/*-----------------------------------------------------------------------
		Checkout Login Options
-----------------------------------------------------------------------*/

.checkout_login_options {
	margin:15px 0 10px 0;
	padding:0;
	border:0;
	width:100%;
}

.checkout_login_options #login {
	width:483px;
	float:left;
	border:1px solid #f9b015;
	height:290px;
}

.checkout_login_options #register {
	margin-left:10px;
	width:483px;
	float:left;
	border:1px solid #0060ad;
	height:290px;
}

.checkout_login_options #without {
	width:978px;
	float:left;
	border:1px solid #c5d5ff;
	margin-top:10px;
	padding-bottom:15px;
	margin-bottom:20px;
}

.checkout_login_options h2 {
	display:block;
	background-color:#f9b015;
	color:#fff;
	font-size:16px;
	font-weight:bold;
	padding:5px 10px 5px 10px;
}


.checkout_login_options .textfield {
	margin-bottom:7px;
	width:200px;
	border:1px solid #CCCCCC;
	height:20px;
	padding:2px 0 0 2px;
}

.checkout_login_options table .checkbox_cell {
	text-align:right;
	border:0px none;
	padding-right:10px;
}



.checkout_login_options label {
	display:block;
	width:150px;
	font-weight:bold;
	font-size:14px;
	color:#444;
	text-align:right;
	margin-right:15px;
}


.checkout_login_options #register h2 {
	background-color:#0060ad;
	color:#fff;
}


.checkout_login_options #without h2 {
	background-color:#c5d5ff;
	color:#2a5272;
}

.checkout_login_options table {
	margin:15px 0 20px 0;
}

.checkout_login_options .col1 {
	text-align:right;
	width:150px;
}

.checkout_login_options .button {
	margin-top:10px;
	float:right;
}

.checkout_login_options #login .button {
	margin-right:113px;
}

.checkout_login_options #register .button {
	margin-right:107px;
}

.checkout_login_options #without .button {
	margin-right:115px;
}
.greenColumn{
	padding:5px;
	background-color:#A7C71E;
	font-size:14px;
	font-family: Arial, Helvetica, sans-serif !important;
	color:#FFF;
	min-height:1100px;
}
.greenColumn p{
	margin-bottom:10px;
}
.greenColumn h2{
	font-size:24px;
	margin-bottom:10px;
}

h2.greenTitle{
	font-size:24px;
	margin:20px 30px;
	color:#A7C71E;
	font-family: Arial, Helvetica, sans-serif !important;
}
.greenTable{
	font-family: Arial, Helvetica, sans-serif !important;
	font-size:14px;
	margin:0px 20px;
}

.greenTable td{
	text-align:center;
}
	

.greenTable td img{
	border:1px solid #CCC;
}