/* Import Reset */
@import url("reset.css");

/* Global Elements
-------------------------------------------------------------- */

*{padding:0; margin:0}

body {
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Helvetica, Arial, Verdana, sans-serif;
	font-size: 80%;
	color: #555;
	border-top: 3px solid #282828;
	background: #fff url(../img/bg.gif) repeat-x;
}

#wrapper {
	width: 920px;
	margin: 0 auto;	
}

h1 {font-size: 180%;}
h2 {font-size: 170%;}
h3 {font-size: 140%;}
h4 {font-size: 130%;}
h5 {font-size: 120%;}
h6 {font-size: 110%;}
h7 {font-size: 170%;}

h1, h2, h3, h4, h5, h6 {line-height:1.5em; font-weight:normal; color:#444;}
h7 {line-height:1.5em; font-weight:normal; color:#FF0000;}

/* list */
ul {padding-left:26px; margin-bottom:1em; font-size:1em; list-style:square;}
ol {padding-left:26px; margin-bottom:1em; font-size:1em; list-style-type:decimal;}
ol ol {list-style:upper-alpha;}
ol ol ol {list-style:lower-roman;}
ol ol ol ol {list-style:lower-alpha;}
ul ul, ol ol, ul ol, ol ul {margin-bottom:0;}


/* table */
table {margin: 10px 0 30px 0;}
th {padding:3px; border:1px solid #eee; font-weight:bold; background:#f5f5f5;}
td {padding:3px; border:1px solid #f5f5f5; background:#fff;}

a {color:#009D54; text-decoration:none;}

p {text-align:justify; padding-bottom:1em; font-size: 1em;}

blockquote {padding:0 40px;margin:10px 20px;text-align:justify;background: url(../img/blockquote.gif) no-repeat;}


/* Header
-------------------------------------------------------------- */

#header {
	padding-top: 40px;
}

#title h1 {
	margin: 0 10px 0 10px;
	padding: 0 10px 0 0;
	display: inline;
    font-size: 3em;
    font-weight: bold;
    text-transform: uppercase;
	letter-spacing: 1px;
	border-right: 1px solid #555;
}

#title a {
	color: #333;
}

#title h2 {
	display: inline;
    font-style: italic;
    font-size: 1.75em;
	color: #009D54;
	vertical-align: 0.29em;
}

#title img.logo {
	float: left;
	margin: -15px 400px -15px 0px;
	border: none;
}
#topnav { 
 	font-size: 0.8em;
  color: #000;
 	background-color: #FFCF29;
 	border: 1px #00009C solid;
 	padding: 0.5em;
}


/* Navigation */

#nav {
	margin-top: 10px;
	margin-bottom: 0;
	list-style: none;
	float: right;
	font-size: 13px;
}

#nav li {
	float: left;
	background: url(../img/nav_border.gif) no-repeat right top;
}

#nav li a {
	display: block;
	color: #555;
	padding: 0px 10px 10px 10px;
}

#nav li.last {
	background-image: none;
}

#nav li a.activ { 
	color: #009D54;
}

#nav li a:hover {
	color: #009D54;
	background: url(../img/nav.gif) no-repeat center bottom;
}
#nav {
	margin-top: 10px;
	margin-bottom: 0;
	list-style: none;
	float: right;
	font-size: 13px;
}

               #nav li.subnav ul {
            margin: 0;
            padding: 0;
            display: none;
            list-style: none;
            position: absolute;
            background: #f5f5f5;
            border-top: 1px solid #09C;
            z-index: 1000;
            min-width: 120px;

        }
        #nav li.subnav:hover ul {
            display: block;
        }
       
        #nav li.subnav ul li {
            float: none;
        }
       
        #nav li.subnav ul li a {
            padding: 5px 10px;
        }
       
        #nav li.subnav ul li a:hover {
            background: none;
        }
        
       #nav li.subsubnav ul.subsub {
            display: none;
            border: none;
            margin-left: 100%;
            margin-top: -28px;
        }

        #nav li.subsubnav:hover ul.subsub {
            display: inline;
        }
        #nav li.subnav ul {
            margin: 0;
            padding: 0;
            display: none;
            list-style: none;
            position: absolute;
	 
            background:url(../img/submenu_bg.png);
            border-top: 1px solid #000000;
            z-index: 1000;
            min-width: 120px;
        }
        #nav li.subnav:hover ul { 
            display: block; 
        }
        
        #nav li.subnav ul li {
            float: none;
        }
        
        #nav li.subnav ul li a {
            padding: 5px 10px;
            
        }
	#nav li.subnav ul li a {
	
	font-size: 11px;
	color: #555;
