/*
Europa Sports Products styles for print media
webmaster@europasports.com
Updated: Oct 3 2003
*/


/* CSS Layout */

/* ---( GENERAL )---------------------------------- */

html, body {  } /* To get the absolute height set correctly */
body {
	font: verdana, arial, helvetica, sans-serif;
	line-height: 1.5em;
	margin: 0px;
	padding: 0px;
	background: url(images/headers/hdr_bg.jpg) repeat-x left top; /* Repeating background for the Header */
	font-size: xx-small;
	voice-family: "\"}\""; voice-family:inherit;
	font-size: x-small;
}
  html>body {font-size:x-small;}
  
div, td, li, dd, dl, dt {/* redundant selectors to help NS4 not forget */
    font-family: verdana, arial, helvetica, sans-serif;
	font-size: xx-small;
	voice-family: "\"}\""; voice-family:inherit;
	font-size: x-small;	
}

th {
	font-family: verdana, arial, helvetica, sans-serif;
	font-weight: bold;
}

p	{
	margin: .9em;
	}

h1 {
	color: #333;
	font-size: 130%;
	padding-bottom: 4px;
	border-bottom: 2px solid #E7E7E7;
	}

h2 {
	font-size: 125%;
	margin: 4px;
	}

h3 {
	color: #333;
	font-size: 115%;
	margin: 4px;
	}

h4{
	font-size: 100%;
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing: .2em;
	text-transform : uppercase;
	margin: 4px;
	}

h5 {
	color: #000;
	font-size: 110%;
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing: .2em;
	margin: 30px 5px 5px 5px;
	}

h6 {
	font-size: 100%;
	letter-spacing: .2em;
	text-transform : uppercase;
	margin: 4px;
}

/* ---( Forms )---------------------------------- */

input, select, textarea {
	color : #333333;
	font-size: 105%;
	margin-top: 5px;
	background : #F3F3F3;
	border: 1px solid #999;
	padding: 0.15em 0px 0.15em 0.25em;
} 
select {padding:0;}
textarea { font-size: 115%;}
input.none {
	color : #333333;
	font-size: 105%;
	padding: 0px;
	background: none;
	border: none;
}

.submit {
	color: #00A1E0;/*---2b333c---*/
	padding: 2px 0.4em;
	padding: 0.1em;
	margin-left: 4px;
	background: #fefefe url(images/background_form_element.gif) repeat-x;
	border-color: #c4cccc #acb5b5 #6f7777 #acb5b5;
}
.submit:hover,
.submit:focus {
	border-color: #F90;
}
.submit:visited {
	color: #2b333c;
}

/* ---( Lists )---------------------------------- */

ul {
	color: #333;
	list-style: disc;
}

ol {
	color: #333;
}

ul li {
	line-height: 1.5em;
}
#LeftColumn p {
	font-size: 95%;
	line-height: 1.2em;
	text-align: justify;
}

/* ---( LINKS )---------------------------------- */

a	{
	color: #00A1E0;
	text-decoration:none;
	font: bold 100% verdana, arial, helvetica, sans-serif;
	}
a:link, a:visited { color: #00A1E0}
a:hover, #main_hdr_text A:hover {color: #7BCEF5;}
a:active, a.textnav:active { color: #FE7900; }

a.textnav {
	font-weight: normal;
	color: #00A1E0;
	}
a.textnav:hover {
	color: #7BCEF5;
	text-decoration: underline;
	}

a.aButton, a.aButton:link, a.aButton:visited {	
	color: #00A1E0;
	font: 90% Verdana, Arial, Helvetica, sans-serif;
	text-transform : uppercase; text-decoration: none;
	letter-spacing : 0px;
	background: url(images/background_form_element.gif) repeat-x;
	border-style:solid;
	border-width:1px;
	border-color: #c4cccc #acb5b5 #6f7777 #acb5b5;
	padding: 2px;
}

a.aButton:hover {
	border-color: #7BCEF5;
	}
a.aButton:active {
	color: #00A1E0;
	font: 90% Verdana, Arial, Helvetica, sans-serif;
	background-color: #00A1E0;
	border-style:solid;
	border-width:1px;
	border-color: #c4cccc #acb5b5 #6f7777 #acb5b5;
	padding: 2px;
	}

#main_hdr_text a	{
	color: #FFF;
	text-decoration: none;
	text-transform: lowercase;
}

#main_hdr_text a:hover	{
	color:  #F90;
	text-decoration: none;
	background: none;
} 

