/* Basic reset code- The asterisk is the universal selector */
*, html, body
{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	font-family:  Helvetica, Arial, Verdana,  sans-serif;
}

ol, ul {
	list-style: none;
	list-style-type: none;
	font-size: .95em;
	line-height: 1.30em;
	padding: 0;
margin: 0;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}



/* -- Mitch Bryson css reset --*/
hr {
	display: block;
	width: 100%;
	height: 1px;
	color: #e0e0e0;
	background: #e0e0e0;
	border: none;
	margin: 10px 0px 10px 0px;
	}


/** 3.	TYPOGRAPHY - mitch bryson **/

code, pre, var, .monospace {
	margin: 0.80em 0;
	font-family: "Palatino Linotype", "Courier New", monospace;
	line-height: 1.50em;
	}
	code strong, pre strong, 
	var strong, .monospace strong {
		color: #c33;
		background: inherit;
		}


strong			{ font-weight: 		bold;		}
em, i, cite		{ font-style: 		italic;		}
u, .u			{ text-decoration: 	underline;	}

s, strike 	{ text-decoration: line-through; }
sub 		{ vertical-align: sub; 			 }
sup 		{ vertical-align: sup; 			 }
u 			{ text-decoration: underline; 	 }

/** basic a href styling **/
a { color: #838383; font-weight: regular; text-decoration: none;}
/* a:visited 	{ 	color: #606060; font-weight: regular; text-decoration: none;} */
a:hover 	{ color: #606060;  text-decoration: underline;}
/*  a:active 	{ color: #a0a0a0; font-weight: regular; text-decoration: none;} */
	

/** END of resets ** END of resets **/


/** basic p and h code typography - from Terri **/

p {

font-size: .95em;
	margin: 0.30em 0 1.00em 0;
	line-height: 1.40em;
	}

h1, h2, h3, 
{ 
font-weight: regular; 
margin: .7em 0em .7em 0em;
padding: 0px 0px 0px 0px;
color: #000;
}


h4, h5, h6 
{ 
font-weight: regular; 
margin: .7em 0em .7em 0em;
padding: 0px 0px 0px 0px;
color: #000;
}


h1 {  
font-size: 1.50em; 	
line-height: 1.1em;
color: #de960a;
margin: .7em 0em .7em 0em;
}


h2 {  
font-size: 1.35em; 	
line-height: 1.1em;
color: #990000;
margin: .7em 0em .7em 0em;
}



h3 
{  
font-size: 1.25em; 	
line-height: 1.1em;
color: #de960a;
margin: .7em 0em .7em 0em;
}

h4 {  
font-size: 1.15em; 	
line-height: 1.1em;
}


h5 {  
font-size: 1.05em; 	
line-height: 1.1em;
}

h6 {  
font-size: .90em; 	
line-height: 1.1em;
}

/** end of p and h code typography **/


h2.artlink {  
height:62px;
font-size: 1.35em; 	
line-height: 100px;
/*background:#ccc; */
background-image: url("images/icon-painter.gif");
background-repeat: no-repeat;
color: #de960a;
margin: 10px 0px 10px 0px;
padding: 0px 0px 0px 55px;
}


h2.canlink {  
height:62px;
font-size: 1.35em; 	
line-height: 100px;
background-image: url("images/icon-maple.gif");
background-repeat: no-repeat;
color: #de960a;
margin: 10px 0px 10px 0px;
padding: 0px 0px 0px 55px;
}


h2.freelink {  
height:62px;
font-size: 1.35em; 	
line-height: 100px;
background-image: url("images/icon-csymbol.gif");
background-repeat: no-repeat;
color: #de960a;
margin: 10px 0px 10px 0px;
padding: 0px 0px 0px 55px;
}



h2.lawlink {  
height:62px;
font-size: 1.35em; 	
line-height: 100px;
background-image: url("images/icon-gavel.gif");
background-repeat: no-repeat;
color: #de960a;
margin: 10px 0px 10px 0px;
padding: 0px 0px 0px 55px;
}


h2.notelink {  
height:62px;
font-size: 1.35em; 	
line-height: 100px;
background-image: url("images/icon-notebook.gif");
background-repeat: no-repeat;
color: #de960a;
margin: 10px 0px 10px 0px;
padding: 0px 0px 0px 55px;
}


h2.photolink {  
height:62px;
font-size: 1.35em; 	
line-height: 100px;
background-image: url("images/icon-camera.gif");
background-repeat: no-repeat;
color: #de960a;
margin: 10px 0px 10px 0px;
padding: 0px 0px 0px 55px;
}

h2.protectlink {  
height:62px;
font-size: 1.35em; 	
line-height: 100px;
background-image: url("images/icon-lock.gif");
background-repeat: no-repeat;
color: #de960a;
margin: 10px 0px 10px 0px;
padding: 0px 0px 0px 55px;
}



h2.usalink {  
height:62px;
font-size: 1.35em; 	
line-height: 100px;
background-image: url("images/icon-eagle.gif");
background-repeat: no-repeat;
color: #de960a;
margin: 10px 0px 10px 0px;
padding: 0px 0px 0px 55px;
}


h2.worldlink {  
height:62px;
font-size: 1.35em; 	
line-height: 100px;
background-image: url("images/icon-globe.gif");
background-repeat: no-repeat;
color: #de960a;
margin: 10px 0px 10px 0px;
padding: 0px 0px 0px 55px;
}

h2.buslink {  
height:62px;
font-size: 1.35em; 	
line-height: 100px;
background-image: url("images/icon-bus.gif");
background-repeat: no-repeat;
color: #de960a;
margin: 10px 0px 10px 0px;
padding: 0px 0px 0px 55px;
}


body 
{
background:#fff;
margin:0 auto; 
padding:0;
}

#outerwrapper
{
background: url("images/bg1600-e.jpg") top center repeat-y;
margin:0 auto; 
width:960px;
}

#wrap 
{
background:#fff; 
color:#404040; 
margin:0 auto; 
width:900px;
border-right:1px solid #AAA;
border-left:1px solid #AAA;
}





/* Header */
#header 
{
/*background-color:#ccc; */
background-color:#747474; 
height:92px; 
margin:0px 0px 0px 0px; 
padding:0;

}

#header h1 
{
background-color:inherit; 
/*color:#505050; */
color:#CC0000;
float:left; 
font-size:2em; 
margin:0 0 10px 14px; 
width:700px;
}

#header h1 a 
{
background-color:inherit; 
color:#990000;
text-decoration:none;
}


/* Header inner wrapper for horizontal adsense*/
#headerinner 
{
margin:0px 0px 0px 80px; 
padding:0 0px 0 0px;
}



/* Horizontal nav bar */


#horizontalnav
{


background: #FFF url("images/visualartlogo.jpg") left no-repeat;
height:100px; 
margin:0px 0px 0px 0px; 
padding:8px 20px 0px 12px; 
border-bottom:1px solid #e0e0e0;
}

#horizontalnav h1 
{

/*color:#505050; */
float:right; 
text-align:right; 
color:#CC0000;
float:right; 
font-size:2em; 
margin:0 0 0px 0px; 
width:870px;
}

#horizontalnav h1 a 
{

color:#990000;
text-decoration:none;
}

#horizontalnav p
{
/*float:right; */
text-align:right;
font-size: 1.3em;
line-height: 1.20em;
margin: 0px 0px 0px 0px;
color: #CC0000;
}


#horizontalnav2
{
background: #fff;
height:30px; 
margin:0px 0px 0px 0px; 
padding:8px 0px 0px 12px; 
border-bottom:1px solid #e0e0e0;
}


#horizontalnav2 p
{
font-size: 1em;
text-align:right;
line-height: 1.20em;
margin: 0px 20px 0px 0px;
color: #CC0000;
}




/*Left and right sidebar */

#leftcolumn 
{
clear:left; 
float:left; 
margin:0 0 0px 0px; 
padding:10px; 
width:170px;
}


#leftcolumnsearch 
{
clear:left; 
float:left; 
margin:0 0 0px 0px; 
padding:2px; 
width:40px;
}


#rightcolumn
{
float:right; 
margin:0 0 0px 0px; 
padding:0px; 
width:190px;
}




/* Main content */

#content 
{
border-left:1px solid #e0e0e0; 
border-right:1px solid #e0e0e0; 
margin:0px 190px 0px 190px; 
padding:0px 22px 0px 22px;
}

#contentwide 
{
border-left:1px solid #e0e0e0; 
margin:0 0 0px 200px; 
padding:0 22px 0 22px;
}

#contentwide2 
{
border-right:1px solid #e0e0e0; 
margin:0 200px 0px 0; 
padding:0 22px 0 22px;
}


#contentwidesearch 
{
margin:0 px 0px 42px; 
padding:0 10px 0 12px;
}

/* bullets used on documents page */

ul.doc
{

float:left;
list-style-type: none;
padding: 0;
margin: 0px 0px 20px 0px;
}



li.doc
{
padding-left: 14px;
background-image: url(images/yellowdot.gif);
background-repeat: no-repeat;
background-position: 0px 6px;
margin: 0px 0px 0px 0px;
/*list-style-image: url("images/yellowdot.gif");*/
}



/*Ul and li used on licence page*/

ul.widelink
{
display: block;
/*width:440px;*/
width:98%;
float:left;
list-style-type: none;
padding: 0;
margin: 0px 0px 20px 0px;
}

li.widelink a
{

/*width:420px;*/
width:98%;
display: block;

padding-left: 20px;
list-style-type: none;
background-image: url(images/yellowdot.gif);
background-repeat: no-repeat;
background-position: 2px 6px;
background-color: #fff;
margin: 0px 0px 0px 0px;
color:#606060;

}


ul.widelink a:hover
{
/* see below - width and display block allows an easier 
navigating experience for the user - they 
can access the interactivity of the hover 
state without being directly over the words*/

width:98%px;
display: block;
padding-left: 20px;
list-style-type: none;
background-image: url(images/greendot.gif);
background-repeat: no-repeat;
background-position: 2px 6px;
background-color: #fff;
margin: 0px 0px 0px 0px;
color:#95b460;
}







/*Ul and li formatting with simple 
bullet graphic - for top of 
terminology page*/

ul.bulletslinks
{
display: block;
/*width:440px;*/
width:96%;
float:left;
list-style-type: none;
padding: 0;
margin: 0px 0px 20px 0px;

}


li.bulletslinks a
{

/*width:420px;*/
width:210px;
display: block;

padding-left: 20px;
list-style-type: none;
background-image: url(images/yellowdot.gif);
background-repeat: no-repeat;
background-position: 2px 6px;
background-color: #fff;
margin: 0px 0px 0px 0px;
color:#606060;

}


ul.bulletslinks a:hover
{
/* see below - width and display block allows an easier 
navigating experience for the user - they 
can access the interactivity of the hover 
state without being directly over the words*/

width:210px;
display: block;

padding-left: 20px;
list-style-type: none;
background-image: url(images/greendot.gif);
background-repeat: no-repeat;
background-position: 2px 6px;
background-color: #fff;
margin: 0px 0px 0px 0px;
color:#95b460;
}








/*Ul and li formatting with simple 
bullet graphic - for bottom of 
terminology page*/

ul.bullets
{

/*width:440px;*/
width:95%;
float:left;
list-style-type: none;
padding: 0;
margin: 0px 0px 20px 0px;
}


li.bullets
{
/*width:420px;*/
padding-left: 20px;
list-style-type: none;
background-image: url(images/greendot.gif);
background-repeat: no-repeat;
background-position: 2px 6px;
/*background-color: #F1F1F1;*/
background-color: 
margin: 0px 0px 0px 0px;
font-size: 1.00em; 	
font-weight:900;	
}


ul.bullets p
{
padding-left: 20px;
font-style: italic;	
font-weight:400;
margin: 0px 0px 6px 0px;
}





/*Ul and li formatting with alternative bullets*/

ol.bulletsalt
{

/*width:440px;*/
width:95%;
float:left;
list-style-type: decimal;
padding: 0;
margin: 0px 0px 20px 20px;
}


li.bulletsalt
{
/*width:420px;*/
padding-left: 20px;
list-style-type: none;
background-image: url(images/greendot.gif);
background-repeat: no-repeat;
background-position: 2px 6px;
/*background-color: #F1F1F1;*/
background-color: 
margin: 0px 0px 0px 0px;
font-size: 1.00em; 	
font-weight:400;	
}


ul.bulletsalt p
{
padding-left: 20px;
font-style: italic;	
font-weight:400;
margin: 0px 0px 6px 0px;
}





/* end of Basic Ul and li formatting with simple bullet graphic */


/* Footer */

#footer 
{
background:#fff; 
border-top:1px solid #e0e0e0; 
clear:both; 
color:gray; 
margin:0 auto; 
padding:0px 0px; 
text-align:center; 
width:900px; 

}




/**************************************************************
   Width classes used by the site columns
 **************************************************************/

.width100 {
  width: 100%;
}

.width75 {
  width: 73%;
}

.width66 {
  width: 64%;
}

.width50 {
  width: 48%;
}

.width33 {
  width: 31%;
}

.width25 {
  width: 23%;
}



/**************************************************************
   Alignment classes
 **************************************************************/

.floatLeft {
  float: left;
  margin: 0px 5px 0px 0px;
}

.floatRight {
  float: right;
    margin: 0px 0px 0px 3px;
}

.alignLeft {
  text-align: left;
}

.alignRight {
  text-align: right;
}





/* Floating thumbnail - version with text caption*/

#boundingbox
{

width:450px;
height:150px;
background-color:#B3B3B3; 
color:#505050; 
padding:4px; 
margin:0px 0px 0px 0px; 
}

.thumbnail 
{

float: left;
width: 75px;
border: 1px solid #999;
background-color:#F7F7F7; 
margin: 0px 10px 0px 10px;
padding: 8px 6px 8px 6px;
}


.clearboth { clear: both; }


/* Thumbnail gallery without captions */

/*-- Display thumbnails as classy links */

#thumbgal  {
width: 460px;
height: 100px;
}

#thumbgal a {
  display: block; /* necessary for Firefox to show properly the border */
 border: 1px solid #CCCCCC; 
  padding: 4px 4px 4px 4px;
  background:#F7F7F7;
    /*  background:#F7F7F7; soft grey  */
}


