/* ----- Reset ----- */

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
	padding: 0;
	margin: 0;
}

img {
	border: 0;
}

/* ----- Base rules for html, body ----- */

html {height:100%}
body {min-height:101%} /*fix for Firefox, Opera scrollbar jump*/

body {
	font: 76%/1.6 Arial, Helvetica, sans-serif;
	min-width: 960px;
	background: #E7E2E2;
	text-align: center;
	color: #666;
}

/*
body { overflow: -moz-scrollbars-vertical; } alternative fix for Firefox scrollbar jump*/

/* ----- Main layout elements ----- */

#wrapper {
	width: 960px;
	margin: 0 auto;
	text-align: left;
	background: #FFF url(../images/leftbg.jpg) no-repeat 12px 275px;
}

#header {
	height: 192px;
	padding: 0;
	background: #FFF;
}

#column1 {
	width: 250px;
	float: left;
	list-style: none;
	margin-left: 0;
	background: #FFF;
}

#content {
	width: 700px;
	float: right;
}

#mainContent {
	width: 685px;
	margin: 0;
	float: left;
	padding-top: 5px;
	padding-bottom: 20px;
}

#secondaryContent {
	width: 5px;
	display: inline; /* :IE double margin float bug */
	float: right;
	background-color:#FFF;
} 

#footer {
	clear: both;
	padding: 10px 20px 20px;
	background: #CEC5C6;
	text-align: right;
	color: #666;
} 

#footer #info {
	width: 600px;
	float: left;
	text-align: left;
	font-size: 100%;
}

/* ----- Link styles ----- */

a:link, a:visited {
	color: #5555C6;
	text-decoration: underline;
}

a:hover {
	text-decoration: none;
}

a:active {
	color: #B83840;
	text-decoration: none;
}

#latedownload td.cobll .ectlink, #latedownload td.cobll .ectlink:visited, #thanks td.cobll .ectlink, #thanks td.cobll .ectlink:visited { 
	text-decoration: none;
}

.cvw {
	display: block;
	margin-left: 650px;
}

.cvw a: link, .cvw a:visited {
	text-decoration: none;
	font-size: 90%;
	color: #919191;
}

/* ----- Main navigation ----- */

#navigation {
	float:left;
	width:100%;
	background:#FFF;
	font-size:100%;
	line-height:normal;
	border-bottom:1px solid #EDE9E9;
	padding-bottom: 5px;
}

#navigation ul {
	margin:0;
	list-style:none;
	padding-top: 10px;
	padding-bottom: 0;
	padding-left: 20px;
}

#navigation ul.main {
	width: 710px;
	float: left;
	padding-right: 0;
	margin-left: 20px;
}

#navigation ul.subnav {
	float: right;
	margin-right: 70px;
	width: 101px;
}
    
#navigation li {
    display:inline;
    margin:0;
    padding:0;
}

#navigation a {
	background: url(../images/home-but.gif) no-repeat left top;
	float:left;
	width: 117px;
	height: 44px;
	margin:0;
	display: block;
	text-indent: -9999px;
	color: #FFF
}

#navigation li.about a {
	background: url(../images/about-but.gif) no-repeat left top;
}

#navigation li.products a {
	background: url(../images/products-but.gif) no-repeat left top;
}
#navigation li.newsletter a {
	background: url(../images/newsletter-but.gif) no-repeat left top;
}

#navigation li.inspiration a {
	background: url(../images/inspiration-but.gif) no-repeat left top;
}

#navigation li.tutorials a {
	background: url(../images/tutorials-but.gif) no-repeat left top;
}

#navigation li.bypost a {
	background: url(../images/bypost-but.gif) no-repeat left top;
}

#navigation li.downloads a {
	background: url(../images/downloads-but.gif) no-repeat left top;
}

/*#navigation li.magazine a {
	background: url(../images/magazines-but.gif) no-repeat left top;
}*/

#navigation li.freebies a {
	background: url(../images/freebies-but.gif) no-repeat left top;
}

