/* ================================================================ **
** style2.css
** ---------------------------------------------------------------- **
** Created: 05-05-08 (dd-mm-yy)
** Author: onedollartemplates.com
** Template: Granite Glass
** ================================================================ */


/* ---------------------------------------------------------------- **
** Generic
** ---------------------------------------------------------------- */
html { font-size: 76%; }
body {
	background: #FFFFFF;
	font-family: Times New Roman, Ariel, "Trebuchet MS", Tahoma, Verdana, Helvetica, sans-serif;
	font-size: 1.1em;
	line-height: 1.5em;
	color: #000000;
	text-align: center;
	margin: 0;
	padding: 10px; /* 10 */
background-color: #FFFFFF;
	}

#container {
	margin: 0 auto;
	/*width: 900px; */
	}

#sec_entire_page {
	margin: 0 auto;
	}

#header { 
	font-family: Times New Roman, Ariel, "Trebuchet MS", Tahoma, Verdana, Helvetica, sans-serif; 
	/*font-size: 2.3em;*/
	font-weight: normal;
	color: #000000; /*#FFFFFF;*/ 
	margin: 0;
	padding: 0px;
	letter-spacing: 0px;
/* min-height: 40px; */
width: 800px;
	}

#sec_header {
	width: 800px;
        margin: 10px 0px -10px 0px;
        padding: 0px;        
	}

#sec_header_LHS {
	width: 400px;
        margin: 0px 0px 0px -20px;
        padding: 0px;  
        float:left;      
	}

#sec_header_RHS {
	width: 400px;
        margin: 10px 0px 0px 620px; /* 10px 0px 0px 535px; <-with 3 buttons */
        padding: 0px;  
	}

/*-----------------*/
#frame {
		/*width:710px;*/
		margin-right:auto;
		margin-left:auto;
		margin-top:10px;
		padding:0px;
		text-align:left;
min-height:450px;
		}

#frame3 {
		width:300px;
		margin-right:auto;
		margin-left:-10px; /*auto;*/
		margin-top:10px;
		padding:0px;
		text-align:left;
/*min-height:400px;*/
		}

#frame_home {
		width:710px;
		margin-right:auto;
		margin-left:auto;
		margin-top:10px;
		padding:0px;
		text-align:left;
min-height:300px;
		}

#frame_under {
		width:710px;
		margin-right:auto;
		margin-left:auto;
		margin-top:10px;
		padding:0px 0px 0px 0px;
		text-align:left;
float:left;
min-height:50px;
		}
		
	#contentleft {
		width:300px;
		padding:10px;
		float:left;
		background:#fff;
               /* height:500px; */
		}
	
	#contentcenter {
		width:170px;
		padding:10px;
		float:left;
		background:#fff;
               /* height:500px; */
		}
	
	#contentright {
		width:180px;
		padding:10px;
		float:left;
		background:#fff;
}

#content3left {
		width:300px;
		padding:0px;
		float:left;
		background:#fff;
               /* height:500px; */
/*min-height: 400px;*/ 
margin-bottom:0px;
		}

#content3right {
		width:300px;
		padding:0px;
		float:left;
		background:#fff;
               /* height:500px; */
/*min-height: 400px;*/ 
margin-bottom:0px;
		}

#content4left {
		width:965px; /* 1000 */
		padding:10px 0px 10px 10px;
margin: 5px 0 15px 0px;
		float:left;
		background:#fff;
               height:250px; 
/*padding-top: 25px; border-top: 1px solid #ccc;*/
		}

#content44left {
		width:1000px; 
		padding: 0px 0px 0px 0px;
margin: -20px 0px 0px 20px; 
		float:left;
		background:#fff;
               height:250px; 
		}

#content2all {
margin: 12px 0px 0px 10px;
		width:700px;
		padding:10px;
		float:left;
		background:#fff;
               /* height:500px; */
padding-bottom: 10px; border-bottom: 1px solid #ccc;
padding-top: 10px; border-top: 1px solid #ccc;
		}

#sec_horiz_line {
	width: 800px; /* 800px */
        margin:  10px 0px 10px 0px;
        padding: 0px;   
        border-top: 1px solid #ccc;  /* thin horizontal gray line */   
	}

#content2left {
margin: 0px 0px 0px -10px; 
		width:160px;
		padding:5px 0px 0px 0px;
		float:left;
		background:#fff;
               /* height:500px; */
		}


#sec_main_pic {
	width: 800px;
        height:250px;
        margin: 0px;
        padding: 0px;   
        	}

#sec_main_bio {
	width: 800px;
        height: 250px; /* 150px; */
        margin: 0px 0px 0px 0px;
        padding: 0px;   
        text-align: left;
        color: #888;
	}

