/*

Styles for EasyChange - this style sheet is for global use
----------------------------------------------------

Description: Style for redesign of EasyChange.se
Version: 0.1
Author: Jesper Andersen, Laios & Andersen
Author URI: http://laiosandersen.se/


	IMPORTANT: This is a beta release.


	CSS OVERVIEW

	There are sections throughout, roughly describing
	the contents inside each section. To step through each
	section, do a search for '/ * -' (without spaces) and
	repeat the search until you find the section you need.

	The use of selectors has been exagerrated in some places,
	so as to make it easier for people to gain an overview
	of what classes belong where in the hierarchy.

	For specifik styles who doesn't affect global, create a
	new style sheet and link it.

*/



/* global reset of padding and margin */

* {
	padding: 0;
	margin: 0;
}

/* forcing scrollbar */
html { min-height: 100.05%; }

/*  -------------  HTML elements ------------- */

body {
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 130%;
	color: #000000;
	background-color: #666;
	text-align: center;
}

p {
	margin: 10px 0;
}

a, a:active, a:visited {
	color:	#CC0000;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

h1 {
	color: #CC0000;
	font-size: 25px;
	font-weight: 100;
	margin: 6px 0;
	padding: 2px 0 5px 0;
}

h2 {
	color: #CC0000;
	font-size: 15px;
	line-height: 1.3em;
}

h3 {
	color: #000;
	font-size: 13px;
	padding: 5px 0;
	line-height: 1.3em;
	border-bottom: 1px solid #ccc;
}

h4 {
	color: #000;
	font-size: 11px;
}

/*  -------------  Page structure // Layout  ------------- */

#container {
	margin: 0 auto;
	background-color: #FFFFFF;
	width: 900px;
	text-align: left;
}

#header {
	height: 89px;
	background-image: url(../gfx/bg_pageHeader.png);
	background-repeat: repeat-x;
}

#logo, #logo img {
	float: left;
	font-size: 14px;
	color: #666;
	margin: 15px 10px 10px 10px;
}
#logo span {
	color: #666;
	font-size: 15px;
	padding: 0 0 0 10px;
	margin: 5px 0;
}

#searchfield {
	float: right;
	text-align: right;
	margin: 15px 15px;
}

#searchfield input {
	float: left;
	margin: 2px 3px;
}

#head-navigation {
	background-image: url(../gfx/bg_headNav.png);
	background-repeat: no-repeat;
	background-position: top left;
	height: 40px;
	padding: 0;
	margin: 0;
	_margin: 0 0 -5px 0;
	_padding: -10px 0;
	background-color: #efefef;
}

#head-navigation ul  {
	list-style-type: none;
	margin: 0 0 0 8px;
	padding: 1px 0 2px 0;
	_padding: 1px 0 -10px 0;
}

#main-content a {
	color: #FFFFFF;
	text-decoration: underline;
}

#main-content ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#head-navigation ul li, #main-content ul li {
	float:left;
}

#content {
	background-color: #efefef;
}

#content-left {
	float: left;
	width: 890px;
}

#main-content {
	/*width: 100%;*/
	margin: -3px 0 0 10px;
	padding: 15px;
}

#main-content.red, .red {
	background-image: url(../gfx/bg_mainHeader_red.png);
	background-repeat: repeat-x;
	background-position: bottom;
	background-color: #c00;
	color: #fff;
}

#main-content.blue, .blue {
	background-image: url(../gfx/bg_mainHeader_blue.png);
	background-repeat: repeat-x;
	background-position: bottom;
	background-color: #003399;
	color: #fff;
}

#main-content.green, .green {
	background-image: url(../gfx/bg_mainHeader_green.png);
	background-repeat: repeat-x;
	background-position: bottom;
	background-color: #339933;
	color: #fff;
}

#main-content h2 {
	color: #fff;
}

