/*+-------------------+*/
/*| Style definitions |*/
/*| for Serla & Lambi |*/
/*| Sports Clubs      |*/
/*+-------------------|*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

:focus {
	outline: 0;
}

ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

body { 
  font-size: 75%;
  line-height: 1.5;
  color: #333;
  background: #fff url(/pics/sportsClubs/sports_club_bg.jpg) no-repeat center 30px;  
  font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
}

h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #111; }

h1 { font-size: 2em; line-height: 1; padding-bottom: 0.75em; }
h2 { font-size: 1.3333em; line-height: 1.125; padding-bottom: 1.125em; }
h3 { font-size: 1.1667em; line-height: 1.2857; padding-bottom: 1.2857em; }
h4 { font-size: 1em; line-height: 1.5; padding-bottom: 1.5em; font-weight: bold; }

h1 img, h2 img, h3 img, 
h4 img, h5 img, h6 img {
  margin: 0;
}

p           { margin: 0 0 1.5em; }
p img.left  { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p img.right { float: right; margin: 1.5em 0 1.5em 1.5em; }

a:focus, 
a:hover     { color: #000; }
a           { color: #333; text-decoration: underline; }

blockquote  { margin: 1.5em; color: #666; font-style: italic; }
strong      { font-weight: bold; }
em,dfn      { font-style: italic; }
dfn         { font-weight: bold; }
sup, sub    { line-height: 0; }

abbr, 
acronym     { border-bottom: 1px dotted #666; }
address     { margin: 0 0 1.5em; font-style: italic; }
del         { color:#666; }

pre,code    { margin: 1.5em 0; white-space: pre; }
pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; } 

li ul, 
li ol       { margin: 0 1.5em; }
ul, ol      { margin: 0 0 1.5em 1.5em; }

ul          { list-style-type: disc; }
ol          { list-style-type: decimal; }

dl          { margin: 0 0 1.5em 0; }
dl dt       { font-weight: bold; }
dd          { margin-left: 1.5em;}

table       { margin-bottom: 1.4em; width:100%; }
th          { text-align: left; font-weight: bold; }
th,td       { padding: 4px 10px 4px 5px; }
tr.even td  { background: #E5ECF9; }
tfoot       { font-style: italic; }
caption     { background: #eee; }

#masthead { background: #0080b4; margin-bottom: 30px; color: #fff; }

	#masthead a { color: #fff; }

	#masthead-wrapper { background: #1a97ca; }

	#masthead-bar { height: 30px; font-size: 14px; text-align: right; line-height: 30px; font-weight: bold; margin: 0 auto; width: 960px; }

#login { width: 960px; margin: 0 auto; display: none; }

	#login-description { font-size: 14px; float: right; display: inline; padding: 3.3em 2em 0 0; width: 280px; }
	
	#login-form {
		padding-top: 1em;
		float: right;
		width: 300px; }
		
	#login-error {
		margin: 0 auto; width: 960px; }	

#wrapper { width: 960px; margin: 0 auto; }

.frontpage { }

.page { }

#frontpage-columns {}

.column {
	float: left;
	margin-right: 15px;
}

.last { margin-right: 0; }

#frontpage-columns .column { width: 310px; }
#frontpage-columns .dialog { }
#frontpage-columns .dialog .content {  }

	#header { position: relative; z-index: 1; height: 260px; overflow: hidden; }
	
	.frontpage #header { margin-bottom: 0px; }
	
		#header h1 {
			z-index: 99;
			position: relative;
			margin: 0 auto;
			background: transparent url(/pics/sportsClubs/logo.png) no-repeat;
			_background-image: url(/pics/sportsClubs/logo.gif);
			width: 231px;
			height: 260px;
			text-indent: -999em; }
		
		#header h1 a {
			display: block;
			width: 100%;
			height: 100%; }	
		
		#mainMenu {
			font-weight: bold;
			font-size: 13px;
			white-space: nowrap;
			position: absolute;
			line-height: 44px;
			z-index: 1;
			width: 900px;
			padding: 10px 30px;
			height: 44px;
			background: transparent url(/pics/sportsClubs/mainmenu.png) no-repeat;
			_background-image: url(/pics/sportsClubs/mainmenu.gif);
			bottom: 105px; }
			
			#mainMenu a:hover { text-decoration: underline; }
			#mainMenu a { color: #474747; text-decoration: none; }
			
			#mainMenu ul { list-style: none; margin: 0; padding: 0; }
			#mainMenu li { display: inline; }

/**
	----------------------------------
	If flash element is not being used
	background image is being shown 
	instead
	----------------------------------
**/

