@import url("navigation.css");
@import url("forms.css");
@import url("trackbar.css");
@import url("1tablesorter.css");
@import url("1tables.css");
@import url("dropmenu.css");

#keyserve { margin:0 auto; min-width:1000px; overflow:hidden; }

#menu {
  padding:0;
  margin:0;
  display: block !important;
  line-height:0px;
  height: 35px !important;
  background-image: url(/images/menu-bg.jpg);
  margin-top: 0px;
 position:relative;
  z-index:999;  
}
 
#menu li {
  display:block; width:10%;
  float:left;
}

#menu a, #menu a:visited{
  display:block; 
  text-decoration:none;
  color:#fff;
  line-height:28px;
  height:36px;
  font-weight: 100;
}

#menu a:hover, a.selected{
}

/* get rid of the table */
#menu table {
  position:absolute; 
  top:0; 
  left:0; 
  z-index:10;
}

/* hack for IE5.5 */
/** html #menu a, * html #menu a:visited {width:220px; w\idth:220px;}*/
/* style the link hover */
* html #menu a:hover {
  color:#fff; 
  /* background-color:#70838f; */
  position:relative;
  text-decoration:none;
}

#menu li:hover {position:relative;}


/* retain the hover colors for each sublevel IE7 and Firefox etc */
#menu a {
/*  padding: 0px 5px;*/
/*  margin:0px 5px;*/
  float: none !important; /*For Opera*/
  float: left; /*For IE*/
  display: block;
  width:100%;
  text-align:center;
  font: 14px/27px Arial, Helvetica, sans-serif;
  height: 36px;
  text-decoration: none;
  position:relative;
}

#menu li a.selected, #menu li:hover a, #menu li a:hover {
  color:#fff; 
  background-image:url(/images/btn-right.jpg);
  background-repeat:no-repeat;
  background-position:top right;
  text-decoration:none;
}

#menu li ul li a, #menu li ul li {
  background-image: none !important;
  text-align: left;
}
#menu li ul li:hover a, #menu li ul li a:hover {
  background-image: none;
  background-color: #70838f;
} 

#menu a span{
  display:none;
  position:absolute;
  top:0px; left:0px;
  height:36px; width:6px;
}

#menu ul a.selected span, #menu a:hover span, #menu li:hover a span{
  display:block;
  background-image:url(/images/btn-left.jpg);
  background-repeat:no-repeat;
  background-position:top left;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
#menu li ul {
  visibility:hidden;
  position:absolute;
  top:35px;
  left:6px;
  _left:4px;
  margin-left: 0;
  padding:3px;
  background:transparent url(/images/blank.gif);
}
#menu li ul { background:#353d43; width:300px}
#menu li ul li { margin:0; padding:0px; height:auto !important; height:1%; /*width:180px; _width:180px;*/ width:100%; border-spacing:none; background:none !important; float:left; border-bottom:1px solid #555;}
#menu li ul li a  { background:#353d43; height:auto !important; height:1%; padding:5px 0; margin:0px; line-height:1em !important;/* height:2em; width: 160px; _width: 180px;*/ text-align: left;  color:#eee !important}

/* for browsers that understand this is all you need for the flyouts */
#menu li:hover > ul {visibility:visible;}

/* for IE5.5 and IE6 you need to style each level hover */

/* keep the third level+ hidden when you hover on first level link */
#menu ul a:hover ul ul{
visibility:hidden;
}
/* keep the fourth level+ hidden when you hover on second level link */
#menu ul a:hover ul a:hover ul ul{
visibility:hidden;
}
/* keep the fifth level hidden when you hover on third level link */
#menu ul a:hover ul a:hover ul a:hover ul ul{
visibility:hidden;
}
/* make the second level visible when hover on first level link */
#menu ul a:hover ul {
visibility:visible;
}
/* make the third level visible when you hover over second level link */
#menu ul a:hover ul a:hover ul{ 
visibility:visible;
}
/* make the fourth level visible when you hover over third level link */
#menu ul a:hover ul a:hover ul a:hover ul { 
visibility:visible;
}
/* make the fifth level visible when you hover over fourth level link */
#menu ul a:hover ul a:hover ul a:hover ul a:hover ul { 
visibility:visible;
}

/***********************************************************************************/

a {
	color: #ffcc33;
	text-decoration: underline;
	}	

a:hover {
	color:#FFFF99;
	}

a img {
	border: none;
	}	
	
