"utf-8";
* { 
padding : 0; 
margin : 0; 
} 
img { 
padding : 5px; 
border : 0px solid #219cff; 
} 
img.floatTL { 
float : left; 
margin-right : 10px; 
margin-bottom : 5px; 
margin-top : 30px; 
margin-left : 0; 
} 
img.floatTR { 
float : right; 
margin-left : 10px; 
margin-bottom : 5px; 
margin-top : 5px; 
margin-right : 10px; 
} 
body { 
font : 85% "Trebuchet MS", Arial, Helvetica, sans-serif; 
font-size : 13px; 
} 
#wrap { 
margin : 5px auto; 
width : 900px; 
} 
.clear { 
clear : both; 
} 
#header { 
float : left; 
width : 900px; 
height : 100px; 
background-image :   url(/images/header.jpg); 
background-repeat : no-repeat; 
} 
#logo { 
float : right; 
width : 300px; 
text-align : center; 
margin : 0 10px 0 0; 
} 
#logo h1.lineone { 
font-size : 1.6em; 
font-weight : lighter; 
padding-top : 10px; 
padding-left : 5px; 
border : none; 
letter-spacing : -1px; 
color : #FFFFFF; 
} 
#logo h1.lineone span { 
color : #f9f9f9; 
} 
#logo h2.linetwo { 
padding-left : 5px; 
font-size : 0.9em; 
text-transform : none; 
color : #219cff; 
} 
#logo h2.linetwo a { 
color : #219cff; 
text-decoration : none; 
} 
#navigation { 
float : left; 
width : 900px; 
background-color : #03f; 
text-align : center; 
padding : 10px 0; 
} 
#navigation ul { 
display : list-item; 
list-style-type : none; 
width : 100%; 
} 
#navigation li { 
display : inline; 
border-left : 1px solid #6699ff; 
} 
#navigation li.last { 
border-right : 1px solid #6699ff; 
} 
#navigation li a { 
padding : 1px 20px 7px 20px; 
color : #6699ff; 
font-weight : bold; 
text-decoration : none; 
line-height : 15px; 
} 
#navigation li a:hover { 
color : #99ffff; 
text-decoration : underline; 
} 
#left { 
float : left; 
width : 180px; 
padding : 10px; 
min-height : 5px; 
} 
#left h1, #right h1 {
	font-size : 1.4em;
	color : #FFFF00;
	background-color : #03f;
	text-indent : 10px;
	padding : 3px 0;
} 
#left h2, #right h2 { 
font-size : 1.3em; 
color : #ccffff; 
background-color : #03f; 
text-indent : 10px; 
padding : 3px 0; 
} 
#left ul { 
margin : 0; 
padding : 0 0 0 0; 
list-style : none; 
} 
#left li { 
padding : 10px 0; 
background :   url(/img1.gif) repeat-x left top; 
} 
#left .first { 
background : none; 
} 
#left a { 
background :   url(/images/img2.gif) no-repeat left 6px; 
margin-left : 0; 
padding-left : 15px; 
text-decoration : none; 
color : #525252; 
} 
#left a:hover { 
background :   url(/images/img3.gif) no-repeat left 6px; 
color : #0099ff; 
} 
#left .active { 
background :   url(/images/img3.gif) no-repeat left 6px; 
color : #0099ff; 
} 
#latest-news { 
width : 180px; 
padding-top : 20px; 
background :   url(/images/img1.gif) repeat-x left top; 
word-spacing : -0.1em; 
} 
#latest-news p { 
margin : 0; 
padding : 0; 
text-align : justify; 
} 
#latest-news .date { 
width : 80px; 
margin : 20px 0 4px 0; 
padding : 2px 7px; 
background : #03f; 
font-weight : bold; 
color : #ccffff; 
} 
#right { 
float : left; 
width : 680px; 
padding : 10px; 
min-height : 5px; 
} 
#right p {
	padding-top : 10px;
	
	font-size: 14px;
	font-style: italic;
} 

#right li {
	padding-top : 10px;
	
	font-size: 14px;
	text-indent : 0px; 
 
	
} 

#right ul h2 {
	
	color : #ccffff; 
background-color : #03f; 
text-indent : 10px; 

	
} 


#centerc {
	float : left;
	width : 680px;
	font-size: 14px;

} 

