@charset "utf-8";

@font-face {
	font-family: "Impact";
	src: url("../fonts/impact.ttf");
}

input[type=text], textarea{
    background-color: #666;
    color: white;
}

#container{
	width: 970px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
}

#content{
	margin-top: 10px;
	padding-top: 10px;
	padding-left: 5px;
	padding-right: 5px;
	border: solid 2px #666;		
}

#header{
	background-image:url('../images/logo_transparent.png');
	width: 970px;
	height: 51px
}

#menu{
	border: 1px solid #666;
	width: 190px;
        text-align: left !important;
}

#content-1 #content-2 {
        text-align: left !important;
}

#information-system{
	border: 1px solid #666;	
	margin-bottom: 10px;
	min-height: 150px
}

div.top-border{
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	
	border-top: solid #666 2px;	
}

body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background: #000000;
	
	margin: 0;
	padding: 0;
	color: #adc4cf;
	
	
}

div.bar{
	background-color: black;
	height: inherit !important;
	font: 100%/1.4 "Impact", Verdana, Arial, Helvetica;
	padding-left: 10px;
	padding-right: 10px;
	
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	
	border-top: solid #666 3px;	
}

div.t-left {
        text-align: left !important;
}

div.t-right {
        text-align: right !important;
}

div.heading{
	font: 100%/1.4 "Impact", Verdana, Arial, Helvetica;
	background-color: black;
	border-bottom: solid 2px #666;
	height: 31px;
	width: 158px;
	float: left;
	margin: 0px;
	padding: 0px;	
	padding-left: 10px !important;
	
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

div.info-bar{
	font: 100%/1.4 "Impact", Verdana, Arial, Helvetica;
	background-color: black;
	
	height: 31px;

}

div{
	/*box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	
	z-index: 1;*/
}

div.background{
	
	background-image: url('../images/background.png');
	background-repeat:no-repeat;
	
	width: 1185px;
	height: 790px;
	z-index: -100;
	
	margin-top: 101px;
	margin-left: auto;
	margin-right: auto;
}

div.background-border{
	position:relative;
	top: 85px;
	left: -4px;
	width: 970px; 
	height: 750px; 
	border: #666 solid medium; 
	margin-left:auto; 
	margin-right: auto; 
	z-index: 0;
	
	filter:alpha(opacity=60); 
    -moz-opacity: 0.6; 
    opacity: 0.6;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl {
	padding: 0;
	margin: 0;
}

hr{
    color: #666;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Impact", Charcoal, sans-serif;
    font-variant:small-caps;
    color: #adc4cf;
    margin: 0px;
    padding-left: 20px;
    padding-right: 20px;
}

p{
	padding-left: 20px;
	padding-right: 15px;
	text-align:justify;
	font-size: 17px;
	font-family: "Myriad";
}

a{
    color: #618a9d;
}

a:hover{
    color: #618a9d;
}

p.italic{
	font-size: 12px;
	font-style:italic;
	font-family: "Myriad Light", Gadget, sans-serif, Charcoal, sans-serif;
	font-weight:bold;
}

a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: none;
}

/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
	/* [disabled]color: #42413C; */
	text-decoration:underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	text-decoration: none;
}

/* ~~this fixed width container surrounds the other divs~~ */
.container {	
	position: relative;
	top: -55px;
	z-index: 10;
}

/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
		margin-top: -891px;
        width: 1185px;
        margin-left: auto;
        margin-right: auto;
}

.center{
    margin-left: auto;
    margin-right: auto;
}


.left-menu {
	float: left;
	border:thin #666 solid;
	width: 150px;
	height: 698px;
}


/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
	list-style: none; /* this removes the list marker */
	margin-bottom:15px;
/* this creates the space between the navigation on the content below */
}
ul.nav li {

	padding-top: 5px;
	padding-left: 15px;
}
ul.nav a, ul.nav a:visited { 
	color: #618a9d;
	text-decoration: none;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
	color: white;
	text-decoration:underline;
}

div.slash{
    background-image:url('../images/slash.png');
    width: 37px;
    height: 37px;
}

div.triangle-left {
	background-image:url('../images/triangle-left.png');
	width: 32px;
	height: 31px;
	float: right;

	filter:alpha(opacity=60); 
        -moz-opacity: 0.6;
        opacity: 0.6;
}

div.triangle-left-down{
	background-image:url('../images/triangle-left-down.png');
	width: 32px;
	height: 31px;

}

div.triangle-right-up{
	background-image:url('../images/triangle-right-up.png');
	width: 32px;
	height: 31px;
	float: right;
}

div.triangle-right-down{
	background-image:url('../images/triangle-right-down.png');
	width: 31px;
	height: 31px;
	float: left;
}

div.bookmark{
	border-top: thin #666 solid;
    border-right: thin #666 solid;
}

hr{
    margin-bottom: 5px;
}

img.flag{
	padding-top: 5px;
	height: 20px;
}

/* ~~ The footer ~~ */
.footer {
	padding: 10px 0;
	background: #CCC49F;
	position: relative;/* this gives IE6 hasLayout to properly clear */
	clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
}

/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

.background-5{
	background-image:url('../images/menu-tab-background.png');
	width: 190px;
	height: 31px;
	border: none;
}
.no-padding{
    padding: 0px;
}

.border-thin{
    border: solid #666 1px;;
}

.height-36{
    height: 36px;
}

.height-37{
    height: 37px;
}

.height-440{
	height: 440px;
}

.height-664{
    height: 664px;
}

.height-684{
	height: 684px;	
}

.height-700{
    height: 700px;
}

.row-6{height: 108px}

.row-9{height: 162px}

.row-24{height: 432px}

.row-31{height: 558px}
.row-32{height: 576px}
.row-33{height: 594px}

.row-40{height: 720px;}