#main_hdr_text span.big {
	position: relative;
	top: 2px;
	color: #666;
	font-size: 200%;
	font-weight: normal;
}

#LeftColumn .leftnavlinks a	{
	color: #000;
	font-size: 1.2em;
	text-align: right;
	font-weight: bold;
	display: block;
	width: 100%;
	padding: 3px;
	border: 1px solid #E7E7E7;
	margin: 2px 5px 2px -5px;
	background: #F6F6F6;
}
#LeftColumn .leftnavlinks a:hover	{
	background: #FFF;
}

#RightColumn a	{
	color: #CCC;
	font:bold 105% verdana, arial, helvetica, sans-serif;
	text-transform: uppercase;
}

#RightColumn a:hover	{
	color: #FFF;
	background:none;
}

#Footer a	{
	color: #B5B5B5;
	font: normal 100% verdana, arial, helvetica, sans-serif;
	text-transform : lowercase;
	letter-spacing : 0px;
	padding: 4px;
}
#Footer a:link { color: #B5B5B5;}
#Footer a:hover	{color: #F90;}

/* //////////////////////// LAYOUT /////////////////////// */

/* ---( sections )---------------------------------- */

/* This is a box that contains everything - basically it is here to make sure height=100% correctly */
#WholePage {
	position:relative;
	left:0px;
	top:0px;
	background: none; /* No Logo when printing */
}
#Footer {
	position:relative; /* Will fall directly under the BodyColumn Layer */
	text-align:center;
	height: 30px;
	padding-top: 5px;
	border-top: 1px solid #CCC;
	margin: 30px 5%;
}

#TopSection { /* This is the header section - the top 100px of the page */
	position:relative;
	left:0px;
	top:0px;
	height: 95px;
}
#MainSection { /* This is the main body of the page - everything from 100px and below on the page */
	position:relative;
	left:0px;
	top:0px;
	border-top: 1px solid #FFF;
	background: #FCFCFC;  /* Background image is removed when printing */
}

/* ---( columns )---------------------------------- */

#LeftColumn { /* This is a floating div that is 100px from the top of the page and always on the LEFT side */
	position:absolute;
	left:0px;
	top:0px;
	z-index:2;
	font: 100% verdana, arial, helvetica, sans-serif;
	width: 150px;
	//width:140px; /* This is the width of the left column */
	padding: 0px 10px;
	background-color: #FCFCFC;
	border-right: 1px solid #E7E7E7;
	display: none;  /* We dont want this to show when printing */
}

/* This is the section that contains all text - USED WHEN A LEFT COLUMN IS PRESENT - it has left and right margins so the text doesnt flow under the 2 
floating divs that for the left and right columns */
#BodyColumn {
	position: relative;
	padding: 10px 10px 5px 10px;
	margin: 0 30px 0 30px; /* This is printing ONLY margins, so the text takes up the whole page */
	background: #FFF;
}

/* This is the section that contains all text - USED WHEN NO LEFT COLUMN PRESENT - it has a right margin so the text doesnt flow under the 
right column */
#BodyColumn_NoLeft {
	position: relative;
	padding: 10px 10px 5px 10px;
	margin: 0 30px 0 30px; /* This is printing ONLY margins, so the text takes up the whole page */
	background: #FFF;
}


#RightColumn { /* This is a floating div that is 100px from the top of the page and always on the RIGHT side */
	position:absolute;
	right:0px;
	top:0px;
	width:150px;
	display: none;  /* We dont want this to show when printing */	
}

/* ---( Header )---------------------------------- */