#flashElement {
	width: 960px;
	height: 250px;
	z-index: 1;
	position: relative;
}

/*  --- Subpages ---  */
#page {
	width: 960px;
	margin: -40px 0 0;
}

#leftCol {
	float: left;
	width: 200px;
	padding: 20px 0 0 10px;
}

#contentCol {
	margin: 0 0 0 225px;
	padding: 20px 0 0 30px;
	min-height: 440px;
	_height: 440px;
	width: 45em;
	border-left: 1px dashed #ccc;
}
	
#navi { }
	
	#navi a:hover 	{ text-decoration: underline; }
	#navi a			{ font-weight: bold; text-decoration: none; }
	
	#navi ul {
		list-style: none; margin-left: 0; }
	
		#navi ul li { margin-bottom: .3em; }
			
		#navi ul ul {}
			
		#navi li li 		{}
		#navi #selected		{ color: #0080b4; }
		
#navi-btm a { font-weight: normal; }		
		
#calc { text-align: center; }

#calc-wrapper { text-align: left; padding: 1em; background: #edeeea; margin-bottom: 1em; }

h2#calc-header { z-index: 99; position: absolute; top: -5px; left: 0; }

#calc p { padding-bottom: .5em; margin: 0; }

#calc input.text { vertical-align: middle; text-align: right; width: 8em; }

#calc-total	{ display: none; padding-top: .5em; }
#calc #total_item { font-weight: bold; }

a.btn-calculate:hover { color: #fff; text-decoration: underline; }
a.btn-calculate { text-decoration: none; margin: 0 auto; display: block; width: 8em; padding: .3em; background: #0080B4; text-align: center; color: #fff; font-weight: bold; }

#contentCol img {}
#contentCol img.alignLeft { float:left;margin-right:1em;}
#contentCol img.alignRight { float:right;margin-left:1em;}
#contentCol img.alignLeftBorder { float:left;margin-right:1em;padding:2px;border:1px solid #bcc5c5;}
#contentCol img.alignRightBorder { float:right;margin-left:1em;padding:2px;border:1px solid #bcc5c5;}

#orava {
	position: absolute;
	top: -10px;
	right: -20px;
	z-index: 99;
}

/*
	Styles for individual subpages
*/
/* --- Order Form -- */
	table#orderForm td {
		border-bottom: 1px solid #eee;
	}
	
/**
	Style definitions for subpages
**/		

