/* 
Project: Evergreen art online
Filename: screen.css
Date: 01/07/10
*/



body {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	height: 100%;  
	font-size: 62.5%;	
	color: #000;
	text-align: center;
	font-family: georgia, arial, verdana, sans-serif;
    }





body a img {
	border: none;
}


.clearing{	
	clear: both;
}




/*------ clear standard browser styles ------*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}



/*------ general styles ------*/


.clear {
	clear: both;
	overflow: hidden;
	line-height: 0 !important;
	height: 0 !important;
	font-size: 0 !important;
	margin: 0 !important;
	}


.disguise {
	position: absolute;
	left: -10000px;
	}
	
.hide {
	display: none;
	}
	
	
	
/* http://positioniseverything.net/easyclearing */
.clearfix:after {
	content: "."; 
	display: block; 
	height: 0;
	clear: both; 
	visibility: hidden;
	}

.clearfix {
	display: inline-table;
        min-height: 0;
	}

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */


a:focus,
a:hover,
a:active{
	outline:none;
}


.imageRight{
	float: right;
	border: 1px solid #ccc;
	background: #fff;
	padding: 5px;
	margin: 0 0 15px 15px;
	}
	

.imageLeft{
	float: left;
	border: 1px solid #ccc;
	background: #fff;
	padding: 5px;
	margin: 0 15px 15px 0;
	}	
	
.imageCentre{
	border: 1px solid #ccc;
	background: #fff;
	padding: 5px;
	margin: 0 auto 15px auto;
	}	
	
.noborder{
	border: none;
	}


/*------ wrap ------*/


#wrap {
	margin: 0 auto 0px auto;
	padding: 0 0 0 0;
	width: 980px;
	text-align: left;
}



/*------ header ------*/


#header {
	float: left;
	width: 980px;
	}
	
	
#header #logo,
#header #logo a{
	float: left;
	width: 252px;
	height: 109px;
	text-indent: -9999px;
	background: url(img/evergreen-art-online.gif) no-repeat 0 0;
	}	
	
	
#header .social{
	float: right;
	padding: 35px 0 10px 0;	
	}
	
	
#header .social li{
	float: left;
	padding: 0 0 0 10px;
	}	
	
	
#header .headerTools{
	float: right;	
	width: 678px;
	}
	
	
#header .secure{
	float: right;
	text-align: right;
	font-size: 1.2em;
	color: #666666;
	}	
	
	
#header .secure img{
	vertical-align: middle;
	}
	
	
#header .newsletter{
	float: right;
	width: 194px;
	font-size: 1px;
	color: #b3b3b3;
	height: 35px;
	margin: 0 0 0 25px;
	text-indent: -9999px;
	background: url("img/newsletter-link.gif") no-repeat 0 0;
	}
	
	
#header .newsletter a{
	float: right;
	width: 194px;
	height: 35px;
	}
	
	
	
/*------ nav ------*/

#nav{
	float: left;
	width: 100%;
	background: #473F0C;
	padding: 4px 0 4px 0;	
	border-bottom: 24px solid #E1E1E1;
	}

#nav ul {
	margin: 0 auto 0px auto;
	width: 980px;
	text-align: left;
	font-size: 1.3em;
}	


#nav ul li{
	float: left;
	border-right: 1px solid #fff;	
	margin: 0px 7px 0px 0;
	}
	
	
#nav ul li a{
	float: left;
	text-decoration: none;
	color: #fff;
	padding: 3px;
	margin: 0 7px 0 0;
	}
	
#nav ul li a:hover,
#nav ul li.here a{	
	background: #8bcd00;
	}



/*------ content ------*/


#content {
	float: left;
	width: 980px;

	}
	
	
/*------ homeMain ------*/


#homeMain {
	float: left;
	width: 680px;
	padding: 10px 0 0 25px;
	background: url(img/homeMain-bg.jpg) no-repeat 25px 77%;
	}	
	
#homeMain .more{
	float: right;
	width: 250px;
	height: 30px;
	}
	
	
#homeMain .more strong{
	float: left;
	width: 220px;
	height: 30px;
	test-indent: -9999px;
	line-height: 30px;
	color: #333333;
	font-size: 1.8em;
	text-decoration: none;
	font-weight: normal;
	}
	