h1, h2, h3, h4, h5{
  font-family:Arial, Helvetica, sans-serif;
  margin:1em 0 .5em 0;
  font-weight:normal;
  color:#ffcc33;
}

h1{
  font-size:1.6em;
  margin:5px 0 10px 0;
  clear:left;  
}
h2{
  font-size:1.5em;
}
h3{
  font-size:1.45em;
}
h4{
  font-size:1.2em;
}
h5{
  font-size:1.1em;
}

hr {
	display: none;
	}

p {
	line-height: 1.2em;
	}	



body { margin:0; padding: 0; color: #fff; font-family: Arial; font-size: 100%; }
body { display: block; height: 100%; background-image: url(/images/content-bg.jpg); padding: 0 0px;}

b,p,span,div { color: #fff; font-family: Arial; font-size: 0.95em; }

div#head { display: block; height: 164px; background-image: url(/images/head-bg.jpg); color: #111; z-index:1 }
div#head h4 { margin-left: 10px; margin-top: 25px; font-family: Arial; font-size: 120%; font-weight: 100; text-transform:uppercase; }
div#head p  { margin-left: 10px; font-family: Arial; }
div#head a  { font-family: Arial; font-weight: bold; color: #e9e1da;  }

div#wrapper { padding:0; margin: 0px auto;   background: url(/images/menu-bg.jpg) repeat-x; background-position:0px -35px; width:90%; }
div#content { display: block; background: #515d65; padding: 20px; }

div#designer { padding-left: 65px; }
div#designer a {color: #ffffff; font-size: 70%; font-family: Arial; display: block;  padding: 0px;}
div#copyright {color: #ffffff; font-size: 70%; font-family: Arial; display: block;  padding: 25px; padding-right: 65px;}

div#fmenu { text-align: center; color: #ffffff;  margin-bottom:5px;}
div#fmenu a {color: #ffffff; font-size: 80%; font-family: Arial;  padding: 0px;}

.clearfix:after {
  content: ".";
  clear: both;
  height: 0px;
  visibility: hidden;
  display: block;
}

.clearfix {display:inline-block;}
.clearfix {display:block;}


.news {
  font-size:1em;
  margin-top:10px;
  /*border-right:1px dashed gray;*/
  margin-bottom:10px;
  padding:0 10px;
  width:auto; 
/*  overflow-y:auto;*/
}
.news div.item {
  margin: 3px 5px 7px 0px;
  padding:10px;
  border:1px solid #999;
  background-image:url(/images/news_item_bg.gif);
  background-repeat:repeat-x;
  background-color:#888;
  display:block;
}
.news .newsdate {
  color:#aaa;
  margin-left:0px;
  font-size:1.1em;
  font-weight:bold;
  display:block;
}

.news .newslinks {
  display:block; text-align:right;
  margin: 3px 5px 7px 0px;
}
#catalog { overflow: hidden; width:98%; margin:0px auto; padding:10px; margin-top:10px; margin-bottom:20px; background-color:#71838f;}
#catalog .string { display:block; overflow:hidden; width:100%; clear:both; background-image:url(/images/border-bottom.gif); background-repeat:repeat-x; background-position:top;}
#catalog .item { display:block; }
#catalog .item2 {  float: left; display:block; width:200px; height:320px;   margin-right:7px; margin-bottom:7px;}

#catalog .description{  line-height: 1.4em; }
#catalog .description p{  line-height: 1.4em; border-bottom:1px solid #ccc; margin:3px auto; }
#catalog h2{ margin:0px 0px 7px 0px; padding:0px; font-size:1.2em;}

#catalog .floatbox{
  display:block; width:200px;
  border:1px solid #333; background-color:#ffffff;
}

#catalog .holder {width:200px; height:200px; text-align:center; display:table-cell; vertical-align:middle; clear:right; background-color:#FFFFFF;}
#catalog .holder img {margin:0 auto; border:none;}
#catalog .aligncenter{text-align:center;}

#info { 
	width: 100%;  /* this will create a container 80% of the browser width */
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
} 

#leftblock {
	float: left; 
	width: 48%; /* since this element is floated, a width must be given */
	padding: 15px 0; /* top and bottom padding create visual space within this div  */
	margin-right:20px;
	font-size:1em;

}
#leftblock p {
	margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
	margin-right: 10px;
}

#leftblock img, #rightblock img{
	float:left; margin:0 15px 10px 0;
}

#rightblock {
	overflow:hidden; width:48%;	font-size:1em;
	margin: 0 0px 0 0; /* the right margin can be given in percentages or pixels. It creates the space down the right side of the page. */

}