#navigation li.search a {
	background: url(../images/search-but.gif) no-repeat left top;
}

#navigation li.ask a {
	background: url(../images/ask-but2.gif) no-repeat left top;
}

#navigation li.basket a {
	background: url(../images/basket-but.gif) no-repeat center top;
	height: 69px;
}

/* ----- Sub-navigation ----- */

#column1 ul, #column1 ul#ecttop0_0  {
	width: 200px;
	list-style: none;
	margin-left: 20px;
}

#column1 ul.ectsubmenu1 {
	margin-left: 0;}

#column1 li {
	padding-top: 0px;
	border-bottom: 1px solid #E1D9DE;
} 

#column1 li.ectmenu1 {
	border-bottom: 1px solid #E1D9DE;
}

#column1 li a:link, #column1 li a:visited {
	display: block;
	padding: 0.4em 0 0.4em 0.5em;
	border-left: 0px solid #A58A99;
	border-right: 0px solid #A58A99;
	text-decoration: none;
	background: #FFF;
	color: #6C6968;
}

#column1 li a:hover {
	background: #E8E1E4;
}

#column1 li.ectmenuhassub1 a{
	background: #FFF url(../images/arrow.gif) no-repeat right center;
	}

#column1 li.ectmenuhassub1 a:hover{
	background: #E8E1E4 url(../images/arrowov.gif) no-repeat right center;
}

#column1 li.divider {
	border-top: 2px solid #E1D9DE;
}

/* ----- Paddings ----- */

#secondaryContent {
  	padding-top: 25px;
}

#column1 *, #secondaryContent * {
  	padding-left: 15px;
  	padding-right: 20px;
}

#column1 * {
  	padding-left: 0;
  	padding-top: 5px;
  	padding-right: 0;
}

#column1 * *, #secondaryContent * * {
  	padding-left: 0;
  	padding-right: 0;
}

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

h1, h2, h3 {
	font-weight: normal;
	border-bottom: 1px solid #EDEDE5;
	padding-bottom: 5px;
	color: #A69176;
}

h1, h2, h3, p {
  	margin: 1em 0;
}

h1 {
  	font-size: 1.6em;
	margin-top: 0;
}

h2 {
  	font-size: 1.4em;
}

h3, #mainContent .contact {
	font-size: 1.2em;
}

#download #inner h1, #download #inner h2 {
	border-bottom: 1px solid #C5B7A5;
}

/* ----- Main element styles ----- */

p, li {
  	font-size: 1em;
}

#header h1 {
  	margin: 0;
}

#secondaryContent h2 {
  	font-size: 1.3em;
  	margin: 0;
}

#column1 h2 {
	color: #808080;
	font-size: 120%;
	margin-top: 0px;
	line-height: 1.1em;
	border-bottom: 1px solid #EDEDE5;
	padding-bottom: 5px;
}

#column1 strong {
	color: #000;
}

#mainContent p, #secondaryContent p {
/*	line-height: 1.4em;*/
	font-size: 100%;
}

#mainContent ul.tut, ol {
	margin-left: 20px;
}

/* ---Paragraphs ---*/

#news p.featured {
	background: #DDE0CA;
	padding: 10px;
	color: #333;
	margin-left: 200px;
	margin-bottom: 100px;
}

.news-item {
	margin-top: 15px;
	overflow: auto;
}

#download #inner, #home #inner, #about #inner {
	background: #E0EACE;
	padding-left: 10px;
}

#home #inner, #about #inner{
	background: #999DB6;
	color: #FFF;
	padding-bottom: 5px;
	padding-top: 5px;
}

#about #inner {
	padding-right: 10px;}

#download #inner {
	padding-right: 10px;
	padding-bottom: 10px;}

#home #inner {
	position: relative;
	padding-left: 0;
	padding-bottom: 0;
	background: #FFF
	}

#inner .insider {
	position: absolute;
	width: 199px;
	left: 5px;
	top: 5px;
	text-align: center;
}

#inner .insider img {
	display:block;
}