#thumbgal a:hover {
  border: 1px solid #A2A2A2;
  padding: 4px 4px 4px 4px;
  background:#F7F7F7;
}


#thumbgal div {
  margin: 3px 3px 3px 3px;
  float: left;
}
 /*-- end thumbnail didsplay div */


/* yet another thumbnail display - this one looks 
best with tiny 40-50 px images */

/* thumbnails */
p.tinythumbs{ padding: 10px 0 0 10px; }
.tinythumbs img { 
	position: relative;
	padding: 8px;
	margin: 2px;
	background: #fff;
   border: 1px solid #ddd;	
}
.tinythumbs img:hover	{
	border: 1px solid #D2D2D2;
	background: #ddd;	
}
.tinythumbs a:hover 
{ background-color: transparent; 
border: none }
/* -- done tinythumbs display */




/* start block hover links */

#blockhoverlinks ul {
        list-style-type: none;
        width: 450px;
} 

#blockhoverlinks li {
        border-top: 1px dotted #999;

	line-height: 1.2em;
        margin: 5px 0;
}

#blockhoverlinks li a { 
        color: #990000; /*red-brown*/
        display: block;
        padding: 5px;
        text-decoration: none;
}

 * html #blockhoverlinks li a {  /* make hover effect work in IE */
	width: 400px;
}

