/* CSS Document */

/* Author Ashoor Namrood, Syrox */

body {
	margin:0px; padding:5px 0px 5px 0px; background: url(/Images/Layout/background.gif) repeat-x #333366; font-family: Verdana, Arial, Helvetica, sans-serif; color: #666666; font-size: 10px; /* Always define 0px margin and padding, never use the Body tag to specify spaces. Body tags should only be used to specify backgrounds, font-family's (i.e. Arial, Verdana etc), a container class (i.e. line 39, .container) should be used to specify spaces. */
}

h1 {
	margin:0px; padding:0px; /* Always define 0px margin and padding to begin with on heading tags. You can then modify these as you continue building a site. */
}

h2 {
	margin:0px; padding:0px; /* */
}

h3 {
	margin:0px; padding:0px; /* */
}

h4 {
	margin:0px; padding:0px; /* */
}

h5 {
	margin:0px; padding:0px; /* */
}

h6 {
	margin:0px; padding:0px; /* */
}

a {
	text-decoration:none; color: #666666; font-size:11px; line-height:14px;
}

a:hover {
	color: #999999;
}

a img {
	border:0px; /* This defines that any images placed inside a <a href> tag or a .NET 2.2 Hyperlink have no default "blue" border that Internet Explorer adds by default */
}

p {
	margin:0px; padding:0px; font-size:11px; line-height:14px; /* Rule: when specifying font-size, line-height should always be roughly 3px more, so, i.e. 11px font-size = 14px line-height. */
}

ul {
	margin:0px; padding:0px;
}

ul li {
	margin:0px; padding:0px; list-style-type:none;
}


textarea {
	overflow:auto;
}


div.clear {
	clear:both; line-height:0pt; font-size:0px; height:0px; /* When a CSS class has an auto height (i.e. line 39, .container), it means that it'll grow in height according to the elements inside it. However, due to cross-browser differences, some browsers will not comply with this rule as they dont take into account floated elements so the DIV is 0px in height effectively. 'div.clear' is an "invisible" DIV which enforces this rule. */
}

span.strong {
	font-weight: bold;
}

span.error {
	font-size:11px;
}

.container {
	position:relative; width:979px; height:auto; margin:auto; margin-bottom:10px; /* background:url(/Images/homepage-trace.jpg) 0% 0% no-repeat; This is used to centre an element. Some people use text-align:center but that also centers text and you have to specify an inner DIV with a left or right text align which can then get slightly messy. */
}

.container a.logo {
	position:absolute; top:16px; left:24px;
}

.outerheader { 
	position:relative; width:979px; height:auto; margin:auto; padding:10px 0px 0px 0px; background:url(/Images/Layout/header.gif) 0px 0px no-repeat; /*opacity:0.5;*/
}

.header { 
	position:relative; width:977px; min-height:30px; height:auto !important; height:30px; margin:auto; padding:66px 1px 0px 1px; background:url(/Images/Layout/repeater.gif) 0px 0px repeat-y;
}

.header .topnav {
	width:943px; height:18px !important; border-top:1px solid #e4e4e2; border-bottom:1px solid #e4e4e2; padding:5px 13px 5px 13px; margin:auto; position:relative;
}

.header .topnav ul {
	margin:0px; padding:0px; position:absolute; top:6px; left:10px;
}

.header .topnav ul li {
	float:left; margin:0px; padding:0px 9px 0px 9px; background:url(/Images/Layout/topnav/vertborder.gif) 100% 50% no-repeat;
}

.header .topnav ul li.stores {
	/*background: none;*/
}

.header .topnav ul li.blog {
	background: none;
}

.header .topnav ul li a:hover {
	filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5;
}

.header .topnav .curves {
	padding: 0px; margin: 0px; height: 20px; width: 248px; position:absolute; top:5px; right:5px;
}

.header .topnav .curves input.textbox {
	padding: 3px 3px 3px 3px; top: 0px; left: 0px; margin: 0px; border: 0px; background: #eeeeee; font-family: Verdana, Arial, Helvetica, sans-serif; color: #666666; font-size: 10px; width: 167px;
}

.header .topnav .curves input {
	position: absolute; top: 1px; right: 4px;
}

.header .topnav .curves a:hover {
	filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5;
}

.header .options {
	width: 240px; height: 62px; position: absolute; top:0px; right:20px;
}

.header .options ul.basket {
	height: 28px; float: right; margin: 2px 0px 0px 0px; text-transform: uppercase;
}

.header .options ul.basket li.basket {
	background: url(/Images/Layout/basket.gif) no-repeat; width: 28px; height: 30px; line-height: 30px; text-align: center; color: #ffffff; font-weight: bold; padding:0px 0px 0px 0px; float: left;
}

