/* CSS Document */
body 
{	background: #000000 url(/images/colour-BG.jpg) no-repeat top; color:#FFFFFF; }
ul#wrapper
{	background-color: #000000; }
li#sectionTitle
{	background: #111111 url(/structural_images/black-gradient1.png) no-repeat bottom; }
li#sectionAbout, li#sectionContact
{	background:#262626 url(/structural_images/black-gradient1.png) no-repeat bottom; }
li#sectionShop, li#sectionOne, li#sectionTwo
{ 	background:#333333 url(/structural_images/black-gradient1.png) no-repeat bottom; }
li#sectionAbout a:hover, li#sectionContact a:hover, li#sectionShop a:hover, li#sectionOne a:hover, li#sectionTwo a:hover
{ 	background-color: #111111; }

h1
{	background: transparent url(/images/deborahTurner-logo.jpg) no-repeat left top }
h2
{	color: #CCCCCC; }
h3.about
{	color : #FFFFFF; }
h3
{	color: #FFFFFF}
h3.big
{	font-size: 1.7em; }
h4
{	color : #999999; }
ol#navigation
{	background : transparent url(/images/BG-nav.gif) no-repeat bottom left; }

a
{	color: #FFFFFF; }
a.blue
{	color: #00AECF; }
a.pink
{	color: #E9296E; }
a.orange
{	color: #FFA800; }
a.purple
{	color: #660066; }

/* ------------------------------------------------------------------------ */
/* main content - 3 column */
ul.three_col li.col1, ul.three_col li.col2, ul.three_col li.col3
{	border : 1px solid #999999; padding-top:0; margin-top:0;}

ul.three_col p
{	color : #D3D4D4;}

ul.basic li
{	color : #D3D4D4; }

div.intro
{	background: transparent url(/structural_images/BG-crossed.gif) no-repeat center bottom; }

p.text
{	color: #CCCCCC; }
p.expanded_text
{	color: #CCCCCC; }
p.expanded_text strong
{	color : #00AECF; }
p.addend
{	color : #FFFFFF; }
/* ------------------------------------------------------------------------ */
/* zazzle */
div#zazzle{
	background: transparent url(/images/BG-zazz.jpg) no-repeat center;
	border : 1px solid #999999;
}
div#zazzle p.belowProds
{	color:#666666; }
ul.prods li
{	outline : 1px solid #663366; }

/* ------------------------------------------------------------------------ */
/* footer */
ol#footer
{	border-top : 1px dotted #D3D4D4; border-bottom : 1px dotted #D3D4D4; clear : both; }
ol#footer li p
{	color : #D3D4D4; }
/* ---------------- my content! */
ul.three_col{
	width : 750px;
	height : auto;
	margin : 0 0 50px 0;
	padding-top : 216px;
	position: relative;
	background-image: url(/structural-images/BGshift.png);
	background-repeat: no-repeat;
	background-position: top;
}
/* --------------  accordion styling -- */
/* root element for accordion. decorated with rounded borders and gradient background image */
#accordion {
	background:#111111 url(/structural_images/gradient1.png) repeat-x top;
	width: 748px;
	border:1px dotted #333;
	margin: 0 0 3em 0;
}

/* accordion header */
#accordion h2 {
	background:#111111 url(/structural_images/gradient2.png) repeat-y right;	
	margin:0;
	padding:5px 15px;
	font-size:1.3em;
	font-weight:normal;
	border:1px solid #666666;
	border-bottom:1px solid #ddd;
	cursor:pointer;		
	position : relative;
	left : 0;
	width : auto;
	color: #CCCCCC;
}

/* currently active header */
#accordion h2.current {
	background:#111111 url(/structural_images/gradient3.png) repeat-y right;	
	cursor:default;
	color: #00AECF;
	font-size:1.8em;
}

/* accordion pane */
#accordion div.pane {
	border:1px solid #666666;
	border-width:0 2px;
	display:none;
	height:400px;
	overflow:hidden;
	padding:15px;
	color:#fff;
	font-size:12px;
}

/* a title inside pane */
#accordion div.pane h3 {
	font-weight:normal;
	margin:0 0 5px 0;
	font-size:16px;
	color:#999;
}
#accordion div.pane span.main {
	float: right;
	width: 470px;
}
#accordion div.pane span.supp {
	float: left;
	width: 225px;
	padding: 10px 5px;
	border:1px solid #666666;
	-moz-border-radius:15px;
	background-color: #111111;	
}

/* 
	root element for the scrollable. 
	when scrolling occurs this element stays still. 
*/
div.scrollable {
	position:relative;
	overflow:hidden;
	width: 470px;
	height:300px;
	padding:10px 0;
	border:1px solid #666666;
	-moz-border-radius:15px;
	background-color: #111111;
	}
/* 
	root element for scrollable items. Must be absolutely positioned
	and it should have a super large width to accomodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
div.scrollable div.items {	
	/* this cannot be too large */
	width:20000em;	
	position:absolute;
	clear:both;		
	
	/* decoration */
	margin-left:10px;
}

/* single scrollable item */
div.scrollable div.items div {
	float:left;
	
	/* custom decoration */
	text-align:left;
	width:440px;
	padding:0px 5px;
	margin-right: 20px;	
	-moz-border-radius:5px;
	color:#CCCCCC;
}
ul li.a {
	list-style-type: square;
	list-style-position: outside;
	margin-bottom: 4px;
}
/* this makes it possible to add next button beside scrollable */
div.scrollable {
	float:left;		
}

/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage {
	width:66px;
	height:27px;
	background:url(../structural_images/lef-arrow.png) no-repeat;
	float:left;
	margin:0px 10px;
	cursor:pointer;
}

/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
	background:url(../structural_images/lef-arrow_over.png) no-repeat;
}
a.next:hover, a.nextPage:hover {
	background:url(../structural_images/right-arrow_over.png) no-repeat;
}

/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
}

/* next button uses another background image */
a.next, a.nextPage {
	background-image:url(../structural_images/right-arrow.png);
	float:right;
	margin-top: -27px;
}
a.nextPage, a.nextPage:hover, a.next, a.next:hover{
	background-position: right;
}

/* root element for the whole scrollable setup */
div.portfolio {
	position:relative;
	overflow:hidden;
	width: 750px;
	margin: -10px -1px 0 -1px;
	padding: 15px 0 15px 0;
	height:500px;
	border: 1px solid #CCCCCC;
	border-top:2px solid #CCCCCC;
	-moz-border-radius:15px;
	background-color: #333333;
}

/* 
	root element for scrollable items. It is 
	absolutely positioned with large width. 
*/
#thumbs {	
	position:absolute;
	width:20000em;	
	clear:both;
	border:1px solid #222;
}

/* single item */
#thumbs div {
	float:left;
	width:250px;
	height:500px;
	background:#333 url(/structural_images/h150.png) repeat-x 0 190px;
	color:#fff;
	border-left:1px solid #333;
	cursor:pointer;
	text-align:center;
}
#thumbs div img {
	opacity:0.9;
	filter: alpha(opacity=90);
}

/* currently active header */
#thumbs div.hover img {
	opacity:1;
	filter: alpha(opacity=100);
}
#thumbs div.active img {
	opacity:1;
	filter: alpha(opacity=100);
}

/* style when mouse is over the item */
#thumbs div.hover {
	background-color:#444;	
}

/* style when element is active (clicked) */
#thumbs div.active {
	background-color:#663366;
	cursor:default;
}

#thumbs h3, #thumbs p, #thumbs span {
	margin:17px;		
	color:#fff;	
	text-align: left;
}
#thumbs p.type { color:#D2B070; }
#thumbs h3 { font-size: 1.2em; margin-bottom: 20px; }
#thumbs h3 em {
	font-style:normal;
	color:#FFA800;
}
#thumbs img.button {
	float:right; margin: -10px 0 3px 3px; cursor:pointer;
	opacity:0.6;
	filter: alpha(opacity=60);
}
#thumbs div.active img.button {
	opacity:0.9;
	filter: alpha(opacity=90);
}
#thumbs img.button:hover {
	opacity:1;
	filter: alpha(opacity=100);
}