#sec_main_bio_LHS {
	width: 550px; /*600px;*/
        height: 250px; /*150px; */
        float: left;
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;   
        	}

#sec_main_bio_LHS_top {
	width: 550px; /*600px;*/
        float: left;
        margin: 0px;
        padding: 0px 0px 0px 0px;   
        	}

#sec_main_bio_LHS_bot {
	width: 550px; /*600px;*/
        float: left;
        margin: 0px;
        padding: 0px 0px 0px 0px;   
        	}

#sec_main_bio_RHS {
	width: 250px; /*200px;*/
        height: 250px; /*150px; */
        float: right;
        margin: -250px 0px 0px 600px; /* -150px 0px 0px 600px; */
        padding: 0px;   
        	}

#sec_main_latest {
	width: 550px; /* 800px; */
        height: 200px;
        margin: -140px 0px 0px 0px;
        padding: 0px;   
        float: left;
	text-align: left;
clear: left;
}

#sec_contact_pic {
	width: 800px;
        height:450px;
        margin: 0px 0px 0px 0px;
        padding: 0px;   
        	}

#sec_contact_bio {
	width: 800px;
        height: 80px;
        margin: 0px 0px 0px 0px;
        padding: 0px;   
        text-align: left;
        color: #888;
	}

	
#content2right {
		width:400px;
		padding:0px;
		float:left;
		background:#fff;
               /* height:500px; */
		}
	
#sec_footer { 
	width: 800px;
	height: 20px; 
	margin-top: 300px; 
        text-align: center;
        font-size: 0.9em;
	color: #666666;
	}	

#sec_footer2 { 
	width: 800px;
	height: 20px; 
	margin-top: 10px; 
        text-align: center;
        font-size: 0.9em;
	color: #666666;
	}	

#footer { 
	padding: 0 20px; 
	background-color: #FFFFFF; 
	height: 1%; 
	font-size: 0.9em;
	color: #666666;
	margin-top: 0px; /*-20px;*/
	}	

#footermain { 
width: 1000px;
text-align: center;
	padding:0px 0px 0px 10px; 
	background-color: #FFFFFF; 
	height: 1%; 
	font-size: 0.9em;
	color: #666666;
/*margin-right:0px;
		margin-left:500px;*/
	margin-top: 0px; /*-20px;*/
	}	

	
		
	p,h1,pre {
		margin:0px 10px 10px 10px;
		}

p,h10,pre {
		margin:0px 10px 10px 10px;
		}

h1 {
color: #000000; /*444444*/
		font-size:2.0em; /*20px;*/
font-weight: normal;
		padding-top:10px;
padding-left:0px; /*40px;*/
text-align:left; 
		}

h10 {
color: #000000; /*444444*/
		font-size:1.8em; /*20px;*/
font-weight: normal;
		padding-top:10px;
padding-left:0px; /*40px;*/
text-align:left; 
		}

/* headers */
h2, h3, h4, h5, h6, h20 { 
	color: #000000; /*#666666;*/ 
	margin: 0; 
	font-weight: normal;
	font-family: Times New Roman, "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; letter-spacing: -1px;
	}