#Header {
	position: relative;
	height: 95px;
	width: 100%;
	margin:0px 0px 0px 0px;
}
#main_hdr_right{
	position: absolute;
	right:0px;
	top: 0px;
	z-index:1; /* Include this so that the right image rolls under the main header on smaller screens */
	display: none;  /* We dont want this to show when printing */	
}
#main_hdr_left	{
	position:absolute;
	top:0px;
	left:0px;
	z-index: 2;
	display: none;  /* We dont want this to show when printing */	
}
#main_hdr	{
	position:absolute;
	top:0px;
	left:0px; /* This is zero, to make it start from left, it is 28px if we include the main_hdr_left , which is commented out now */
	z-index: 0;
}
#main_hdr_text	{ /* This contains the links along the header */
	position: absolute;
	top: 60px;  /* Keeps the text in the header floating above the dark gray line */
	left: 0px;
	font: bold 11px Arial, Helvetica, sans-serif;
	text-align: right;
	letter-spacing: 1px;
	width: 100%;
	display: none;
}
#main_hdr_text span.left { /* Moves "Catalog" to the left side of the layer */
	float: left;
	text-align: right;
	margin-left: 60px;
}
#main_hdr_text span.right { /* Moves all other links to the right side of the layer */
	float: right;
	text-align: left;
	margin-right: 160px;
}

/* ////////////////////// CONTENT STYLES ////////////////// */

/* -------------- This is for the box on the front page
 - that is to look like the current ESP.com boxes  ------------------ */


/* ---( Products Listings - In the Catalog )---------------------------------- */


table.products { /* This is for the browsecatalog section */
	font: 1em/1.2em verdana, arial, helvetica, sans-serif;
}
table.products a.textnav {
	font: 1em/1.2em verdana, arial, helvetica, sans-serif;
}
table.products TH {
	text-transform: uppercase;
	font: bold 1em verdana, arial, helvetica, sans-serif;
	background-color: #EEE;
}
.row1 {
	background: #f5f5f5;
}
.row2 {
	background: #FFF;
}
.product_img {
	background: #FFF;
}

table.products TH A.product_sort_active {
	display: block;
	width: 100%;
	border:1px solid #00A1E0;
	color: #00A1E0;
}

/* ---( Catalog Pages )---------------------------------- */

#product_info { /* Contains the Product Image and Product Details, such as price and Descriptions */
	float:left;
	margin-right: 7%;
	margin-bottom: 10px;
}

.product_details { /* Contains the details of the Product, floats to the left of the photo */
	float: left;
	text-align: left;
	width: 40%;
	border: 1px solid #CCC;
	padding: 0px 25px 5px 10px;
	margin: 0px 10px 10px 10px;
	background:#fCfcfc;
}

.product_details h3 {
	font-size: 11px;
	font-weight: bold;
	border-right: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	border-left: 1px solid #CCC;
	width: 90%;
	padding: 3px 5px 3px 5px;
	margin-top: 0px;
	margin-bottom: 5px;
	background: #EEE;
}
.product_details p.comment {
	font:  bold 115% Arial, sans-serif;
	color:#900;
	}
.disclaimer {
	color:#900;
	padding: 5px;
	font: 95% Arial, Helvetica, sans-serif;
	}
#extra_info { /* Contains all paragraph information, such as description, indications, warnings, etc. */
	border: 1px solid #CCC;		
	padding: 5px;
	margin-bottom: 10px;
	background:#fCfcfc;		
}

#packaging_block { /* Contains a table that lists a breif summary of packing details */
	color: #333;
	width:80%;
	border: 1px solid #00A1E0;
	margin: 20px 5px 5px 5px;
	background: #F5F5F5;
}

#packaging_block td, #packaging_block th{
	border: 1px solid #FFF;
	padding: 3px;
}
table.nutrition td {
	font-size: 95%;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	padding-left: 5px;
}
table.nutrition h4 {
	font: bold 150% Arial, Helvetica, sans-serif;
	letter-spacing: 0px;
	margin: 2px;
}

/* ---( Tabs )---------------------------------- */

#tabnav {
	height: 22px;
	margin: 0px;
	padding-left: 10px;
}
#tabnav img {
	margin:0px;
	padding:0px;
}

