/* visual styles */
/* colors */
body {
   color:           black;
   background:      rgb(251,253,255); /* lightest */
}

a:link 		{ color: rgb(45,90,180); }
a:visited      	{ color: rgb(30,60,120); }
a:hover 	{ color: rgb(60,120,240);  text-decoration: underline; }
a:active 	{ color: rgb(30,60,120); background: rgb(230, 250, 255); }

#side a:link 		{ color: rgb(120,60,30); }
#side a:visited 	{ color: rgb(60,20,10); }
#side a:hover 	{ color: rgb(240,120,60);  text-decoration: underline; }
#side a:active 	{ color: rgb(60,20,10); background: rgb(255, 250, 230); }

.llighter { background: rgb(234,244,255); } 	/* lighter */
.lighter  { background: rgb(225,239,253); } 	/* light */
.medium   { background: rgb(216,234,252); } 	/* medium */
.darker   { background: rgb(206,224,242); } 	/* dark*/
.ddarker  { background: rgb(159,191,223); } 	/* darker */

.spacer   { background: rgb(0,0,0); }

.box, .floatbox, .navbox, .imgbox { color: black; } 

.box { background: rgb(242, 239, 206);
	}

.floatbox { background: rgb(230,245,250); }

.navbox { background: rgb(240,250,255); }

.imgbox { background: rgb(255,255,255); }

#innercontent .highlight {		
   color:           inherit;
   background:      rgb(140,180,210);
}

#sidebar .highlight {
   color:           inherit;
   background:      rgb(240,253,255);
}

#header {		
   color:           rgb(215,232,250);
   background:      rgb(61, 107, 153);
}

#header a { text-decoration: none; }

#header a:link, #header a:visited {
   color:           rgb(230,250,255);
   background:      transparent;
}

#header .highlight, #header a.highlight:link, #header a.highlight:visited {
   color:           white;
   background:      transparent;
}

#header .left, #header .left a:link, #header .left a:visited {
   color:           white;
   background:      transparent;
}

#header .left .alt {
   color:           rgb(206,233,242);
   background:      transparent;
}

#header .subheader {
   color:           white;
   background:      rgb(0%, 10%, 20%);
}

#header .subheader a:link, #header .subheader a:visited {
   color:           white;
   background:      transparent;
}

#atoz li a { text-decoration: none; color: #600; background: transparent url(../images/circle-20.png ) no-repeat center; }
#atoz li a:hover { color: #a50; }

#sidebar { color: black; background: rgb(206,233,242); }

#sidebar div { border-color: rgb(0,30,60); }

#sidebar .title, #sidebar .title a:link, #sidebar .title a:visited { color: black; background: transparent; }
#sidebar .title a:hover { color: rgb(60,120,240); background: transparent; }

#centerbar { background: rgb(251,253,254); border-right-color: rgb(0,75,150); }

#innercontent {
   color:           black;
   background:      rgb(251,253,254);
}

#content h1 {			/* Should be used once, following navhead */
   color:           rgb(64,100,128);
   background:      inherit;
}

#footer a:link, #footer a:visited { text-decoration: underline; color:  rgb(255,250,230); background: transparent; }

#footer {
   color:           white;
   background:      rgb( 0%, 20%, 40%); 
}

.disabled {
   color:           rgb( 60%, 60%, 60%);
}

/* highlights */
#innercontent .highlight {		
   margin:          1ex 0;
   padding:         1ex 2.5em;
   border:          1px solid rgb(0,75,150);
}

#sidebar .highlight {
   border-top:      1px solid rgb(0,75,150);
   border-bottom:   1px solid rgb(0,75,150);
}

#header .highlight, #header a.highlight:link, #header a.highlight:visited {
   color:           rgb(255,222,154);
   background:      transparent;
}

/* fonts */
/* a:hover is underline text-decoration, see in the section of colors */

#header .left, #header .left a:link, #header .left a:visited {
   font-size:       144%;
   font-weight:     bold;
   text-decoration: none;
   padding: 0;
   margin: 0;
}

#header .left img { vertical-align: top; }

#header .right {
   font-size:       80%;
   text-align:      right;
}

#header .right form input {
   font-size:       80%;
   vertical-align:  middle;
}