/* h2 { font-size: 1.8em; margin: 20px 0 15px; padding-bottom: 15px; border-bottom: 1px solid #ccc; } */
h2 { font-size: 1.8em; margin: 0px 0 15px 10px; padding-bottom: 15px; border-bottom: 1px solid #ccc; }
h20 { font-size: 1.8em; margin: 0px 0 15px 10px; padding-bottom:20px; /*padding:10px; padding-bottom: 15px; border-bottom: 1px solid #ccc;*/}
h3 { font-size: 1.6em; margin: 20px 0 15px; }
h4 { font-size: 1.4em; margin: 20px 0 10px; }
h5 { font-size: 1.2em; margin: 20px 0 5px; }	
h6 { font-size: 1em; margin: 20px 0 0; }

h7 { font-size: 1.8em; margin: 0px 0 15px 10px; padding-bottom: 15px; border-bottom: 1px solid #ccc; }

h11 {color: /* #222222 */ #0066CC; text-decoration: none;
	font-family: Times New Roman, "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; letter-spacing: -1px; font-size: 1.2em; }
h11:hover { font-weight: normal; text-decoration: underline; color: #000000;}

h11im {color: #FFFFFF; text-decoration: none;
	font-family: Times New Roman, "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; letter-spacing: -1px; font-size: 1.2em; 
border-color: #FFFFFF;}
h11im:hover { border-color: #999999;}

h1:hover { font-weight: normal; text-decoration: underline; color: #999999;}


h10:hover { font-weight: normal; text-decoration: none;}

/*------------------------------------------------------------*
**  Navigation
**------------------------------------------------------------*/
ul#nav {
	margin: 0 0 20px;
	padding: 0;
	list-style-type: none;
        color: #000000; /*#222222;*/
	border-top: 1px solid #FFFFFF /* #535457; */
	border-bottom: 1px solid #FFFFFF /* #050A10; */
	height: 1%;
text-align:center;
	}
ul#nav:after {	
	content: ".";
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	}
ul#nav li {
	/* this width needs changing 
	depending on the amount of links. 
	Divide 100% by the amount of links 
	and set the value here. 
	e.g. 5 links: 100/5 = 20% */ 	
	width: 50%;
	float: left; 
	margin: 0; 
font-size: 1.5em;
	background: #FFFFFF /* #3C3C3C  url(../img/nav_over_.png) no-repeat 50% 100% */; /* what happens with mouseover */
	}	
ul#nav li a {
	display: block; 
	background:  #FFFFFF /* #3C3C3C url(../img/nav_.png) repeat-x 50% 100% */;
	padding: 11px 0 14px;
	color: #000000 /*#222222*/ /* #fff; */
	text-decoration: none;
	border-right: 1px solid #FFFFFF /* #535457; */
	border-left: 1px solid #FFFFFF /* #050A10; */
	position: relative;	
	} /* how it shows up */	

ul#nav li.first a {	border-left-color: #535457; }
ul#nav li a:hover {  background-color: transparent; background-image: none; }
ul#nav li.on a,
ul#nav li.on a:hover { background-image: url(../img/nav_on_.png); }

/* horizontal rule */
hr { border: 0; height: 4px; background-color: #CCCCCC; 
color: #CCCCCC; margin: 30px 0 0; }

hr2 { border: 0; height: 4px; width: 700px; background-color: #CCCCCC; 
color: #CCCCCC; margin: 30px 0 0; }

img { /* border-color: #EEEEEE; */ border: 0; }

/* links */
a { text-decoration: none; color: #000000; /*#444444;*/ outline: none; }
a:hover { font-weight: normal; text-decoration: none; } 

a4 { text-decoration: none; color: #000000; /*#444444;*/ outline: none; }
a4:hover { font-weight: normal; text-decoration: none; }


a3 { text-decoration: none; color: #FFFFFF; /*#444444;*/ outline: none; }
a3:hover { font-weight: normal; text-decoration: none; color: #000000;}

/* links */
a2 { text-decoration: underline; font-weight: bold; color: #3366FF; outline: none; }
a2:hover {text-decoration: underline; font-weight: bold;  }

/* links */
a1 { text-decoration: none; color: #000000; /*#444444;*/ outline: none; }
a1:hover {text-decoration: none; font-weight: bold;  }

ul#nav1 {
	margin: 0 0 20px;
	padding: 0;
	list-style-type: none;
        color: #222222;
	border-top: 1px solid #FFFFFF /* #535457; */
	border-bottom: 1px solid #FFFFFF /* #050A10; */
	height: 1%;
text-align:center;
	}
ul#nav1:after {	
	content: ".";
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	}
ul#nav1 li {
	/* this width needs changing 
	depending on the amount of links. 
	Divide 100% by the amount of links 
	and set the value here. 
	e.g. 5 links: 100/5 = 20% */ 	
	width: 33%;
	float: left; 
	margin: 0; 
font-size: 1.5em;
	background: #FFFFFF /* #3C3C3C  url(../img/nav_over_.png) no-repeat 50% 100% */; /* what happens with mouseover */
	}	
ul#nav1 li a {
	display: block; 
	background:  #FFFFFF /* #3C3C3C url(../img/nav_.png) repeat-x 50% 100% */;
	padding: 11px 0 14px;
	color: #222222 /* #fff; */
	text-decoration: none;
	border-right: 1px solid #FFFFFF /* #535457; */
	border-left: 1px solid #FFFFFF /* #050A10; */
	position: relative;	
	} /* how it shows up */	

ul#nav1 li.first a {	border-left-color: #535457; }
ul#nav1 li a:hover {  background-color: transparent; background-image: none; }
ul#nav1 li.on a,
ul#nav1 li.on a:hover { background-image: url(../img/nav_on_.png); }

/*try to make the top line of links*/


ul#nav2 {
	margin: -50px 0 20px 400px; /*top R bottom L*/
	padding: 10px; /*0*/
	list-style-type: none;
        color: #222222;
	border-top: 1px solid #FFFFFF /* #535457; */
	border-bottom: 1px solid #FFFFFF /* #050A10; */
	height: 1%;
text-align:center;
	}
ul#nav2:after {	
	content: ".";
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	}
ul#nav2 li {
	/* this width needs changing 
	depending on the amount of links. 
	Divide 100% by the amount of links 
	and set the value here. 
	e.g. 5 links: 100/5 = 20% */ 	
	width: 100px; /*33%;*/
	float: left; 
	margin: 0; 
font-size: 1.5em;
	background: #FFFFFF /* #3C3C3C  url(../img/nav_over_.png) no-repeat 50% 100% */; /* what happens with mouseover */
	}	
ul#nav2 li a {
	display: block; 
	background:  #FFFFFF /* #3C3C3C url(../img/nav_.png) repeat-x 50% 100% */;
	padding: 11px 0 14px;
	color: #222222 /* #fff; */
	text-decoration: none;
	border-right: 1px solid #FFFFFF /* #535457; */
	border-left: 1px solid #FFFFFF /* #050A10; */
	position: relative;	
	} /* how it shows up */	

ul#nav2 li.first a {	border-left-color: #535457; }
ul#nav2 li a:hover {  color: #999999; text-decoration: underline;
background-color: transparent; background-image: none; }
ul#nav2 li.on a,
ul#nav2 li.on a:hover { 
color: #999999; text-decoration: underline;
background-image: url(../img/nav_on_.png); }

/*try to make the top line of links for the index page*/

ul#nav3 {
	margin: 200px 0 10px -5px; /*top R bottom L*/
	padding: 10px; /*0;*/
	list-style-type: none;
        color: #222222;
	border-top: 1px solid #FFFFFF /* #535457; */
	border-bottom: 1px solid #FFFFFF /* #050A10; */
	height: 1%;
text-align:center;
	}