/** Product pages **/
table.productSheet {
	border:none;
	padding:0;
	margin:0;
	width:98%;
	}
	table.productSheet td.productHeading h1,
	table.productSheet td.productHeading h2,
	table.productSheet td.productHeading h3,
	table.productSheet td.productHeading h4,
	table.productSheet td.productHeading h5,
	table.productSheet td.productHeading p {
		font-size:18px;
		color:#3c6d20;	
		font-weight:normal
	}
	
	td.productImage {}
	td.environmentLabels { }
	div.tableBorder {
		border:1px solid #ecf3e9;
		padding:2px;
	}
	table.productFacts {
		background:#ecf3e9;
		
		
	}
		table.productFacts td {padding:0.5em;}
		table.productFacts strong { color:#3c6d20;}
		table.productFacts ul {
			list-style-type:none;
			
		}
		table.productFacts li,
		table.productFacts li p,
		table.productFacts li p.txtleipa {
			font-size:11px;
			color:#000000;
			border-bottom:1px solid #d3e6ca;
			padding-bottom:0.5em;
			margin-top:0.5em;
			margin-left:-2em;
		}


#footer { clear:both; color: #333; text-align: center; }

.dialog {
	position: relative;
	margin: 0 auto;
	min-width: 8em;
	max-width: 960px; /* based on image dimensions - not quite consistent with drip styles yet */
	margin-left: 20px; /* default, width of left corner */
	margin-bottom: 0.5em; /* spacing under dialog */ }

	.dialog .content,
	.dialog .t,
	.dialog .b,
	.dialog .b div {
		background:transparent url(/pics/sportsClubs/dialog.png) no-repeat top right;
		_background-image: url(/pics/sportsClubs/dialog.gif); }
		
	#frontpage .dialog .content,
	#frontpage .dialog .t,
	#frontpage .dialog .b,
	#frontpage .dialog .b div {
		background-image: url(/pics/sportsClubs/dialog2.png);
		_background-image: url(/pics/sportsClubs/dialog2.gif); }

	.dialog .content {
		position: relative;
		zoom: 1;
		min-height: 450px;
		_overflow-y: hidden;
		padding: 20px 20px 0 0; }
		
	#frontpage .dialog .content { min-height: 0; }	

	.dialog .t {
		/* top+left vertical slice */
		position: absolute;
		left: 0px;
		top: 0px;
		width: 20px; /* top slice width */
		margin-left: -20px;
		height: 100%;
		_height: 1600px; /* arbitrary long height, IE 6 */
		background-position: top left; }

	.dialog .b {
		/* bottom */
		position: relative;
		width: 100%; }

	.dialog .b,
	.dialog .b div {
		height: 20px; /* height of bottom cap/shade */
		font-size: 1px; }

	.dialog .b {
		background-position: bottom right; }

		.dialog .b div {
			position: relative;
			width: 20px; /* bottom corner width */
			margin-left: -20px;
			background-position: bottom left; }

	.dialog .hd,
	.dialog .bd,
	.dialog .ft {
		position: relative; }

	.dialog .wrapper {
		/* extra content protector - preventing vertical overflow (past background) */
		position: static;
		max-height: 1000px;
		overflow: auto; /* note that overflow:auto causes a rather annoying redraw "lag" in Firefox 2, and may degrade performance. Might be worth trying without if you aren't worried about height/overflow issues. */ }


label       { font-weight: bold; }
fieldset    { padding: 1em; margin: 0 0 1.5em 0; border: 1px solid #eee; }
legend      { font-weight: bold; font-size: 1.2em; }

form p { margin: 0 0 .3em; }

input.text, input.title,
textarea, select {
  margin: 0.5em 0;
  border: 1px solid #bbb;
}

input.text:focus, input.title:focus,
textarea:focus, select:focus {
  border: 1px solid #666;
}

input.text, 
input.title   { width: 185px; padding: 3px; }
input.title   { font-size: 1.5em; }
textarea      { width: 275px; height: 165px; padding:3px; }


/* Success, notice and error boxes
-------------------------------------------------------------- */

.error,
.notice, 
.success    { padding: .8em; margin-bottom: 1em; border: 2px solid #ddd; }

.error      { background: #FBE3E4; color: #8a1f11; border-color: #FBC2C4; }
.notice     { background: #FFF6BF; color: #514721; border-color: #FFD324; }
.success    { background: #E6EFC2; color: #264409; border-color: #C6D880; }
.error a    { color: #8a1f11; }
.notice a   { color: #514721; }
.success a  { color: #264409; }


/* Misc classes
-------------------------------------------------------------- */

.small      { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
.large      { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }
.hide       { display: none; }

.quiet      { color: #666; }
.loud       { color: #000; }
.highlight  { background:#ff0; }
.added      { background:#060; color: #fff; }
.removed    { background:#900; color: #fff; }

.first      { margin-left:0; padding-left:0; }
.last       { margin-right:0; padding-right:0; }
.top        { margin-top:0; padding-top:0; }
.bottom     { margin-bottom:0; padding-bottom:0; }

.float-left		{ float: left; }
.float-right	{ float: right; }

hr {
  background: #ddd; 
  color: #ddd;
  clear: both; 
  float: none; 
  width: 100%; 
  height: .1em;
  margin: 0 0 1.45em;
  border: none; 
}
hr.space {
  background: #fff;
  color: #fff;
}

/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

/* Regular clearing
   apply to column that should drop below previous ones. */

.clear { clear:both; }