#blockhoverlinks li a:hover {
        background: #ffffcc;
}

#blockhoverlinks a em { 
        color: #333;
        display: block;
		font-style: 		italic;
      
}

#blockhoverlinks a span {
     color: #990000;    
  font-size:0.8em;
}


/* end block hover links */







/* various classes */

.highlight
{
background:#FFF6A7; 
}


.formatpicright
{
float:right; 

border:1px solid brown; 
display:inline; 
padding:6px;
margin:2px 0 2px 10px;
}

.formatpicrightnoborder
{
float:right; 
display:inline; 
padding:0px;
margin:2px 0px 2px 8px;
}

.formatpicleft
{
float:left; 

background:#fff; 
border:1px solid brown; 
display:inline; 
padding:6px;
margin:2px 10px 2px 0px;
}


.format_affiliate
{
float:left; 
background:#fff; 
border:1px solid brown; 
display:inline; 
padding:12px;
margin:2px 10px 2px 0px;
}


.formatpicleftnoborder
{
float:left; 
display:inline; 
padding:0px;
margin:2px 8px 2px 0px;
}

.left 
{
float:left; 
margin:3px 10px 2px 0;
}

.right 
{
float:right; 
margin:2px 0 2px 10px;
}

.textright 
{
text-align:right; 
margin:5px 0;
}