border-bottom: 1px dotted #555;
}
        
        #nav li.subnav ul li a:hover {
            background:none;
	color: #009D54;
        


}
       #nav li.subsubnav ul.subsub {
            display: none;
            border: none;
            margin-left: 100%;
            margin-top: -28px;
            min-width: 200px;	    
        }

        #nav li.subsubnav:hover ul.subsub {
            display: inline;

        }



        
/* Teaser */

#teaser {
	clear:both;
	height: 150px;
	background: url(../img/bg_pattern.gif) repeat;
	border: 1px solid #ddd;
	padding: 20px 0 20px 0;
	margin-bottom: 1em;
}

#teaser .more {
	margin-top: 10px;
	font-size: 11px;
	color: #333;
	width: 105px;
	height: 28px;
	line-height: 28px;
	text-indent: 12px;	
	display: block;
	background-image: url(../img/more.gif);
	background-position: top left;
}

#teaser .more:hover {
	color: #009D54;
	background-position: bottom left;
}

#teaser .teaser_text {
	width: 250px; 
	float: left;
	font-size: 14px;
}

#slides img {
	width: 560px; 
	height: 150px;
	float: left;
	margin-right: 60px;
	border: 1px solid #ddd;
}

#teaser h2 {
	color: #009D54;
	text-align: center
}

#teaser h3 {
	color: #009D54;
	text-align: center
}

#teaser p {
	color: #fff;
	padding-bottom: 0;
	font-size: 0.9em;
}

#controller {
	display: none;
}

#prevNext .jFlowPrev {
	float: left;
	padding: 60px 5px 70px 5px;
}

#prevNext .jFlowNext {
	float: right;
	padding: 60px 5px 70px 5px;
}

#fadeimg {
	list-style: none;
	float: left;
	width: 560px;
	margin-right: 62px;
	padding-left: 17px;
}

#staticimg {
	padding-left: 17px;
}


/* Main
-------------------------------------------------------------- */



/* Content */

#content .tabberlive .tabbertabhide {
 display:none;
}

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
#content .tabber {
}
#content .tabberlive {
 margin-top:1em;
}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
#content ul.tabbernav
{
 margin:0;

 padding: 3px 0;
 border-bottom: 1px solid #778;
 font: bold 12px Verdana, sans-serif;
width: 600px;

}

#content ul.tabbernav li
{
 list-style: none;
 margin: 0;
 display: inline;

}

#content ul.tabbernav li a
{
 padding: 3px 0.5em;

 margin-left: 0px;
 border: 1px solid #778;
 border-bottom: none;
 background: #DDE;
 text-decoration: none;
}

#content ul.tabbernav li a:link { color: #448; }
ul.tabbernav li a:visited { color: #667; }

#content ul.tabbernav li a:hover
{
 color: #000;
 background: #AAE;
 border-color: #227;
}

#content ul.tabbernav li.tabberactive a
{
 background-color: #fff;
 border-bottom: 1px solid #fff;
}

#content ul.tabbernav li.tabberactive a:hover
{
 color: #000;
 background: white;
 border-bottom: 1px solid white;
}

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
#content .tabberlive .tabbertab {
 padding:5px;

 border-top:0;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Helvetica, Arial, Verdana, sans-serif;
	font-size: 1em;
	color: #555;
width: 600px;




 /* If you don't want the tab size changing whenever a tab is changed
    you can set a fixed height */

 /* height:200px; */

 /* If you set a fix height set overflow to auto and you will get a
    scrollbar when necessary */

 /* overflow:auto; */
}



/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
#content .tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
 height:200px;
 overflow:auto;
}

#content {
	width: 600px;
	margin-right: 35px;
	margin-bottom: 30px;
	float: left;
}
#content .popup {
	width: 600px;
	margin-right: 35px;
	margin-bottom: 30px;
	float: left;
}

#content a:hover {
	text-decoration: underline;
}

#content a.more {
	font-size: 0.8em;
}

#content a:hover.more {
	text-decoration: none;
	border-bottom: 1px dotted #09C;
}

