/*Seepaul website Stylesheet */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, 
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, ios,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

body  {
	text-transform: none;
	background-color: #fff;
	margin: 20px;	/* margin: 5% 5% 5% 0%  shorthand */
	padding: 0px;
	font-family: Verdana, Arial;
}
	
#container {
width: 900px;
margin-right: auto;
margin-left: auto;
padding: 20px;
background-color: #fff;
}

header, footer {
font-family: Verdana, Arial, sans-serif;  /* p. 152 and 153 */
font-weight: normal; /*removes default bold p 155 */
color: #044476; /* */
text-transform: uppercase; /*p 166 */
padding: 0px;
margin: auto;   /*original margin auto   TRBL*/
clear: both;
text-align: right;
background-color: #fff;  /*  border-bottom: 1px solid #648DC7; */
}

header{
font-size: 1em; /*p. 156 */
letter-spacing: 7px; /* p 162 kearning*/
}

footer {
font-size: 10px;
display: block;  /*as all HTML 5 tags do not show on all browsersborder-top: 1px solid #648DC7;*/
}

/*404*/	
	
	h4{
	font-family: Verdana, Arial, sans-serif;  /* p. 152 and 153 */
	font-size: 15px; /*p. 156 */
	font-weight: normal; /*removes default bold p 155 */
	font-style: italic;
	color: #006A25; /* */
	text-transform: capitalize; /*p 166 */
	letter-spacing: 4px; /* p 162 kearning*/
	line-height: 1.5;
	margin: 5px 0px 5px 0px; /* top right bottom left TRBL*/
	padding: 5px;
	}
	
/*Titles*/
	
	h3{
	font-family: Verdana, Arial, sans-serif;  /* p. 152 and 153 */
	font-size: 11px; /*p. 156 */
	font-weight: normal; /*removes default bold p 155 */
	color: #DF0024; /* */
	text-transform: uppercase; /*p 166 */
	letter-spacing: 1px; /* p 162 kearning*/
	line-height: 1;
	margin: 5px 5px 5px 0px; /* top right bottom left TRBL*/
	padding: 5px;
	}
		
	p{
	font-family: Verdana, Arial, san-serif;
	font-size: 11px;
	color: #000080;
	line-height: 1.5;
	text-align: justify;
	padding: 5px;
	
	/* p 158 */
	}
	
	a{
	color: #000080;
	text-decoration: none; /*p 168 */
	}
	
	a:hover 	{
	color: #800080;
	text-decoration: none;
	}
	
	ul{
	font-family: Verdana, Arial, san-serif;
	font-size: 13px;
	color: #000080;
	line-height: 1;
}

/* Index and 404 - right, the same; left, different. t r b l*/

#right {
width: 500px;
float: right;
padding: 20px 20px 20px 20px;
background-color: #fff;
margin: 0px auto;
}

#left{                            /*index*/
width: 316px;
padding: 85px 22px 50px 22px;
background-color: #fff;
margin: 0px;
}
 
#left2{                /*404*/
width: 316px;
padding: 120px 23px 70px 23px;
position: absolute;
background-color: #fff;
margin: 0px auto;
}

/*Bio page*/

.fr {
float: right;
}

#bioright {
width: 250px;
float: right;
padding: 20px;
margin: 0px 40px 0px 20px;
}

#bioleft{
width: 506px;
padding: 10px;
font-size: 9px;
color: #080080;
margin-left: 0px;
letter-spacing: 0px;
}
 
 #list {
 font-size: 10px;
 color: #080080;
 text-transform: uppercase;
 letter-spacing: 1px;
 margin-left: 5px;
 line-height: 1.25;
 text-decoration: none;
 }
 
 .bio {           
padding: 15px 0px 15px 0px;  
clear: left;
background-color: #fff;
margin: 0px 0px 10px 0px;
}

/*Menu bar on all sheets  */

ul#nav li{
list-style: none; /*removes bullets*/
display: block;
margin: 0px;
float: left;
width: 10em;
border-top: 0px #ddd;
text-transform: uppercase;
}

ul#nav li a {
display: block;
width: 100px; /*total w is 100px*/
text-decoration: none;
text-align: center;
margin: 0px;
padding: 4px 4px 4px 4px; /* total padding w is 16px*/
background: #fff;
border-left: 0px #c33; /*total border w is 20px*/
}

ul#nav li ul{
display: none;
width: 10em;
position: absolute;
}

ul#nav li:hover ul{
display: block;
}

ul#nav li ul li {
float: none;
width: auto;
}


ul#nav li .link ul{
    display: none;
    width: 10em;
    position: absolute;
}
#nav li .hover_controls {
    float: none;
    display: none;
}
#nav li:hover .hover_controls {
    display: block;
}



/*Bottom nav bars */

.site {
color: #800080;
background-color: #fff;
font-size: 10px;
padding: 10px 0px 10px 0px; /*t r b l*/
text-align: center;
text-transform: uppercase;
clear: both;
letter-spacing: 1px;
}

.site a:link {					/*difference between focus and active*/
	color: #800080;
	text-decoration: none;
	}
	
.site a:visited {
	color: #000080;
	text-decoration: none;
	}
	
.site a:focus {
	color: #E62B86;
	text-decoration: none;
	}	

.site a:hover {
	color: #E62B86;					/*this shows a color when it's one the page.*/
	text-decoration: none;
	}
	
.site a:active {
	color: green;					
	text-decoration: none;
	}
	
	
	
	

/* Paintings layout */

.content { /* ptg */  
width: 816px;					/*150 150 150 150 150 150 size of images giving a little room for padding etc = 900 */
min-height: 500px;           /* 11 includes padding and margin plus 250 image therefore, 272 for each image*/
padding: 15px 0px 15px 0px;  
clear: left;
background-color: #fff;
margin: 0px auto;
}

.ptg li:hover, .ptg2 li:hover, .ptgs li:hover {
border: 1px solid #ccc;
}

.ptg li {          /*regular 3 ptgs per row*/
float: left;
list-style: none;
width: 250px;			
height: 280px; 
border: 1px solid transparent;
background-color: #fff;
padding: 10px;
margin: 0px auto; /* top right bottom and left */
}

.ptg2 li {
float: left;         /* for pages with only 2 ptgs per row 2007 sold 2004   original didn't have float*/
list-style: none;/* image w margin 2 = 252 + padding 78 on each side  = 816*/
width: 250px;			
height: 280px;
border: 1px solid transparent;
background-color: #fff;
padding: 10px ;
margin: 0px 68px 0px 68px; /* top right bottom and left */
}

.ptgs li {
float: left;         /* only for sold as no tags to paypal*/ 
list-style: none;
width: 250px;			/* image w margin 2 = 252 + padding 78 on each side  = 816*/
height: 250px;
border: 1px solid transparent;
background-color: #fff;
padding: 10px ;
margin: 0px 68px 0px 68px; /* top right bottom and left 2px */
}