#header .subheader { font-size: 80%; }

#header .subheader a:link, #header .subheader a:visited { font-weight: bolder; }

#atoz li { list-style-type: none; }

#atoz li a { font: normal .75em Helvetica, sans-serif; text-align: center; vertical-align: middle; text-decoration: none; }

#atoz h2 { font: normal 1em Verdana, Arial, Helvetica, sans-serif; }

#atoz h2 a {text-decoration: none;}

#sidebar { border-style: none; }

#sidebar div { font-size: 90%; }

#sidebar ul { list-style: none outside; vertical-align: bottom; /* for IE5/win */ }

#sidebar li { list-style: none; vertical-align: bottom; /* for IE5/win */ }

#sidebar div { text-align: right; /* for IE5/win */ }

#sidebar p { font-size:90%; text-align: right; /* for IE5/win */ }

#sidebar li { text-align: right; /* for IE5/win */ }

#sidebar li li { text-align: right; /* for IE5/win */ }

#innercontent { text-align: left; line-height: 1.2; }

#navhead { font-size: 80%; }

#footer { font-size: 80%; text-align: left; }

#nav ul li a { font-weight: bold; border: 0; }

#nav ul li li a { font-weight: normal; font-style: italic; border: 0; }

/* visibility */
#header hr, #footer hr, #sidebar hr, #centerbar hr { display: none !important; }

#header .subheader { clear: both; }

#atoz li { float: left; }

#atoz li a { width: 1.4em; height: 1.4em; display: block; float: left; }

#sidebar li { display: block; position: relative; }

#navhead hr { display: none; }

#mainlink 	{ display: none !important; }

#endmain 	{ visibility: hidden; clear: both; }

/*#nav ul li { display: inline; height: 1%;} */
#nav a { text-decoration: none; }

/* borders, margins and paddings */
#header .left { margin: 0; padding: 0; }

#header .right { margin: 0; padding: 0.5em 0.5em 0 0; }

#header .right a:link, #header .right a:visited {
   margin:          0;
   padding:         0 0.5em;
}

#header .right form {
   margin:          0;
   padding:         0.25em 0 0 0;
}

#header .subheader {
   margin:          0;
   padding:         0.25em 1.5em 0.5em 0.5em; /* For IE/Win */
}

#header>.subheader {
   padding:         0.5em 1.5em 0.5em 0.5em; /* For all other browsers */
}

#header .subheader a:link, #header .subheader a:visited {
   margin:          0;
   padding:         0 0.5em;
}

#atoz { margin:  0.25em; }

#atoz li a { padding: 0.15ex 0.15em; font: normal .75em Helvetica, sans-serif; }

#atoz h2 { margin: 0 0 .25em 0; }

#sidebar div {
   margin:          0;
   padding:         1ex 0.25em 0 0;
}

#sidebar #nav {
   margin:          0;
   padding:         1ex 0em;
   border-bottom-style:   solid;
   border-bottom-width: 1px;
}

#sidebar p { margin: 2ex 1em 1ex; }

#sidebar ul { padding: 0 0; }

#nav > ul > li , #nav > ul > li > ul > li{
   border-top:      1px solid rgb(206,233,242);
   border-bottom:   1px solid rgb(206,233,242);
}

#sidebar li { margin: 0; padding: 0.25ex 1em; }

#sidebar li a  { margin: 0.25ex -1em; padding: 0.25ex 1em; }

#sidebar li li  { margin: 0.25ex -1em; padding: 0.25ex 1em; }

#sidebar li li.disabled { margin: 0; padding: 0.25ex 0em; }

#content { margin: 0 ;/* padding: 1ex 1em;*/ }

#innercontent { display: block; float:left; max-width: 70%} 
#innercontent { padding: 0.25ex 1em; }


/*#content div { margin: 0.5ex 0; } */
#footer ul.hlist  { margin: 0; padding: 0; }

#footer .hlist li {
   margin:          0;
   padding:  0 0.25em 0 0.5em ;
}

#footer .hlist li:first-child {
   margin:  0;
   padding: 0;
}

/* classes for cards */
#main {
	background: rgb(230,200,180);
	padding: 2ex 1em;
}