#content img.left {
	float: left;
	margin: 5px 10px 0 0;
	border: 1px solid #ddd;
}

#content img.right {
	float: right;
	margin: 5px 0 0 10px;
	border: 1px solid #ddd;
}

#content a img {
	border: 1px solid #ddd;
	margin-right: 5px;
}

#content a:hover img {
	border: 1px solid #666;	
}

#content .box-left {
	width: 280px;
	float: left;
	margin-right:40px;	
}

#content .box-right {
	width: 280px;
	float: right;
}

#content h2, #sidebar h2 {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	border-bottom: 1px solid #ddd;	
}

#content h7, #sidebar h7 {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	border-bottom: 1px solid #ddd;	
}

#content div.table1 {
  	float: left;
  	width: 500px;
  	border: none;
	margin: 0 0 -15px 0;


}
#content div.table1 p {
  text-align: left;
  font-style: italic;
  font-size: 0.7em;
  text-indent: 0;

}
#content div.figure1 {
  	float: left;
  	width: 400px;
  	border: none;
	margin: 0 10px 0 0;


}
#content div.figure1 p {
  text-align: left;
  font-style: italic;
  font-size: 0.7em;
  text-indent: 0;
 

}


#content div.figure2 {
  	float: right;
  	width: 400px;
  	border: none;
	margin: 0 0 0 10px;


}
#content div.figure2 p {
  text-align: left;
  font-style: italic;
  font-size: 0.7em;
  text-indent: 0;

}


#content div.figure3 {
  	float: left;
  	width: 250px;
  	border: none;
	margin: 0 10px 0 0;


}
#content div.figure3 p {
  text-align: left;
  font-style: italic;
  font-size: 0.7em;
  text-indent: 0;

}


#content div.figure4 {
  	float: right;
  	width: 250px;
  	border: none;
	margin: 0 0 0 10px;


}
#content div.figure4 p {
  text-align: left;
  font-style: italic;
  font-size: 0.7em;
  text-indent: 0;

}


#content div.figure5 {
  	float: left;
  	width: 195px;
  	border: none;
	margin: 0 10px 0 0;


}
#content div.figure5 p {
  text-align: left;
  font-style: italic;
  font-size: 0.7em;
  text-indent: 0;
}


#content div.figure6 {
  	float: left;
  	width: 290px;
  	border: none;
	margin: 0 10px 0 0;


}
#content div.figure6 p {
  text-align: left;
  font-style: italic;
  font-size: 0.7em;
  text-indent: 0;
}

#content div.figure7 {
  	float: right;
  	width: 290px;
  	border: none;
	margin: 0 0 0 10px;


}
#content div.figure7 p {
  text-align: left;
  font-style: italic;
  font-size: 0.7em;
  text-indent: 0;

}

#content div.figure8 {
  	float: left;
  	width: 175px;
  	border: none;
	margin: 0 10px 0 0;


}
#content div.figure8 p {
  text-align: left;
  font-style: italic;
  font-size: 0.7em;
  text-indent: 0;
 

}#content div.figure9 {
  	float: right;
  	width: 136px;
  	border: none;
	margin: 0 0 0 10px;


}
#content div.figure9 p {
  text-align: left;
  font-style: italic;
  font-size: 0.7em;
  text-indent: 0;

}

#content div.figure10 {
  	float: right;
  	width: 188px;
  	border: none;
	margin: 0 0 0 10px;


}
#content div.figure10 p {
  text-align: left;
  font-style: italic;
  font-size: 0.7em;
  text-indent: 0;
}
#content div.figure11 {
  	float: center;
  	width: 471px;
  	border: none;
	margin: 0 10px 0 0;


}
#content div.figure11 p {
  text-align: left;
  font-style: italic;
  font-size: 0.7em;
  text-indent: 0;
 

}

#content img.scaled {
  width: 100%;
}

#content .thumbnail{
position: relative;
z-index: 0;
}

#content .thumbnail:hover{
background-color: transparent;
z-index: 50;
}

#content .thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background:url(../img/submenu_bg.png);
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

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

#content .thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -450px;
left: 10px; /*position where enlarged image should offset horizontally */

}

#content .thumbnail1{ /*use with tall images*/
position: relative;
z-index: 0;
}