#homeMain .more a{
	float: right;
	width: 30px;
	height: 30px;
	text-indent: -9999px;
	background: url(img/more-bg.gif) no-repeat 100% 0 !important;		
	}
	
	
#homeMain h2{
	font-size: 1.6em;
	color: #D1524B;
	height: 50px;
	}
	
	
#homeMain .featured{
	float: left;
	width: 680px;
	margin-bottom: 20px;
	background: url(img/featured-bg.jpg) no-repeat 0 27px;
	}
	
	
#homeMain .featured dl{
	float: left;	
	width: 194px;
	}
	
	
#homeMain .featured dl dt{
	text-align: center;
	height: 37px;
	font-size: 2em;
	}
	
	
#homeMain .featured dl.first{
	margin: 0 0 0 9px;
	}
	
* html #homeMain .featured dl.first{
	margin: 0 0 0 5px;
	}	
	
#homeMain .featured dl.second{
	margin: 0 0 0 36px;
	}
	
#homeMain .featured dl.third{
	margin: 0 0 0 37px;
	}	
	
	
#homeMain .featured dl .summary{
	font-size: 1em;
	color: #333333;
	padding: 10px 10px;
	}
	
	
#reflection{
	float: left;
	width: 680px;
	padding-top: 260px;	
	}
	
#reflection img{
	display: block;
	}
	
#reflection li{
	float: left;
	}
	
	
#reflection li.first{
	margin: 0 0 0 9px;
	}
	
#reflection li.second{
	margin: 0 0 0 36px;
	}
	
#reflection li.third{
	margin: 0 0 0 37px;
	}		


/*------ staticMain ------*/


#staticMain {
	float: left;
	width: 705px;
	padding: 10px 0 20px 0;
	}	
	
	
#staticMain h1{
	font-size: 2.7em;
	color: #D1524B;
	padding: 0 0 15px 0;
	}	
	

#staticMain h2{
	font-size: 1.8em;
	color: #000000;
	padding: 0 0 15px 0;
	}		
	

#staticMain p{
	font-size: 1.2em;
	line-height: 1.5em;
	padding: 0 0 15px 0;
	}	
	
#staticMain p.category{
	font-size: 1.4em;
	margin-top: -10px;
	line-height: 1.5em;
	padding: 0 0 15px 0;
	color: #473F0C;
	}		
	
	
#staticMain ul{
	font-size: 1.2em;
	padding: 0 0 15px 0;
	}	
	
	
#staticMain ul li{
	padding: 0 0 10px 20px;
	background: url(img/bullet-green.gif) no-repeat 5px 3px;
}


#staticMain p.archive{
	float: left;
	width: 705px;
	padding-top: 30px !important;
	}


#staticMain a{
	color: #8bcd00;
	font-weight: bold;
	text-decoration: none;
	}
	
#staticMain a:hover{
	text-decoration: underline;
	}	
	
	
#staticMain #map{
	float: left;
	width: 705px;
	margin: 15px 0;
	border: 1px solid #cccccc;
	}
	
	
/*------ staticMain ------*/


#staticMain .story{
	float: left;
	width: 705px;
	border-top: 1px solid #ccc;
	margin: 10px 0 0 0;
	padding: 20px 0 0 0;
	}	
	
	
	
	
/*------ homeSide ------*/


#homeSide {
	float: right;
	width: 205px;
	padding: 10px 0;
	}
	
	
#homeSide h3{
	font-size: 1.6em;
	color: #D1524B;
	}	
	
#homeSide .feature{
	float: right;
	width: 193px;
	padding: 20px 0;
	}
	
#homeSide .feature img{
	padding: 0 0 10px 0;
	}
	
	
#homeSide .feature p{
	padding: 0 0 10px 0;
	}	
	

#homeSide .feature h4{
	float: left;
	width: 193px;
	height: 39px;
	text-indent: -9999px;
	}	
	
#homeSide .blog h4{
	background: url(img/from-the-blog.gif) no-repeat 0 0;
	}
	
#homeSide .cafe h4{
	background: url(img/in-the-cafe.gif) no-repeat 0 0;
	}	
	
	
