/* Forest Green Swish Stylesheet by Will Peavy - willpeavy.net */

body {background-color:#070707;  color:#1E3536; font-family: 'Trebuchet', sans serif; margin-left:0; margin-right:0; font-size:14px;font-weight:bold;}
h1 {font-family:Arial,sans-serif; margin-top:0; font-size:26px; letter-spacing:-1px; color:#222;}
h2 {font-family:Arial,sans-serif; margin-bottom:-5px; font-size:20px; letter-spacing:-1px; color:#5e2620;}
h3 {font-family:Arial,sans-serif; margin-bottom:5px; font-size:15px; letter-spacing:0px; color:#5e2620;font-weight:bold;}
h4 {font-family:Arial,sans-serif; margin-bottom:5px; font-size:13px; letter-spacing:0px; color:#5e2620;font-weight:bold;}
h5 {font-family:Arial,sans-serif; margin-bottom:px; font-size:13px; letter-spacing:0px; color:#fff;font-weight:bold;}

p {text-indent:30px;}
#container {background-image:url(swish_green.jpg); background-repeat:no-repeat; width:1000px; margin:auto; position:relative; top:10px;}
#content {width:860px; margin:auto; position:relative; top:85px;}
#footer {width:1000px; height:40px; margin:auto; position:relative; top:95px; background-image:url(swish_bottom.jpg); background-repeat:no-repeat; background-position:left  center; padding-left:70px; color:#333; }
#stretch {background-image:url(swish_stretch.jpg); width:1000px; height:100%; position:absolute; top:496px; left:0px;}
#cover {background-color:#070707; width:1000px; height:401px; position:absolute; bottom:-496px; left:0px;}
#navigation {  }

/******************************* LINKS ****************************/

a {text-decoration:underline;}
a:link {color:#2F4F4F;}
a:visited {color:#2F4F4F;text-decoration:none;}
a:active {color:#2F4F4F;}
a:hover {color:#537099;}
#link1 {position:absolute; top:22px; left:70px; font-size:17px;}
#link2 {position:absolute; top:22px; left:210px; font-size:17px;}
#link3 {position:absolute; top:22px; left:350px; font-size:17px;}
#link4 {position:absolute; top:22px; left:490px; font-size:17px;}
#link5 {position:absolute; top:22px; left:630px; font-size:17px;}
a#logo {position:absolute; top:22px; left:760px; font-size:17px; color:#000;}

#link1a {position:absolute; top:22px; left:150px; font-size:17px;}
#link2a {position:absolute; top:22px; left:490px; font-size:17px;}
#link3a {position:absolute; top:22px; left:630px; font-size:17px;}


/************** ON THIS PAGE SIDE BAR *****************/
.pos_fixed
{
position:fixed;
top:100px;
left:10px;
width:150px;
z-index:10;
background-color:#070707;
color:SlateGrey;
}

.pos_fixed ul li {
list-style-type:;
padding: 0px;
margin-left: -30px;
}

/*******************************/

 a.bookmark:link {
color:#ccc;
}

 a.bookmark:visited {
color:#ccc;
}

 a.bookmark:hover {
color:#ccc;
}

a.rpc:link {
	color: #000; 
	text-decoration:underline;
	font-size:1.0em;
}

a.rpc:visited{
	/*color:;  */
	text-decoration:none;
	font-size:1.0em;	
}

a.rpc:hover{
	color: #000;
	text-decoration:none;
	border: 1px solid gray;
	background-color:#DCDCDC;
	font-size:1.0em;	
}

/*********************************** Plus Image Viewer  *********************
needs jquery. In <head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="plusimageviewer.js">
example html:
<img src="k-r-smc50-tn.jpg"  data-plusimage="k-r-smc50-800.jpg" data-plussize="800,533"  />
*/

.enlargecaption{
position: absolute;
border: 1px dotted navy;
font: normal 8px Arial;
}

.enlargecaption a{
display:block;
background: black; /*bg color of caption*/
padding: 2px;
text-decoration: none;
color: white;
}

.enlargecaption a:hover{
 background: lightyellow; /*bg color of caption when mouse rolls over it*/
}

.enlargebox{
position: absolute;
border:1px solid gray;
display:none;
}

.enlargebox .title{
background:gray;
color:white;
padding: 3px 2px;
text-align: right;
font:bold 14px Arial;
}

.enlargebox .title img{
cursor:pointer;
cursor:hand;
}

/******************************* end Plus Image Viewer  ***************************/


/* big pic on hover  http://kiosk-tutorials.com/demoenlarge.php  
SAMPLE HTML
<div class="magnify">
<a class="p1" href="#" title="">Hover to Enlarge<img src="../photos/G10back-80.jpg" title="" alt="" />
<img class="large" src="../photos/G10back-600.jpg" title="" alt="" /></a>
</div>*/

div.magnify {
position:relative;
/*or use specific positioning relative to thumbnail
 margin-left: auto;
 margin-right: auto */
top:0;
left:-0px;
width:170px; /* if your thumbnail is a different size, change this */
background-color:#2A242E;
z-index:1;
float:left;
margin:0 10px 10px 10px;
}

div.magnify a.p1, div.magnify a.p1:visited {
display:block;
width:150px; /* change to the dimensions of your thumbnail image */
/*height:58px;  change to the dimensions of your thumbnail image */
text-decoration:none;
background-color:#2A242E;
font-size:10px;
color:fff;
text-align:center;
font-weight:normal;
top:0;
left:0;
border:0;
}

div.magnify a img {
border:0;
 /*display:inline;*/ 
margin:10px;
position:relative;
float:left;}

.magnify a.p1:hover {
text-decoration:none;
background-color:#000;
color:#000;
}

div.magnify a .large {
display:block;
position:absolute;
width:0;
height:0;
border:0;
top:0;
left:0;
}

div.magnify a.p1:hover .large {
display:block;
position:absolute;
top:-320px;
left:0px;
width:600px;  /* change to the dimensions of your large image */
height:400px; /*change to the dimensions of your large image */
border:10px inset #ccc; /* you can change the border width, style, and color */
z-index: 101;
}

/*************************** general formatting classes ******************/


.image-left {
	float: left;
	margin-right: 1em;
}

.image-right {
	float: right;
	margin-left: 1em;
}

 .centeredImage{
    text-align:center;
		margin:auto;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
}

.small {font-size:90%; }



.bold {
font-weight:bold;
}

.large {
font-size:1.2em;
}

.italic {
font-style:italic;
}

.tight {
padding: 0;
margin: 0;
}

/************************ TABLES *****************************************/

table  {border-collapse:collapse;border:0px;  }

table.lenslist {
width:100%;
border-top: 1px solid white;
border-bottom: 1px solid white;
}



table.lenslist th td {
text-align:center;
font-weight:bold;
font-size:1.1em;

}


table.lenslist th {
padding:5px 0 5px 0;
}

table.lenslist tr,td,th {
padding:0 10px 5px 10px;
border-bottom: 1px solid white;
}



/****************************DROP DOWN MENU****************************/

ul.ddmenu {
  font-family: Arial, Verdana;
  font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
ul.ddmenu li {
  display: block;
  position: relative;
  float: left;
}
 li ul { display: none; }
ul li a.ddmenu {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: #2C5463;
  margin-left: 1px;
  white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
  display: block;
  position: absolute;
}
/*
li:hover li {
  float: none;
  font-size: 11px;
}
*/

li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