#tabnav li {
	display: inline;
	list-style-type: none;
	margin: 0px; 
	padding: 0px;
  }
	
#tabnav a:link, #tabnav a:visited {
	float: left;
	color: #666;
	font-size: 10px;
	font-weight: bold;
	line-height: 15px;
	text-decoration: none;
	border-top: 1px solid #ccc;	
	border-left: 1px solid #ccc;	
	border-right: 1px solid #ccc;			
	padding: 2px 10px 2px 10px;
	margin-right: 4px;
	background: #E7E7E7;
}

#tabnav a:link.active, #tabnav a:visited.active {
	color: #000;
	background: #FCFCFC;
}

#tabnav a:hover{
	background: #fff;
}

.disclaimer {
	color:#990000;
	padding: 5px;
	font: 95% Arial, Helvetica, sans-serif;
}

/* ---( Specials )---------------------------------- */

.special_category {
	font-size: medium;
	text-transform: uppercase;
	}
.special_vendor A, .special_vendor A:visited {
	color: #000000;
	font-weight: bolder;
	font-size: 130%;
	text-decoration: none;
	}
.special_discount {
	font-size: 200%;
	font-weight: bolder;
	font-style: italic;
	}
.special_desc A, .special_desc A:visited{
	color: #000000;
	font-size: 105%;
	text-decoration: none;
	}
.special_desc {
	font-size: 115%;
	}
.special_notes {
	font-size: 100%;
	}

/* ---( Form Layout Classes )---------------------------------- */

/* Simulates a row */
div.row {
	clear: both;
	min-width:350px;
	padding-top: 10px;
  }
  
/* Simulates a left column in a 2 column row */
div.row span.item {
	float: left;
	width: 25%;
	text-align: left;
	margin: 5px;
  }
  
/* Simulates a right column in a 2 column row */
div.row span.description {
	text-align: left;
  } 

/* Simulates a header row */
span.header {
	color:#333;
	font-size: 13px;
	font-weight: bold;
	text-align: center;
	width: auto;
	display: block;
	border: 1px solid #666;
	padding: 3px;
	margin-bottom: 10px;
	background: #EEE;
}

.formhead {
	color: #666;
	font-weight:bold;
	clear:both;
	border-bottom: 1px solid #CCC;
	padding: 2px 2px 5px 20px;
	margin: 8px 2px 0px 2px;
	background: url(images/arrow.gif) no-repeat 0px 4px;
}

/* The left side to a form, or form description */
.formdesc {
	display: block;
	float: left;
	width: 30%;
	text-align:right;
	clear:both;
	border-right: 1px solid #CCC;
	padding: 6px;
	margin-right: 3px;
}
/* The left side to a form, or form description */
.formtext {
	text-align:left;
	font-weight: bold;
	display: block;
	float: left;
	padding: 6px;
	margin-left: 3px;
}

/* ---( Other Classes )---------------------------------- */

.message_box { /* Grayed out box that is used to display status messages or warnings */
	background:#fCfcfc;
	padding: 5px;
	border: 1px solid #CCC;
	margin-bottom: 10px;
}

.hr {
	background: #FFF;
	border-top: 1px solid #999999;
	height: 1px;
	font-size: 1px;
	margin-top:3px;
	clear:both;
}

.note { /* used for notes */
	color: #CFCFCF;
	font-size: 100%;
	font-family: Arial, Helvetica, sans-serif;
	text-transform : lowercase;
	padding-right: 5px;
	padding-left: 5px;
	margin: 0px;
}

.boldnote { /* used for important notes */
	color: #333;
	font: bold 110% Arial, Helvetica, sans-serif;
	letter-spacing: .1em;
}

.hide {
	display: none;
}

div.spacer {
	clear:both;
}

.spec_color { /* This is the color of the season from the catalog */
	color: #00A1E0;
}

.highlight_border { /* Used to emphasize borders around objects */
	border: 1px solid #00A1E0;
}