#content .thumbnail1:hover{
background-color: transparent;
z-index: 50;
}
#content .thumbnail1 span{ /*CSS for enlarged image*/
position: absolute;
background:url(../img/submenu_bg.png);
padding: 5px;
left: -1000px;
width: 650px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

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

#content .thumbnail1:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

#content .thumbnail2{/*use with text link*/
position: relative;
z-index: 0;
}

#content .thumbnail2:hover{
background-color: transparent;
z-index: 50;
}

#content .thumbnail2 span{ /*CSS for enlarged image*/
position: absolute;
background:url(../img/submenu_bg.png);
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-align: left;
font-style: italic;
font-size: 0.7em;
text-indent: 0;
}

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

#content .thumbnail2:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -50px;
left: 10px; /*position where enlarged image should offset horizontally */

}

#content .thumbnail3{/*use with image*/
position: relative;
z-index: 0;
}

#content .thumbnail3:hover{
background-color: transparent;
z-index: 50;
}

#content .thumbnail3 span{ /*CSS for enlarged image*/
position: absolute;
background:url(../img/submenu_bg.png);
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

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

#content .thumbnail3:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -50px;
left: 10px; /*position where enlarged image should offset horizontally */

}



/* Sidebar */

#sidebar {
	width: 280px;
	float: left;
}

#sidebar .sidebar-entry {

}

#sidebar a.more {
	font-size: 0.8em;
}

#sidebar a.ref {
	font-size: 0.1em;
}

#sidebar a:hover.more{
	text-decoration: none;
	border-bottom: 1px dotted #09C;


}
#sidebar .date {
	font-size: 0.8em;
	text-transform: uppercase;
	color: #666;	
}

#sidebar .sidebar-entry img.left {
	float: left;
	margin-right: 10px;
	border: 1px solid #ddd;
}

#sidebar .sidebar-entry img.right {
	float: right;
	margin-left: 10px;
	border: 1px solid #ddd;
}
#sidebar a:hover img {
	border: 1px solid #666;	

}

#sidebar a. img {
	border: 1px solid #ddd;
	margin-right: 5px;

}
#sidebar div.figure1 {
  	float: left;
  	width: 250px;
  	border: none;
	margin: 0 10px 0 0;


}
#sidebar div.figure1 p {
  text-align: left;
  font-style: italic;
  font-size: 0.7em;
  text-indent: 0;

}


#sidebar div.figure2 {
  	float: right;
  	width: 400px;
  	border: none;
	margin: 0 0 0 10px;


}
#sidebar div.figure2 p {
  text-align: left;
  font-style: italic;
  font-size: 0.7em;
  text-indent: 0;


}

#sidebar div.figure9{
  	float: left;
  	width: 200px;
  	border: none;
	margin: 0 10px 0 0;


}
#sidebar div.figure9 p {
  text-align: left;
  font-style: italic;
  font-size: 0.7em;
  text-indent: 0;
}

/* Footer
-------------------------------------------------------------- */

#footer {
	clear: both;
	margin-bottom: 20px;
	padding: 10px;
	border-top: 1px solid #ddd;	
}

#footer ul {
	list-style: none;
}

#footer ul li {
	float: left;

}

#footer ul li{
	font-size: 0.8em;
	color: #333;
	padding-left: 10px;
	padding-right: 10px;
	border-right: 1px solid #ddd;

}

#footer ul li a.last {
	border: none;
}

#footer ul li a:hover {
	color: #09C;
}


/* Contact Form
-------------------------------------------------------------- */

#contact {
	margin: 20px 0 30px 0;
}

#contact .nodisplay {
	display: none;
}

#contact label { 
	margin-top: 10px;
	padding: 0 0 3px 3px;
	display: block; 
}

#contact input.text { 
	width: 200px;
	color: #333;
	padding: 3px;
	margin: 1px 0;
	border: 1px solid #ccc; 
}

#contact textarea {
	border: 1px solid #ccc; 
	height: 150px;
	width: 350px
}

#contact input.button {
	display: block;
	margin-top: 10px;
	background: url(../img/submit.gif); 
	width: 71px; 
	height: 27px; 
	border: none;
}

p#success, p#bademail, p#badserver {
	width: 350px;
	padding: 3px 10px;
	background: #f5f5f5;
	border: 1px solid #ddd;
	margin: 10px 0;
	text-align: center;
	display: none;
}

p#success {
	color: #9dbf96;
}

p#bademail, p#badserver {
	color: #ef656b;
}