.montage {
	margin-left: 200px;
}

#about #inner h2 {
	color: #FFF;
	border-style: none;
	font-size: 120%;
	padding-bottom: 0px;
}

#home h1 {
	font-size: 110%;
	border-style: none;
	margin-bottom: 0px;
	padding-bottom: 0px;
	color: #6C6968;
	padding-top: 10px;
}

#home h1 span {
	font-size: 130%;
	color: #483963;
	font-weight: bold;
}

p.address {
	padding: 10px;
	width: 393px;
	border: 1px dashed #CEC5C6;
	margin-left: 10px;
}

/* ----- Images ----- */

.newdesigns {
	margin-top: 15px;}
	
#inspiration #mainContent img {
	margin-right: 20px;
}

/* ----- Home page/Inspiration page thumbnails ----- */

ul.thumbnails, ul.thumbnails2 {
	margin: 10px auto 10px 3px;
	padding: 0;
	float: left;
	text-align: center;
	line-height: 1em;
	list-style: none;
}

ul.thumbnails li, ul.thumbnails2 li {
  display: inline;
  margin: 0;
  padding: 0;
}

ul.thumbnails a, ul.thumbnails2 a {
	display: block;
	float: left;
	margin: 0;
	padding: 4px 4px 12px;
	border: 1px solid #ccc;
	border-top-color: #eee;
	border-right-color: #ddd;
	border-bottom-color: #bbb;
	text-align: center;
	color: #606280;
	text-decoration: none;
	background: #DAD5E2;
	text-transform: capitalize;
	font-size: 125%;
	line-height: 1.5;
}

ul.thumbnails span, ul.thumbnails2 span {
	display: block;
	font-size: 75%;
	}

ul.thumbnails img, ul.thumbnails2 img {
	display: block;
	margin-bottom: 10px;
}

ul.thumbnails a:visited, ul.thumbnails2 a:visited {
	color: #606280;
	text-decoration: none;}

ul.thumbnails a {
	width: 150px;
	/*margin: 10px 10px 8px;*/ margin: 4px 5px;
}

ul.thumbnails a:hover, ul.thumbnails2 a:hover {
	border: 1px solid #ccc;
	color: #FFF;
	/*background: #296283;*/ background: #9A9CB3;
}

/* ----- Inspiration page thumbnails ----- */

ul.thumbnails2 a {
	width: 200px;
	/*margin: 10px 10px 8px;*/ margin: 4px 5px;
}

ul.thumbnails2 span.title {
	font-size: 100%;}


/* ----- Others ----- */

.fleft {
	float: left;
	margin-right: 10px;
}

.fright {
	float: right;
	margin-left: 10px;
}

hr {
	background:#EFEFEF;
	height:1px;
	color:#EFEFEF;
	border:none;
	margin-top: 0.5em;
	text-align: center; /*for IE*/
	margin-left:auto; /*centres in FF*/
	margin-right:auto; /*centres in FF*/
}

#inspiration hr {
	clear: left;}
	
/* ---Box styles ---*/

#secondaryContent .infobox {
	width: 245px;
	margin: 25px 0 0 20px;
	padding: 0;
	background: url(../images/box-bottom-grey.gif) no-repeat left bottom;
}


/*#secondaryContent .quote .inner {
	background: url(../images/box-top.gif) no-repeat left top;
	padding-top: 5px;
}*/

#secondaryContent .info .inner {
	background: url(../images/box-top-grey.gif) no-repeat left top;
	padding-top: 6px;
}

/*#secondaryContent .quote h3 {
	background: url(../images/box-mid.gif) no-repeat left bottom;
	margin: 0px;
}*/

#secondaryContent .info h3 {
	background: url(../images/box-mid-grey.gif) no-repeat left bottom;
	margin: 0px;
}

#secondaryContent .inner {
	padding: 0 0 10px;
}

#secondaryContent .infobox h3 {
	padding: 0 10px 0px 25px;
	color: #003E84;
	font-size: 1.3em;
	border-width: 0px;
	background: url(../images/bullet1.gif) no-repeat 10px 50%;
}