#rightc { 
float : left; 
width : 430px; 
padding : 0px 0px 10px 10px; 
min-height : 150px; 
} 

#onecol {
	float : left;
	width : 900px;
} 

#onecol img {
	float: left;
} 

#onecol table tr {
	border: 1px dashed #FFFFFF; 
} 

#onecol table {
	
	background-color: #FFFFFF;
	float: right;
	width: 500px;
	height: 250px;
	border: 1px solid #333; 
} 

#onecol table .bold {
	width : 70px;
	font-weight: bold;

} 
 
#onecol h1 {
	color: #3300FF;
	background-position: center;
	text-align: center;
} 



.box { 
float : left; 
width : 220px; 
margin : 10px 0px 10px 0; 
} 
.box h3 { 
text-indent : 5px; 
background-color : #03f; 
margin : 0 3px; 
color : #ccffff; 
} 
.box img { 
margin : 5px 5px; 
border : none; 
} 
.box p { 
margin : 0 10px; 
} 
.box h3 a { 
text-indent : 10px; 
background-color : #03f; 
margin : 0 3px; 
color : #ccffff; 
} 

.box H3 a:hover {
	color : black;
} 

.box li { 
margin-top:10px;
margin-left : 25px; 
} 





#footer { 
float : left; 
width : 680px; 
padding : 10px; 
text-align : center; 
border-top : 5px solid #03f; 
}


#left2 { 
float : left; 
width : 300px; 
padding : 10px; 
min-height : 5px; 
border: 1px solid #333; 

}

#left2 li {
	padding-top : 10px;
	
	font-size: 14px;
	text-indent : 0px; 
 
	
} 

#left2 ul h2 {
	
	color : #ccffff; 
background-color : #03f; 
text-indent : 10px; 

	
} 
#right2 { 
float : right; 
width : 300px; 
padding : 10px; 
min-height : 5px; 
border: 1px solid #333; 

}


ul#gallery {
  padding:0; 
  margin:0; 
  width:448px; 
  height:336px; 
  position:relative; 
  background:#888 url(graff/g1.jpg);
  }
#gallery li {
  list-style-type:none; 
  width:64px; 
  height:48px; 
  float:left; 
  z-index:100;
  }
#gallery li.lft {
  float:left; 
  clear:left;
  }
#gallery li.rgt {
  float:right; 
  clear:right;
  }
#gallery a {
  position:relative; 
  width:64px; 
  height:48px; 
  display:block; 
  float:left; 
  z-index:100; 
  cursor:default;
  }
#gallery a img {
  position:relative; 
  width:62px; 
  height:46px; 
  border:1px solid #888; 
  z-index:100;
  }
#gallery a:hover {
  width:160px; 
  height:120px; 
  padding:108px 144px; 
  position:absolute; 
  left:0; 
  top:0; 
  z-index:20;
  }
#gallery a:hover img {
  background:#eee; 
  position:relative; 
  width:160px; 
  height:120px; 
  border:0; 
  z-index:20;
  }
#gallery a:active, #gallery a:focus {
  background:transparent; 
  width:320px; 
  height:240px; 
  padding:48px 64px; 
  position:absolute; 
  left:0; 
  top:0; 
  z-index:10;
  }
#gallery a:active img, #gallery a:focus img {
  background:#eee; 
  position:relative; 
  width:320px; 
  height:239px; 
  border:0; 
  z-index:10;
  }
/* hack for Internet Explorer */
#gallery li.pad {
  height:0; 
  display:block; 
  margin-top:-2px; 
  width:448px; 
  font-size:0;
  }

/* hack for Opera 7+ */
@media all and (min-width:0px){
#gallery a:hover {
  background:#888; 
  width:320px; 
  height:240px; 
  padding:48px 64px; 
  position:absolute; 
  left:0; 
  top:0; 
  z-index:10;
  }
#gallery a:hover img {
  background:#aaa; 
  position:relative; 
  width:320px; 
  height:240px; 
  border:0; 
  z-index:10;
  }
}




<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 0px solid white;
margin: 0 0px 0px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 0px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: 0px;
border: 1px solid gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0px;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
position: absolute;
top:420px;
left: 340px;  /*position where enlarged image should offset horizontally */
z-index: 5;
}

</style>