/* ---------------------------
Author: IT-Serve Web Design, Fife
Author URL: http://www.itserve.co.uk
Website: http://www.artbykenroberts.com
Version: 1.0
------------------------------ */

/* ITEMS TO NOTE

	yellow:				fdf157
	light yellow:		fef8ab
	lighter yellow:		fefbd5	
	purple:				522783
	blue:				1477b8
	green:				28d631
	orange:				ea4c25
	grey:				a2a2a2
	light grey:			d8d8d8
	wall grey:			ecebea
	
*/

@import url("reset.css");

body {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 62.5%;
	color: #777;
	background: #d8d8d8;
	}
	

/* Typography
------------------------------ */
p {font-size: 1.2em; margin-bottom: 1em; line-height: 1.5em;}
em {font-style: italic;}
strong {font-weight: bold;}
address {font-style: normal; font-size: 1.2em; line-height: 1.5em; margin-bottom: 0.5em;}
blockquote p {font-style: italic;}
cite {font-style: normal;}
sup {vertical-align: super; font-size: 0.8em;}
sub {vertical-align: sub; font-size: 0.8em;}
ul {margin-bottom: 1.5em;}
ul li {font-size: 1.2em; line-height: 1.5em; list-style-type: disc;}

/* Headings */
h1 {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 2.5em;
	line-height: 1em;
	font-weight: normal;
	margin-bottom: 0.2em;
	}

h2 {
	font-size: 1.8em;
	line-height: 1em;
	font-weight: bold;
	margin-bottom: 0.5em;
	}

h3 {
	font-size: 1.6em;
	line-height: 1em;
	font-weight: bold;
	margin-top: 1.2em;
	margin-bottom: 0.5em;
	}
	
h1, h2 {display: none;}

/* Links */
a, a:link {text-decoration: underline; color: #777;}
a:visited {color: #a9a9a9;}
a:hover {text-decoration: underline; color: #555;}
.external {background: url(../img/icon-externallink.gif) no-repeat right center; padding-right: 12px;}

#footer a, #footer a:link {color: #a2a2a2; text-decoration: none;}
#footer a:hover {color: #d8d8d8;}

/* Classes */
.clear {clear: both;}
.col-l {width: 400px; float: left;}
.col-r {width: 400px; float: left; margin-left: 100px;}
	#home-page .col-l {width: 300px; float: left;}
	#home-page .col-r {width: 450px; float: left; margin-left: 150px;}
	#links-page .col-l {width: 290px; float: left;}
.float-l {float: left; margin: 0 10px 1em 0;}
.float-r {float: right; margin: 0 0 1em 10px;}
#about-gallery-page .float-l {margin-right: 20px;}
	a.float-l img {border: 1px solid #777;}
	a.float-r img {border: 1px solid #777;}
	a:hover.float-l img {border: 1px solid #000;}
	a:hover.float-r img {border: 1px solid #000;}

	#portraits-page a.float-r img, #portraits-page a.float-l img, #about-gallery-page a.float-l img {border: none;}
	#portraits-page a.float-r.enigma {margin-top: 5px;}
	#portraits-page a.float-l {margin-right: 16px;}
		#about-gallery-page #gallery-images a.float-l {margin-right: 8px;}
		#portraits-page a.float-l.last, #about-gallery-page a.float-l {margin-right: 0;}
	
/* Layout
------------------------------ */
#siteframe-top {width: 1020px; background: #d8d8d8 url(../img/border-top.png) no-repeat top center; padding-top: 11px; margin: 0 auto;}
#siteframe-wrap {width: 1020px; background: #d8d8d8 url(../img/border-mid.png) repeat-y center;}
#siteframe-bottom {width: 1020px; background: #d8d8d8 url(../img/border-bot.png) no-repeat bottom center; padding-bottom: 11px;}

#wallrepeat {
	margin: 0 auto;
	width: 1000px;
	background: #ecebea url(../img/wallstrip.jpg) repeat-y center; 
	}

#outer {
	margin: 0 auto;
	width: 1000px;
	background: transparent url(../img/wall.jpg) no-repeat top left;
	}

#wrap {
	margin: 0 auto;
	width: 900px;
	}


/* HEADER */
#header {
	width: 900px;
	float: left;
	margin-bottom: 20px;
	}

#home-page #header {margin-bottom: 10px;}
#paintings-page #header {margin-bottom: 10px;}

	#logo {
		float: left;
		padding-top: 20px;
		}

	#nav {
		margin-top: 1.5em;
		padding: 0;
		float: right;
		font-weight: bold;
		font-size: 1em;
		}
		
		#navlist li {
			list-style: none;
			margin: 0 0 1em 15px;
			float: left;
			}
			
		#home-page #navlist li {
			list-style: none;
			margin: 0;
			float: none;
			font-size: 1.5em;
			}
		
			#navlist li a, #navlist li a:link{
				color: #a2a2a2;
				text-transform: uppercase;
				text-decoration: none;
				display: block;
				padding: 0 4px;
				}
				
			#navlist li a:hover {
				color: #fff;
				background: #bfbfbf;
				}
				
			#navlist li a:active, #navlist li a.on {
				color: #f9eb5d;
				background: none;
				}
				
			/* Home Page navigation */	
			#FlashHomeNav {
				display: block;
				margin: 25px 0 0 -5px;
				}


/* CONTENT */
#content {
	width: 900px;
	height: 586px;
	clear: both;
	/*float: left;*/
	position: relative;
	z-index: 10;
	}
	
#home-page #content {height: 100%;}