#secondaryContent .infobox p {
	padding: 0 10px 0 10px;
}

/* ----- Styles for 2 column layout ----- */

#error #secondaryContent {
	display: none;  	
} 

#error #mainContent {
	width: 600px;
}

#terms-popup #wrapper {
	width: 400px;
	margin: 0px;
	}
	
#terms-popup {
	min-width: 360px;
}

#terms-popup #column1 {
	width:10px;}
	

#terms-popup #content {
	float: none;
	width: 390px;
	padding-left: 10px;
}

#terms-popup #mainContent {
	width:380px;
}

.clearboth {
	clear: both;
}

.clearleft {
	clear: left;
}


/* ----- Shop styles ----- */

#cart td, #aff td  {
	padding: 5px;
}

.detailname, .detailprice, td.prodseparator, .center, #prod-detail table.products .prodname, #prod-detail table.products .prodprice {
	text-align: center;}

.detailname, .cstitle  {
	padding-bottom: 5px;
	border-bottom: 1px solid #DAD5E2;
	font: bold 120% "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#mainContent .cstitle {
	font-size: 120%;
	}

.detaildescription {
	margin-top: 15px;
}

img.prodimage {
	padding: 4px;
	border: 1px solid #CEC6C6;
}

img.catimage, #inspiration #mainContent img {
	border: 2px solid #E1D9DE;
}

img.buybutton {
}

table.cobtbl td {
	padding: 0px 10px;
}

td.catname {
	padding: 10px 0 10px 10px;
	border-bottom: 1px solid #DAD5E2;
}

#categories td p {
	margin: 0;
}

td.allcatdiscounts, td.allproddiscounts {
	color: #f60;
	font-weight: bold;
	border-bottom: 1px dotted #ccc;
}

div.proddiscounts {
	padding-bottom: 15px;}

	
/* ----- Contact form ----- */

form#ContactKaren

 {  /* set width in form, not fieldset (still takes up more room w/ fieldset width */
	margin: 0 0 10px 10px;
	padding: 0;
	/*min-width: 500px;*/
	max-width: 100%;
	width: 414px;
	font-size: 110%;
}

form#ContactKaren fieldset {
	padding: 10px;        /* padding in fieldset support spotty in IE */
	margin: 0;
	border-top: 2px solid #DCD3C9;
	border-right: 1px solid #DCD3C9;
	border-bottom: 2px solid #DCD3C9;
	border-left: 1px solid #DCD3C9;
}

form#ContactKaren label { 
	display: block;  /* block float the labels to left column, set a width */
	float: left; 
	width: 150px; 
	padding: 0; 
	margin: 5px 0 0; /* set top margin same as form input - textarea etc. elements */
	text-align: right; 
}

form#ContactKaren fieldset legend {
	font-size:1.1em; /* bump up legend font size, not too large or it'll overwrite border on left */
	color: #826474;
	letter-spacing: 1px;
                       /* be careful with padding, it'll shift the nice offset on top of border  */
}

form#ContactKaren input, form#ContactKaren textarea, form#ContactKaren select {
	/* display: inline; inline display must not be set or will hide submit buttons in IE 5x mac */
	width:auto;      /* set width of form elements to auto-size, otherwise watch for wrap on resize */
	margin:5px 0 0 10px; /* set margin on left of form elements rather than right of
                              label aligns textarea better in IE */
}

form#ContactKaren input#reset {
	margin-left:0; /* set margin-left back to zero on reset button (set above) */
}

textarea { overflow: auto; }

form#ContactKaren small {
	display: block;
	margin: 0 0 5px 160px; /* instructions/comments left margin set to align w/ right column inputs */
	padding: 1px 3px;
	font-size: 85%;
}

form#ContactKaren .required {
	font-weight:bold;} /* uses class instead of div, more efficient */

form#ContactKaren br {
	clear:left; /* setting clear on inputs didn't work consistently, so brs added for degrade */
}