/************************************************

LAURENCE KELL
Screen Stylesheet, 21.07.07

http://www.bellamystudio.com

************************************************/

/* GENERAL SELECTORS
----------------------------------------------------------*/
* { margin: 0; padding: 0; color: #333; line-height: 1.4; }
body { font: normal 70% "Lucida Grande", Tahoma, Verdana, Arial, Helvetica, sans-serif; background: #ada78b url('../images/template/bg.png'); color: #333;}

h1, h2, h3 { font:normal Arial, Helvetica, sans-serif}
a  { color: #f06; text-decoration: none; }
a:hover, a:focus { color: #f39  }

p { margin-bottom: 1.35em; }
p, ul, ol, dd { font-size: 13px; }
dl, dt, dd { padding:0; margin:0 }
img { border:none }

.center {
text-align: center;
}

ul {
	list-style: square;
	margin-top: 3px;
	margin-bottom: 3px;
	margin-left: 1em;
	padding-left: 1em;
}


/* TEMPLATE CONTAINERS
----------------------------------------------------------*/

#topwrapper {
	margin: 0 auto;
	width: 954px
}
#midwrapper {
	width:100%;
	left:0;
	position:absolute;
	top:125px;
	padding:10px 0 0 0;
	background-color:white
}
#topcontainer, #midcontainer {
	position:relative;
	width: 954px;
	margin:0 auto;
	clear:both
}

#header {
	margin: 0 0 0 0;
	padding: 0 10px 5px 10px;
	height:90px
}
#header h1 {
	text-indent:-999em;
	margin:0;
	overflow:hidden
}
#header a {
	display:block;
	width:300px;
	height:88px;
	background:url('../images/template/laurence_kell.png') top left no-repeat;
}

#content {
	float: left;
	margin: 15px 0;
	padding: 0 0 10px 15px;
	min-height:400px
}

#footer {
	width:100%;
	background-color:#ada78b;
	margin: 0;
	padding: 2% 0;
	font-size: 85%;
	letter-spacing: 0.09em;
	clear:both;
}
#insidefooter {
	width:934px;
	margin:10px auto;
	text-align:center
}
#footer p {
	color: #fff;
	margin:10px 20px;
	padding:0;
}

/* NAVIGATION 
----------------------------------------------------------*/

#nav {position: absolute; left: 0px; width: 934px; top:93px; height: 30px; padding: 0; margin: 0}
#nav li {list-style: none; margin: 0; padding: 0; display: inline}
#nav li a:link, #nav li a:visited {display: block; position: absolute; top: 0; height: 30px; cursor:pointer; z-index:1}

#nav li a:link, #nav li a:visited  {
	display: block; position: absolute; overflow: hidden; font-size: 1px; line-height: 1px; color: #fff; height: 0; padding: 30px 0 0 0;
	}

#nav .painter a {left:10px; width:340px; background: url('../images/template/nav.png') 0 0}
#nav .paintings a {left: 350px; width: 127px; background: url('../images/template/nav.png') -350px 0;}
#nav .about a {left: 477px; width: 86px; background: url('../images/template/nav.png') -477px 0;}
#nav .commissions a {left: 563px; width: 153px; background: url('../images/template/nav.png') -563px 0;}
#nav .exhibitions a {left: 716px; width: 136px; background: url('../images/template/nav.png') -716px 0;}
#nav .contact a {left: 852px; width: 102px; background: url('../images/template/nav.png') -852px 0;}

/* rollover states */
#nav .paintings a:hover {background-position: -350px -30px; }
#nav .about a:hover {background-position: -477px -30px;}
#nav .commissions a:hover {background-position: -563px -30px;}
#nav .exhibitions a:hover {background-position: -716px -30px;}
#nav .contact a:hover {background-position: -852px -30px;}

/* 'current' states */
#nav.gallery .paintings a {background-position: -350px -60px;}
#nav.about .about a {background-position: -477px -60px;}
#nav.commissions .commissions a {background-position: -563px -60px;}
#nav.exhibitions .exhibitions a {background-position: -716px -60px;}
#nav.contact .contact a {background-position: -852px -60px;}

/* sorry, couple of ie6 fixes */
#Nav li a {cursor: pointer; background:inherit}

/* FLOATS
----------------------------------------------------------*/

	#content, #leftColumn, #rightColumn, .picHolder,
	.painting, .thumb {
		float:left
	}


/* CONTAINER STYLING 
----------------------------------------------------------*/

#leftColumn {
	width:560px;
	margin-right:15px
}
#rightColumn {
	width:345px;
	margin-left:15px
}

/* GALLERY STYLING 
----------------------------------------------------------*/

.picHolder {
	width:560px;
	text-align:center
}
.picHolder .painting {
	width:560px;
	overflow:hidden;
	text-align:center;
	display:table-cell;
	vertical-align:middle;
	position:static;
}

.thumb {
	width:100px;
	height:100px;
	overflow:hidden;
	margin:0 10px 10px 0;
	border:2px solid #fff
}
a.thumb:hover {
	/*border:2px solid #999*/
}

/* General form fieldset layout (two column)
----------------------------------------------------*/
fieldset {
	margin:0;
	padding:0;
	border:0
	}
form {padding:0;margin:0}
form legend {font-size:120%;font-weight:bold;text-decoration:underline;color:#333;padding:0;margin:0 0 .5em 0}
form p {padding:0 0 .5em 1em;clear:both}
form label {float:left; width:100px; margin:0 10px 0 0; font-size:1em}
form input.input, form textarea {border:1px solid #cdcdcd; font-family: Arial, Helvetica, sans-serif; font-size:small; color:#665}
form input.input:focus, form textarea:focus {border:1px solid #ada78b;}

/* Misc styling
----------------------------------------------------*/
.exhibitions h3 {
	width:100%;
	border-bottom:1px solid #c5be98
}