#homeSide .blogLink	a{
	float: right;
	width: 26px;
	height: 26px;
	text-indent: -9999px;
	background: url(img/green-arrow.gif) no-repeat 0 0;
	}
	
#homeSide .cafeLink	a{
	float: right;
	width: 193px;
	height: 38px;
	text-indent: -9999px;
	background: url(img/evergreen-art-cafe.gif) no-repeat 0 0;
	}	
	
	
	
/*------ menu ------*/


#menu {
	float: left;
	width: 170px;
	padding: 20px 0;
	}
	
#homeSide #menu{
	width: 205px;
	}
	
	
#menu h3{	
	float: left;
	background: #80C41C;
	padding: 5px;
	color: #fff;
	font-size: 1.2em;
	}
	
	
#menu ul{
	float: left;
	padding: 10px 0;
	width: 170px;	
	font-size: 1.2em;
	}
	

#menu ul a{
	color: #333;
	text-decoration: none;
	}
	

#menu ul a:hover{
	text-decoration: underline;
	}	
	
	
/*------ mainContent ------*/


#mainContent {
	float: right;
	width: 810px;
	padding: 20px 0;	
	}	
	
	

/*------ featured ------*/	


#mainContent .featured{
	float: left;
	width: 304px;
}


#mainContent .border{
	float: left;
	border: 2px solid #3A491B;
}

.hidden {
display: none;
}

#prevNext {
position: relative;
margin-bottom: -25px;
}

#prevNext img {
position: relative;
z-index: 2;
cursor: pointer;
}


#slides div{
	float: left;
	width:300px;
	height: 300px;
	position: relative;
}

.featured p{
text-align: center;
color: #000;
margin: 0;
padding: 4px 0;
bottom: 0;
	width:300px;
font-size: 1.2em;
position: absolute;
background: #fff;
opacity: .7;
filter:alpha(opacity=70);
}


#slides div .closer{
	position: absolute;
	top: 10px;
	right: 10px;
	}


.jFlowPrev{
	position: absolute;
	top: 313px;
	left: 0;
	}
	
	
.jFlowNext{
	position: absolute;
	top: 313px;
	left: 253px;
	}		
	
	
.featured h4{
	float: left;
	width: 240px;
	border: 1px solid #d3d3d3;
	text-align: center;
	padding: 4px 0;
	margin: 10px 0 10px 30px;
	font-size: 1.2em;
	}
	
	
	
	
/*------ artist ------*/


#mainContent .artist{
	float: right;
	width: 810px;
	padding: 0 0 30px 0;
	border-bottom: 1px solid #4C4C4C;
	}	
	
	
#content .bioBack{
	float: left;
	width: 775px;
	height: 26px;
	line-height: 26px;
	padding: 30px 0 0 35px;
	margin: 0 0 0 170px;
	font-size: 1.8em;
	background: url(img/green-back-arrow.gif) no-repeat 0 30px;
	}
	
	
* html #content .bioBack{	
	padding: 30px 0 0 18px;
	margin: 0 0 0 85px;	
	}
	

#content .bioBack a{
	color: #455C2A;
	text-decoration: none;
	}


#mainContent .artist img{
	float: left;
	background: #fff;
	padding: 1px;
	border: 2px solid #3A491B;
	}
	
	
#mainContent .artist .text{
	float: right;
	width: 450px;
	color: #4c4c4c;
	}


#mainContent .artist .text h1{
	font-size: 2.7em;
	padding: 0 0 0px 0;
	color: #455C2A;
	}
	
#mainContent .artist .text h2{
	font-size: 2.7em;
	padding: 0 0 15px 0;
	color: #333333;
	}	


#mainContent .artist .text p{
	font-size: 1.1em;
	padding: 0 0 10px 0;
	}
	
	
#mainContent .artist .text img{
	float: none;
	background: #fff;
	padding: 20px 0 5px 0;
	border: none;
	}	

#mainContent .artist .text a{
	color: #455C2A;	
	font-weight: bold;
	text-decoration: none;
	}
	
#mainContent .artist .text a:hover{
	text-decoration: underline;
	}	
	
	
#mainContent .artist .text #freeform{
	border: 1px solid #ccc;
	padding: 10px 10px 0 10px;
	margin: 0 0 20px 0;
	background: #f3f3f3;
	}
	
	