.textjustify
{
text-align:justify; 
margin:5px 0;
}

.center 
{
text-align:center;
}

.small 
{
font-size:0.8em;
}





.bold 
{
font-weight:700;
}



.displaybox
{
font-size:0.95em;
background-color:#f9f8d9; 
color:#505050; 
padding: 12px 8px 12px 8px; 
margin:20px 0px 0px 0px; 
}

.displaybox-half
{
float:right;
width:50%;
display:inline;
background-color:#FFFFCC; 
color:#505050; 
padding: 4px 12px 4px 12px; 
margin:0px 0px 4px 12px; 
}


.dropcap {
	float:left;
	color:#D4D4C7;
	font-size:70px;
	line-height:50px;
	padding-top:10px;
	}


.pullquote-right
{


background: url("images/pullquote-gradient2.jpg") top left repeat-x;
float:right;
width:50%;
display:inline;
color:#505050; 
padding: 4px 12px 4px 12px; 
margin:12px 0px 4px 12px; 
font-size:1.1em;
}





.clear
{clear:both; 
margin:0; 
padding:0; 
}


.clearing 
{clear:left; 
margin:0; 
padding:0; 
visibility:hidden;
}

.hide 
{
display:none;
}


/* Curved teaser box class - fixed width - 256 Berea SAtreet */