ul#nav3:after {	
	content: ".";
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	}
ul#nav3 li {
	/* this width needs changing 
	depending on the amount of links. 
	Divide 100% by the amount of links 
	and set the value here. 
	e.g. 5 links: 100/5 = 20% */ 	
	width: 50%; /* 33% */
	float: left; 
	margin: 0; 
font-size: 1.5em;
	background: #FFFFFF /* #3C3C3C  url(../img/nav_over_.png) no-repeat 50% 100% */; /* what happens with mouseover */
	}	
ul#nav3 li a {
	display: block; 
	background:  #FFFFFF /* #3C3C3C url(../img/nav_.png) repeat-x 50% 100% */;
	padding: 11px 0 14px;
	color: #222222 /* #fff; */
	text-decoration: none;
	border-right: 1px solid #FFFFFF /* #535457; */
	border-left: 1px solid #FFFFFF /* #050A10; */
	position: relative;	
	} /* how it shows up */	

ul#nav3 li.first a {	border-left-color: #535457; }
ul#nav3 li a:hover { color: #999999; text-decoration: underline; background-color: transparent; background-image: none; }
ul#nav3 li.on a,
ul#nav3 li.on a:hover { background-image: url(../img/nav_on_.png); }

/* */

ul#group_header_links {
	margin: 0px; /*-50px 0 20px 400px; */ /*top R bottom L*/
	padding: 0px; /*0*/
	list-style-type: none;
        color: #222222;
	border-top: 1px solid #FFFFFF /* #535457; */
	border-bottom: 1px solid #FFFFFF /* #050A10; */
	height: 1%;
text-align:center;
	}
ul#group_header_links:after {	
	content: ".";
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	}
ul#group_header_links li {
	/* this width needs changing 
	depending on the amount of links. 
	Divide 100% by the amount of links 
	and set the value here. 
	e.g. 5 links: 100/5 = 20% */ 	
	width: 90px; /*90px;*/ /*33%;*/
	float: left; 
	margin: 0; 
font-size: 1.0em;
	background: #FFFFFF /* #3C3C3C  url(../img/nav_over_.png) no-repeat 50% 100% */; /* what happens with mouseover */
	}	
ul#group_header_links li a {
	display: block; 
	background:  #FFFFFF /* #3C3C3C url(../img/nav_.png) repeat-x 50% 100% */;
	padding: 11px 0 14px;
	color: #222222 /* #fff; */
	text-decoration: none;
	border-right: 1px solid #FFFFFF /* #535457; */
	border-left: 1px solid #FFFFFF /* #050A10; */
	position: relative;	
	} /* how it shows up */	

ul#group_header_links li.first a {	border-left-color: #535457; }
ul#group_header_links li a:hover {  color: #999999; text-decoration: underline;
background-color: transparent; background-image: none; }
ul#group_header_links li.on a,
ul#group_header_links li.on a:hover { 
color: #999999; text-decoration: underline;
background-image: url(../img/nav_on_.png); }


.highlightit img{
border: 1px solid #FFFFFF;
}

.highlightit:hover img{
border: 1px solid #000000;
}

.highlightit:hover{
color: red; /* Dummy definition to overcome IE bug */
}