#mainContent .artist .text #freeform .field input,
#mainContent .artist .text #freeform .field textarea{
	border: 1px solid #ccc;
	padding: 3px;
	background: #ffffff;
	}
	
/*------ filter ------*/	


#mainContent #filter{
	float: right;
	width: 480px;
	}
	
#mainContent #filter.artistFilter{
	float: left;
	width: 810px;
	padding: 30px 0 10px 0;	
	}	
	

#mainContent #filter h1{
	float: left;
	width: 480px;	
	height: 74px;
	text-indent: -9999px;
	background: url(img/welcome-to-evergreen.gif) no-repeat 0 0; 
	}
	
	
#mainContent #filter dt{
	font-size: 1.3em;
	}
	

#mainContent #filter dd{
	float: left;
	width: 148px;
	padding: 18px 0 7px 0;
	margin: 0 10px 0 0;
	background: url(img/filter-shadow.gif) no-repeat 0 100%; 
	}	
	
#mainContent #filter dd a{
	float: left;
	border: 1px solid #d9d9d9;
	}
	

#mainContent #filter dd a img{
	float: left;
	width: 136px;
	border: 1px solid #fff;
	}	

#mainContent #filter dd a:hover,
#mainContent #filter dd a:hover img,
#mainContent #filter dd a.here,
#mainContent #filter dd a.here img{
	border: 1px solid #3A491B;
}
	
	
/*------ art ------*/


#art{
	float: left;
	width: 810px;
	}
	
#art .item{
	float: left;
	width: 265px;
	height: 120px;
	margin: 30px 0 0 0;
	padding: 0 0 0 0;
	}
	

#art .item a.artLink{
	float: left;
	width: 245px;	
	padding: 5px 5px 5px 5px;	
	}
	
	
#art .item a.artLink:hover{	
	background: #f3f3f3;
	}
	
#art .item img{
	float: left;
	background: #fff;
	padding: 1px;
	border: 1px solid #3A491B;
	}
	
#art .item p img{
	float: left;
	background: #fff;
	padding: 0px;
	border: none;
	}	
	
	
#art .item .name,
#art .item h3{
	float: right;
	width: 155px;
	font-size: 1.3em;
	font-weight: bold;
	color: #455C2A;
	padding: 0 0 10px 0;	
	}
	
#art .item h3{	
	padding: 0 20px 10px 0;	
	}
	
	
#art .item .type,
#art .item p{
	float: right;
	width: 155px;
	padding: 0 0 8px 0;
	}
	
	
#art .item p{
	padding: 0 20px 8px 0;
	font-size: 1.1em;
	}
	
	
#art .item p a{
	float: none;
	width: auto;	
	padding: 0px 0px 0px 0px;	
	}
	
#art .item p a:hover{
	text-decoration: underline;
	}
	
#art .item .type span{
	float: left;
	width: 42px;
	padding: 2px 2px;
	margin: 2px 2px 2px 0;
	text-align: right;
	font-weight: bold;
	border: 1px solid #3A491B;
	background: #fff;	
	}
	
#art .item .type span.all{	
	background: #FFFFFF url(img/icon-all.gif) no-repeat 0 50%;
	}
	
#art .item .type span.originals{	
	background: #FFFFFF url(img/icon-originals.gif) no-repeat 0 50%;
	}
	
#art .item .type span.limited{	
	background: #FFFFFF url(img/icon-limited.gif) no-repeat 0 50%;
	}	
	
#art .item .type span.sculptures{	
	background: #FFFFFF url(img/icon-sculptures.gif) no-repeat 0 50%;
	}		
	
#art .item .type span.books{	
	background: #FFFFFF url(img/icon-books.gif) no-repeat 0 50%;
	}		
	
#art .item .type span.jewellery{	
	background: #FFFFFF url(img/icon-jewellery.gif) no-repeat 0 50%;
	}	
	
	
#art .item .view{
	float: right;
	width: 155px;
	}	
	
#art .item a{
	color: #333;
	text-decoration :none;
	}

	
/*------ preFooter ------*/


#preFooter {
	float: left;
	width: 980px;
	padding: 60px 0 280px 0;
	background: url(img/homeMain-bg.jpg) no-repeat 50% 100%;	
	}
	