#black-header {
	margin: 9px 0 0 10px;
	background-image: url(../gfx/bg_linearBlack.png);
	background-repeat: repeat-x;
	height: 30px;
	color: #fff;
	padding: 7px;
	/*width: 700px;*/
}

#black-header-compare {
	margin: 9px 0 0 10px;
	background-color: #000;
	/*width: 700px;*/
}

#black-header-compare a {
	color: #fff;
}

#black-header-compare table {
	font-size: 11px;
	color: #fff;
}

#black-header-compare table td {
	padding: 6px;
}

#compare-list {
	margin: 9px 0 0 10px;
	/*width: 700px;*/
}

#compare-list a, #compare-list a:link, #compare-list a:active, #compare-list a:visited {
	color: #CC0000;
}

#compare-list table {
	border: 1px solid #ccc;
	background-color: #fff;
	font-size: 11px;
	margin: 0 0 10px 0;
}

#compare-list table td{
	padding: 5px;
	border-right: 1px solid #ccc;
}

.popular {
	background: #fff;
	border: 1px solid #ccc;
	float: left;
	margin: 0 0 9px 13px;
	_margin: 0 0 9px 9px;
	width: 28%;
	height: 85px;
	padding: 10px;
}

div.pop-img {
	float: left;
	margin: 0 5px 0 0;
	text-align: center;
	width: 40%;
}

div.pop-info {
	float: right;
	width: 55%;
}

div.pop-info a:link, div.pop-info a: active, div.pop-info a:visited {
	color: #CC0000;
	text-decoration: underline;
}

.pop-header {
	text-transform: uppercase;
	color: #999999;
}

.pop-name {
	font-size: 1.3em;
	color: #000;
	font-weight: 800;
}

#sub-content {
	margin: 9px 0 0 10px;
	/*width: 700px;*/
	background-color: #fff;
	border: 1px solid #ccc;
	padding: 10px;
}

#sub-content table {
	background-color: #eee;
}

#sub-content table td{
	background-color: #fff;
	padding: 5px;
}

#sub-content ul {
	list-style-type: none;
	margin: 10px;
	padding:0;
}

#sub-content ul li{
	margin: 0;
	padding: 3px 0;
}

#sidebar {
	width: 160px;
	float: right;
	margin: -2px 9px 0 0;
	_margin: -1px 5px 0 0;
}

#sidebar #login {
	border: 1px solid #ccc;
	padding: 5px;
	background-color: #FFFFFF;
}

#sidebar #login a {
	color: #CC0000;
}

#sidebar div.header {
	color: #fff;
	text-transform: uppercase;
	background-image: url(../gfx/bg_radialBlack.png);
	/*height: 30px;*/
	text-align: center;
	padding: 10px 0;
}

#side-navigation ul {
	list-style-type: none;
}

#side-navigation ul li{
	padding: 7px 0 7px 20px;
	background-color: #fff;
	margin: 2px 0;
	/*border: 1px solid #ccc;*/
}

#side-navigation ul li a, #side-navigation ul li a:link, #side-navigation ul li a:active, #side-navigation ul li a:visited {
	text-transform: uppercase;
	color: #999999;
	display: block;
	font-weight: 700;
}

#side-navigation ul li.active {
	background-image: url(../gfx/gfx_redArrow.png);
	background-repeat: no-repeat;
	background-position: 7px 9px;
}

#side-navigation ul li.active a {
	color: #CC0000;
}

#side-navigation ul li a:hover {
	color: #CC0000;
}

#footer {
	clear: both;
	background-color: #666;
	color: #aaa;
	padding: 1px 5px;
}

#footer a, #footer a:link, #footer a:active, #footer a:visited {
	color: #ccc;
	text-decoration: underline;
}

#footer a:hover {
	color: #fff;
}

.about-txt {
	padding: 20px;
	color: #999999;
	clear: both;
}

.clear {
	clear: both;
}

.center {
	text-align: center;
}