.teaser {
		width:160px;
		padding:0 0 14px 0;
		margin:20px auto 0px;
		background:url("images/teaser160px.jpg") bottom left no-repeat;
	}
	.teaser h3 {
		margin:0;
		font-size: 1em; 	
		line-height: 1em;
		color:#990000;
		padding:7px 10px 16px 10px;
		background:url("images/teaser160px.jpg") top left no-repeat;
	}
	.teaser p,  .more {	
	font-size: .95em;
	line-height: 1.25em;
		margin:0;
		padding:0 10px 12px;
		border:1px solid #d8d8d8;
		border-width:0 1px;
		background:#dcfabf;
	}
	
			.teaser a.morelink {
			font-size: .95em;
	line-height: 1.25em;
	color:#006600;
	}
	
		.teaser a.morelink:hover {
	font-size: .95em;
	line-height: 1.25em;

			color:#5c5c5c;
	}
	
	/* for the curved edge teaser box, 
	the "more" class must be included. 
	You can apply the "more" class to a 
	final a href link*/


/* for the curved edge teaser box, the "more" class must be included. You can apply the "more" class to a final a href link*/







/* This is the flyout menu!! */

/*--vertical  UL and LI code --*/

#fancylist
{
font-size: .95em; 
	line-height: 1.20em;
list-style: none;
margin: 0px 4px 0px 4px;
padding: 0px;
width: 180px;
}


#fancylist a {
	/*this is the color of the main text links  */
		color: #606060;
	text-decoration: none;
	text-align: left;
}


#fancylist a.here {
	/*this is the styling for the current page link- it is a class called "here" */
		color: #fff;
	text-decoration: none;
	text-align: left;
	background: #95b460; /* med-dark green */
	cursor: default;
}


#fancylist ul {
/*this is width of the basic block */
	list-style: none;

	padding: 0;
	width:175px;
	/* note - I discovered that this block and the --ul li:hover ul-- below myust be the same width!! */
}

#fancylist ul li {

	height:100%;
		/* this is the background of the main block */
	background:#fff;
border-bottom:1px solid #CFDDB7;
	position: relative;
	float:left;
	width:100%;
	}
	
#fancylist ul li ul li{
/*	this is the background color of the flyout section*/
	background: #CFDDB7;   /* light-dark green */
border-bottom:1px solid #fff; 
	}

#fancylist ul li a{
	display:block;
	padding: 2px 3px;
	}

#fancylist ul li a:hover {
/* this is what happens when you hover on the main section */
	color: #fff;
	/* background: #5c5c5c;  dark grey */ 
	background: #95b460; /* med-dark green */

}

#fancylist ul li ul li a:hover{
/*	this is the background color of the hover on the flyout section*/
color: #fff;
	background:#999999;

}

#fancylist ul ul {
	position: absolute;
	top: 0;
	display:none;
}

#fancylist ul li:hover ul{
	display: block;
	left:175px;
}





/**********************2 column insert box BELOW ***************************/

div#insert{
width: 450px;
height: 400px;
margin: 10px 0px 2px 0px;
padding: 10px 0px 10px 0px;
/* border-top: #a6bf79 2px dotted; */
}


div#insertleft{
float: left;
width: 220px;
background: white;
}

div#insertright{
float: right;
width: 220px;
background: white;
}



#navcontainer ul
{
list-style-type: none;
text-align: left;
padding-left: 1em;
	text-indent: -1em;

}

#navcontainer ul li a
{
background: url(images/arrow.gif) left center no-repeat;
padding-left: 15px;
text-align: left;
text-decoration: none;

}

#navcontainer ul li a:hover
{
background: url(images/arrow.gif) left center no-repeat;
padding-left: 15px;

}


/* ----------- horizontal list ---------- */
#hlist a
{
	display: block;
	margin: 0 3px 0 3px;
	float: right;
	font-size: 1em;
	font-weight: regular;
	letter-spacing : -1px;
	/* color: #a1721b;*/
	color: #b0d748;
}
	
#hlist a:hover
{
	color: #de960a;
}