#news{
	float: left;
	width: 440px;
	}
	

#news h4{	
	float: left;
	width: 442px;
	padding: 5px 10px;
	background: #3A310A;
	color: #fff;
	font-size: 1.2em;
	}


* html #news h4{
	width: 432px;
	padding: 5px 0px 5px 10px;
	}
	
	
#news dl{
	float: left;
	width: 360px;
	padding: 0 0 0 20px;
	margin: 20px 0 0 0;
	color: #454545;	
	background: url(img/bullet.gif) no-repeat 7px 5px;
	}
	
* html #news dl{
	padding: 0 0 0 20px;
	}

#news dt,
#news dd{
	float: left;
	width: 200px;
	padding: 0 0 10px 0;
	}
	

#news dt a{
	color: #000;
	text-decoration: none;
	}

#news dd a{
	color: #455B2A;
	text-decoration: none;
	}	
	
#news dd a:hover{
	text-decoration: underline;
	}	


#news .image{
	float: right;
	width: 84px;
	height: 98px;
	background: url(img/news-image-bg.jpg) no-repeat 0 0;
	}
	
	
#mailingList{
	float: left;
	width: 230px;	
	}	

	
#mailingList h4{	
	float: left;
	width: 230px;
	padding: 5px 0;
	background: #3A310A;
	color: #fff;
	font-size: 1.2em;
	}	
	
#TB_ajaxContent h4{
	display: none;
	}
	
#mailingList h5,
#TB_ajaxContent h5{
	float: left;
	width: 230px;
	color: #000;
	padding: 20px 0 10px 0;
	}
	
	
#mailingList p{
	padding: 0 0 5px 0;
	}
	

#TB_ajaxContent p{
	padding: 0 0 15px 0;
	}	
	

#mailingList p.field input,
#TB_ajaxContent p.field input{
	float: left;
	width: 170px;
	border: 1px solid #666666;
	padding: 2px 3px;
	font-family: georgia;
	font-size: 1em;
	}	
	

#mailingList span,
#TB_ajaxContent span{
	float: left;
	width: 90px;
	padding: 0 0 5px 0;
	}
	

.send input{
	float: left;
	border: none;
	margin: 10px 0 0 0;
	padding: 3px 15px;
	background: #7ECC30;
	color: #fff;
	font-size: 1.8em;
	font-family: georgia;
	}
	
	
#mailingList .field,
#TB_ajaxContent .field{
	float: left;
	width: 230px;
	}
	
#mailingList .field label,
#TB_ajaxContent .field label{
	position: absolute;
	left: -10000px;
	}
	

#preFooter #freeform{
	float: right;
	width: 310px;	
	}	
	

* html #preFooter #freeform{
	width: 308px;
	}
	
#preFooter #freeform h4{	
	float: left;
	width: 308px;
	padding: 5px 0;
	margin: 0 0 20px 0;
	background: #3A310A;
	color: #fff;
	font-size: 1.2em;
	}
	
	
#preFooter #freeform label{
	position: absolute;
	left: -10000px;
	}	
	
	
#preFooter #freeform .field input,
#preFooter #freeform .field textarea{	
	float: left;
	width: 282px;
	border: 1px solid #666666;
	padding: 2px 3px;
	margin: 0 0 10px 0;
	font-size: 1em;
	font-family: georgia;
	}

#preFooter #freeform .field input.small {
	float: right !important;
	width: 132px !important;
	height: 24px !important;
	margin: 0 20px 0 0 !important;
}
	
	
#preFooter #freeform .field textarea{
	height: 62px;
	}
		
	
/*------ footer ------*/

#footer{
	float: left;
	width: 100%;
	padding: 0 0 10px 0;	
	border-top: 3px solid #cccccc;
	}


#footer .gutter{
	margin: 0 auto 0px auto;
	padding: 7px 0 0 0;
	width: 980px;
	text-align: left;
	font-size: 1.2em;
	color: #666666;
	}	
	

#footer p{
	float: left;
	}
	

#footer p.website{
	float: right;
	}	
	
#footer p a{
	text-decoration: none;
	color: #666666;
	}		
	
	
#footer p a:hover{
	text-decoration: underline;
	}

#footer p a span{
	color: #3F6AB0;
	}