.header .options ul.basket li.basket a {
	display:block; width:28px; height:10px; line-height: 10px; text-align: center; color: #ffffff; font-weight: bold; padding:10px 0px 10px 0px;
}

.header .options ul.basket li.price {
	margin: 9px 0px 9px 0px; float: left; padding:0px 10px 0px 7px; border-right: 1px solid #cccccc;
}

.header .options ul.basket li.view {
	margin: 9px 0px 9px 0px; float: left; padding:0px 0px 0px 10px; 
}

.header .options ul.currency {
	float: right; margin: 3px 0px 5px 0px; text-transform: uppercase; /* display: none;*/
}

.header .options ul.currency li.select {
	float: left; text-align: right; width: 120px; padding: 0px 0px 0px 0px;
}

.header .options ul.currency li.gbp {
	float: left; padding:0px 0px 0px 5px;
}

.header .options ul.currency li.eur {
	float: left; padding:0px 5px 0px 5px; border-right: 1px solid #CCCCCC;
}

.header .options ul.links {
	height:15px; float:right; margin:4px 0px 0px 0px; text-transform: uppercase;
}

.header .options ul.links li.my-account {
	float: left; height: 10px; line-height: 10px; padding: 0px 8px 0px 8px; border-right: 1px solid #CCCCCC;
}

.header .options ul.links li.contact-us {
	float: left; height: 10px; line-height: 10px; padding: 0px 0px 0px 5px;
}

.header .options a.selected {
	text-decoration: underline !important;
}

.header img {
}

.content {
	width:969px; padding: 4px 4px 98px 4px; min-height:500px; height:auto !important; height:500px; margin:auto; border-left:1px solid #e4e4e2; border-right:1px solid #e4e4e2; background-color:#FFFFFF; position: relative;  /*opacity:0.5; I have given the .content DIV a min-height of 500px. This means that the container-alternative DIV which I had given a min-height of 500px will now rise to 650px high when taking into account the heights of the header (100px) and the footer (50px). */
}

.content#checkout {
	min-height:400px; height:auto !important; height:400px;
}

.outerfooter { 
	position:relative; width:979px; height:auto; margin:auto; padding:0px 0px 10px 0px; background:url(/Images/Layout/footer.gif) 0% 100% no-repeat; /*opacity:0.5;*/
}

.footer {
	position:relative; width:979px; min-height:50px; height:auto !important; height:50px; margin:auto auto 20px auto; padding:0px 0px 0px 0px; background:url(/Images/Layout/repeater.gif) 0px 0px repeat-y;/* */
}

.footer .links {
	width:947px; height: 67px; border-top:1px solid #e4e4e2; margin: auto; padding: 0px 11px 0px 11px; border-bottom:1px solid #e4e4e2;
}

.footer .links ul {
	width: 236px; float: left; margin: 9px 0px 9px 0px;
}

.footer .links ul li.heading {
	text-transform: uppercase; font-weight: bold; color: #333366;
}

.footer .contact-info {
	background: url(/Images/Layout/footer-logo.gif) no-repeat #ffffff; width:824px; min-height:10px; height:auto !important; height:10px; border-bottom:1px solid #e4e4e2; padding:5px 0px 13px 145px; margin: auto; position:relative;
}

.footer .contact-info p {
	font-size:10px;
}

.footer .footer-links {
	width:969px; min-height:10px; height:auto !important; height:10px; border-top:1px solid #e4e4e2; border-bottom:1px solid #e4e4e2; padding: 9px 0px 9px 0px; margin: auto;
}

.footer .footer-links ul {
	float: left; margin: 0px 0px 0px 0px; padding:0px 0px 0px 0px; text-transform: uppercase; /* display: none;*/
}


ul.social-networking-links { position:absolute;
right:3px;
top:5px; }

ul.social-networking-links li { float:right; padding:0px 0px 0px 10px; display:block; width:140px; }

ul.social-networking-links li a { display:block; height:16px; width:auto; }

ul.social-networking-links li a span { padding:0px 0px 2px 0px; }

ul.social-networking-links li img.link-button { float:left; margin:0px 5px 0px 0px; }


.footer .footer-links ul#right {
	float: right;
}

.footer .footer-links ul li {
	float: left; padding: 0px 10px 0px 10px; border-right:1px solid #999999;
}

.footer .footer-links ul li.lastlink {
	border-right:0px;
}


.footer p.syrox {
	position: absolute; right: 16px; bottom: -20px;
}

.footer p.copyright {
	position: absolute; left: 16px; bottom: -20px;
}