#about-page #content,
#about-gallery-page #content,
#portraits-page #content,
#news-page #content, 
#exhibitions-page #content,
#purchase-page #content,
#links-page #content,
#contact-page #content {
	height: 566px; 
	padding-top: 20px;
	}
	
	#homeselection {
		width: 412px;
		float: left;
		}
		
		#homeselection li {
			float: left;
			list-style: none;
			margin-right: 18px;
			}
			
			#homeselection #hs-large {
				margin: 0 0 20px 0;
				}
				
			#homeselection #hs-3 {
				margin-right: 0;
				}
	
	#subnav {
		margin: 0 0 1.5em 0;
		padding: 0;
		float: left;
		}
		
		#subnav li {
			list-style: none;
			float: left;
			border-left: 1px solid #a2a2a2;
			padding: 0 10px;
			line-height: 1em;
			}
			
			#subnav li.first {
				padding-left: 0;
				border-left: none;
				}
		
				#subnav li a, #subnav li a:link {
					color: #f60;
					text-decoration: underline;
					}
			
				#subnav li a:hover {
					color: #000;
					}
			
				#subnav li.on a {
					font-weight: bold;
					text-decoration: none;
					color: #777;
					}

#paintings-page #content {
	margin-left: 50px;
	padding-top: 10px;
	}

	#gallerygrid {
		width: 900px;
		margin: 0 auto;
		}
	
		#gallerygrid li {
			list-style: none;
			float: left;
			margin: 0 10px 10px 0;
			}
			
		#gallerygrid li a:hover {
			opacity: 0.6;
			}

#newsslider {clear: both;}

#exhibitions-page ul#event {width: 450px; float: left;}

	#exhibitions-page ul#event li {
		float: left;
		list-style: none;
		margin: 0 10px 0 0;
		}

/* Painting Information panel */
.painting-info {
	width: 400px;
	margin: 40px auto 0 auto;
	}

	.landscapesmall .painting-info, .landscapemed .painting-info, .landscapebig .painting-info {width: 546px;}

	.painting-info dl {
		float: left;
		font-size: 1.4em;
		line-height: 1.4em;
		}
		
		.painting-info dl dt {
			font-weight: bold;
			font-style: italic;
			font-size: 1.1em;
			}
		
		.painting-info dl dt, .painting-info dl dd {
			border-bottom: 1px solid #a2a2a2;
			padding-right: 0.5em;
			}
		
		.painting-info dl dd.pi-price {
			border-bottom: none;
			}
		
	.painting-info img.sizeguide {
		float: right;
		width: 121px;
		}


/* Purchase Page */
#purchase-page .col-l {width: 350px;}
#purchase-page .col-r {width: 450px; margin-left: 50px;}
	#purchase-page .col-r .col-l {width: 200px;}
	#purchase-page .col-r .col-r {width: 225px; margin-left: 25px;}

#purchase-page strong {color: #1477b8;}
	#purchase-page span strong {font-size: 1em; line-height: 1.2em; font-weight: bold;}
	
	
/* CONTACT FORM */
#contact-page .col-l {width: 450px;}
#contact-page .col-r {width: 350px; margin-left: 50px;}
	#contact-page .col-l .col-l {width: 200px;}
	#contact-page .col-l .col-r {width: 225px; margin-left: 25px;}

#contact-page strong {color: #1477b8;}

form {clear: both;}

legend {
	font-size: 1.2em;
	margin-bottom: 0.5em;
	font-weight: bold;
	}

label {display: block;}

input.txt, textarea, select {
	width: 198px;
	border: 1px solid #cecece;
	border-top-color: #8e8e8e;
	font-size: 1em;
	padding: 2px;
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	color: #3f3f3f;
	background: #fafafa;
	}
	
	textarea {height: 170px; width: 223px;}
	select {width: 203px;}
	input.button {cursor: pointer;}

#map_canvas {
	width: 350px;
	height: 341px;
	border: 1px solid #cecece;
	}
	
#contact-info {
	width: 450px;
	float: left;
	margin: 0 0 2em 0;
	}

	#contact-info span {font-size: 1.4em; font-weight: bold;}
		
		
/* FOOTER */
#footer {
	width: 1000px;
	height: 214px;
	clear: both;
	background: #ecebea url(../img/floor-brown.jpg) no-repeat bottom center;
	}
	
#home-page #footer {
	background: #ecebea url(../img/floor-beige.jpg) no-repeat bottom center;
	}
		
#paintings-page #footer, #portraits-page #footer {
	background: #ecebea url(../img/floor-brown2.jpg) no-repeat bottom center;
	}
	
	#f-content {
		width: 900px;
		float: left;
		margin: 150px 0 0 50px;
		background: transparent url(../img/footer-bg.png) repeat center;
		color: #aaa;
		}
		
		#f-content p {
			float: left;
			margin-bottom: 0;
			line-height: 20px;
			font-size: 1.1em;
			}
			
			#f-content #copy {
				background: transparent url(../img/logo-blocks.png) no-repeat center left;
				padding-left: 80px;
				} 
			
			#f-content #its {
				float: right;
				margin-right: 10px;
				}


/* DECOR */
#decor {
	float: left; 
	margin-top: -459px;
	position: relative;
	z-index: 5;
	}

	#frame {
		float: left;
		margin-top: 118px;
		}
	
	#sign {
		float: left;
		margin-left: 56px;
		}
	
		#news-page #sign {
			margin-top: 5px;
			margin-left: 500px;
			}

	#canvas {
		float: left;
		margin-top: 5px;
		margin-left: 500px;
		}

		#portraits-page	#canvas {
			margin-left: 650px;
			}