.cardleft {
	margin: 0 0 1em;
	float: left;
	width: 49%;
}
.cardright {
	margin-left: 50%
	/*margin: 0 1% 2em 50%; */
}
.card {
	clear: left;
	margin: 0 0;
	padding: 1ex 0;
	line-height: 1.5;
}

.cardleft h2, .cardright h2, .card h2 {
	font-size: 100%;
	background: #000000;
	color: #FFD400;
	display: inline;
	padding: 1ex 0.5em;
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing: 0.2em;
}

.cardleft dl dd, .cardright dl dd , .card dl dd {
	padding-bottom: 0.5em;
}

.cardleft div, .cardright div, .card div {
	border: 2px solid #000000;
	background: #FFFFFF;
	padding:  0 ;
	margin: 0 ; 
	/* the next two lines xpand the div to heigth of left inner div */
	overflow: auto;
}

div.lefthalf {
	float: left;
	width: 49%;
	border: 0;
	margin: 0; 
	padding: 0;
}

div.righthalf {
	border: 0;
	margin: 0;
	padding: 0;
}


<style type="text/css">
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/click_gallery.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
#info p {margin-left:15px;}
/* defaults required for IE6 */
a {color:#000;}
a:visited {color:#111;}
a:active {color:#222;}
a:hover {text-decoration:none;}

.photo {width:732px; position:relative; height:550px; margin:0 auto 20px auto;}
.photo ul, .photo ul ul {padding:0; margin:0; border:0; list-style:none; width:215px;}
.photo ul ul {margin-left:-9999px; height:0; overflow:hidden;}
.photo ul li {width:215px; background:#ddd; float:left; background:#fff url(button/gallery_2.gif) no-repeat;}
.photo ul li a.set {display:block; text-align:center; width:215px; line-height:30px; background:#fff url((../images/highlight.png) no-repeat; font-family: verdana, arial, sans-serif; font-size:11px; text-decoration:none;}
.photo ul li table {margin:0; padding:0; display:none;}

.photo img {border:0;}

.photo ul li a.set:hover {background:#fff url(button/gallery_1.gif) no-repeat;}


.photo ul li a.set:active {white-space: normal; background:#fff url(button/gallery_2.gif) no-repeat;}
.photo ul li a.set:focus {outline:0; background:#fff url(button/gallery_2.gif) no-repeat;}

.photo ul li a.set:active i,
.photo ul li a.set:focus i
{display:block; width:480px; height:360px; position:absolute; left:250px; top:0; border:1px solid #fff; background:#fff;}


.photo ul li a.set:active table,
.photo ul li a.set:focus table
{padding:0 0 10px 0; margin-top:-2px; margin-bottom:2px; display:block; border:1px solid #888; border-width:0 1px 1px;}

.photo ul a.set:active ul,
.photo ul a.set:focus ul
{margin:0; width:207px; height:auto; overflow:visible; background:transparent; padding-bottom:10px;}

.photo ul a.set:active ul li,
.photo ul a.set:focus ul li
{float:left; display:inline; width:56px; margin:4px 6px; background:transparent;}

.photo ul a.set:active ul li a,
.photo ul a.set:focus ul li
{background:transparent; line-height:1.3em;}

.photo ul a.set:active ul li a img,
.photo ul a.set:focus ul li img
{display:block; border:3px solid #fff; cursor:default; margin:0 auto;}

.photo ul a.set:active ul li a em,
.photo ul a.set:focus ul li em
{position:absolute; left:-9999px; width:480px;}

.photo ul a.set:active ul li a:hover,
.photo ul a.set:focus ul li:hover
{background:#fff;}

.photo ul a.set:active ul li a:hover em,
.photo ul a.set:focus ul li:hover em
{left:250px; z-index:0; top:0;}

.photo ul a.set:active ul li a:hover img,
.photo ul a.set:focus ul li:hover img
{border:3px solid #fc0; cursor:default;}

.photo ul a.set:active ul li a:hover em img,
.photo ul a.set:focus ul li:hover em img
{padding:1px; border:1px solid #888; margin-bottom:10px;}

.photo ul a.set:active b,
.photo ul a.set:focus b
{font-weight:normal; font-style:normal; background:#fff;}
.photo .default {width:480px; height:360px; position:absolute; left:250px; top:0; border:1px solid #888;}
</style>