.column {
	width: 32%;
	float:left;
	padding:0px;
	display:block;
	margin: 0px;
}
.column a {
	display: block;
	width:100%;
	padding:2px 2px 5px 2px;
}
.column a:hover {
	background-color: #F6F6F6;
	color:#000;
	padding:2px 2px 5px 2px;
	text-decoration: none;
}

A.email_icon {
	padding: 4px 2px 4px 25px;
	vertical-align:text-top;
	background: url("images/icons/email.gif") no-repeat 0px 0px;
}
.tip_icon {
	padding: 4px 2px 4px 20px;
	vertical-align:text-top;
	background: url("images/icons/lightbulb.gif") no-repeat 0px 0px;
}
.press_icon {
	padding: 4px 2px 4px 20px;
	vertical-align:text-top;
	background: url("images/article.gif") no-repeat 0px 0px;
}

.icon {
	padding: 0px 2px 0px 20px;
	vertical-align:text-top;
	background: url("images/arrow.gif") no-repeat 0px 0px;
}
table.borders {
	border-collapse: collapse;
	border: 2px solid #999;
	}
table.borders td{
	border: 1px solid #999;
	}
table.borders th{
	border: 1px solid #999;
	background: #E7E7E7;
	}
.step1 {list-style:none;margin: 0;padding:1em;background: url(images/step1.gif) no-repeat center left;}
.step2 {list-style:none;margin: 0;padding:1em;background: url(images/step2.gif) no-repeat center left;}
.step3 {list-style:none;margin: 0;padding:1em;background: url(images/step3.gif) no-repeat center left;}
.step1 li, .step2 li, .step3 li{ 
	font-size: 120%; 
	list-style: none;color: #AAA; 
	margin: .3em; padding-left:2em; 
	}
.step1 li.active, .step2 li.active, .step3 li.active { 
	color: black; 
	font-weight: bold;
	}
/* ---------------( Quickref are links on the bottom of the main page ) ------------ */
#quickref A {
	font: normal 100% Verdana, Arial, Sans-Serif;
}

#quickref dl {
	float: left;
	width: 33%;
}

#quickref dt {
	font-weight: bold;
	text-align: center;
	display: block;
	}
	
/* ---------------( Category Descriptions ) ------------ */

#category {
	 border-bottom: 1px solid #E7E7E7;
	 }
#category td.category_form {
	padding: 5px;
	border-right: 1px solid #E7E7E7;
	margin-bottom: 10px;
	vertical-align: top;
	text-align: right;
	}
.tanningproducts {background: url(images/category/tanning.gif) no-repeat bottom right;}
.weightgain {background: url(images/category/weightgain.gif) no-repeat bottom right;}
.weightlossenergy {background: url(images/category/weightlossenergy.gif) no-repeat bottom right;}
.aminoacids {background: url(images/category/aminoacids.gif) no-repeat bottom right;}
.anabolicprecursors {background: url(images/category/anabolicprecursors.gif) no-repeat bottom right;}
.vitaminsminerals{background: url(images/category/vitamins.gif) no-repeat bottom right;}
.bars {background: url(images/category/bars.gif) no-repeat bottom right;}
.clothes {background: url(images/category/clothes.gif) no-repeat bottom right;}
.snacksfoods {background: url(images/category/snackfoods.gif) no-repeat bottom right;}
.sportperformance {background: url(images/category/sportperformance.gif) no-repeat bottom right;}
.mealreplacements {background: url(images/category/mrp.gif) no-repeat bottom right;}
.drinks {background: url(images/category/drinks.gif) no-repeat bottom right;}
.fitnessaccessories {background: url(images/category/fitness.gif) no-repeat bottom right;}
.creatine {background: url(images/category/creatine.gif) no-repeat bottom right;}
.dietaryfatsoils {background: url(images/category/dietaryfatsoils.gif) no-repeat bottom right;}
.herbs {background: url(images/category/herbs.gif) no-repeat bottom right;}
.lowcarbproducts {background: url(images/category/lowcarb.gif) no-repeat bottom right;}
.protein {background: url(images/category/protein.gif) no-repeat bottom right;}
.ephedrine {background: url(images/category/ephedrine.gif) no-repeat bottom right;}