/* ------------------- Reset ----------------------------------- */
@media {
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
	margin:0;
	padding:0;
}
table{
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img{
	border:0;
}
address,caption,cite,code,dfn,th,var{
	font-style:normal;
	font-weight:normal;
}
caption,th{
	text-align:left;
}
h1,h2,h3,h4,h5,h6{
	font-size:100%;
	font-weight:normal;
}
q:before,q:after{
	content:'';
}
abbr,acronym{
	border:0;
}
}
/* ------------------- Standard Browser Layout------------------ */
@media screen and (min-width: 701px) {

body {
  font-family: sans-serif, verdana;
  color: #000000;
  margin: 0px 0px 0px 0px;
  background-color: #ffffff;
}

#page-container {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}

#page {
max-width: 1000px;
}   

#top-container {
float:left;
max-width:1000px;

}

#header-container {
background-image: url("/images/7dsystem-title.jpg");
	background-size: 1000px 150px;
    background-repeat: no-repeat;
max-width:1000px;
position:relative;
float:left;
height: 150px;
}

#logo-container {
width:1000px;
position:relative;
float:left;
margin: 30px 0px 30px 0px;
}

#logo-container p{
width:300px;
text-align: right;
float:right;
margin: 20px 0px 0px 0px;
}

#logo-container img{
max-width:122px;
min-width:50px;
float:left;
margin:0px 30px 0px 30px;
}

#menu-container {
position:relative;
float:left;
width:100%;

}

#menu {
float:left;
width:100%;
background-color:#000000;
}

#central-container {
float:left;
}

#contents {
margin:0px; 
float:left;
min-width:300px;
width:60%;
}

#contents h1 {
font-size: 18px;
color: #800000;
border-bottom: solid 1px #000000;
font-weight: bold;
margin: 20px 20px 20px 20px;

}

#contents h2 {
color: #800000;
font-weight: bold;
margin: 10px 20px 20px 20px;
}

#contents p{
margin: 0px 20px 20px 20px;
text-align: justify;
}

#contents ul{
margin: 0px 0px 0px 0px;
}

#contents ul li{
margin: 5px 50px 5px 40px;
}

#contents ol{
margin: 0px 20px 20px 20px;
}

#contents ol li{
margin: 5px 50px 5px 40px;
}

#contents img {
margin: 0px 20px 20px 20px;
/*border: solid 1px #ffffff;*/
max-width:200px;
float:right;
}

#contents A:link {color: #800000; font-weight: normal; text-decoration: none; }
#contents A:visited {color: #800000; text-decoration: none; }
#contents A:active {color: #800000; text-decoration: none; }
#contents A:hover {color: #000000; text-decoration: none; }

#contents table {
margin: 10px;
}

#contents tr:nth-child(even) {background: #FFF}
#contents tr:nth-child(odd) {background: #CCC}
#contents td:first-child {font-weight: bold; text-align: right; vertical-align:top;}
#contents td:nth-child(even) {text-align: left; vertical-align:top;}

#contents td {
padding: 10px;
text-align: left;
vertical-align:top;
}

#side {
width:300px;
display:block;
float:left;
font-family: sans-serif, verdana;
font-size: 15px;
color:#000000;
font-weight: normal;
margin: 0px 20px 20px 20px;
background-color: #FFFF66;
border: solid 0px #000000;
margin: 20px;
padding: 10px;	
}

#side h2 {
color: #800000;
font-weight: bold;
margin: 20px 20px 20px 20px;
}

#side p{
margin: 0px 20px 20px 20px;
text-align: justify;
}

#side ul{
margin: 0px 0px 0px 0px;
}

#side ul li{
margin: 20px;
}

#side ol{

}

#side ol li{

}

#footer {
clear:both;
position:relative;
}

#footer p{
text-align: center;
font-size:12px;
padding: 20px 0px 20px 0px;
}

}
/* ------------------- Standard Browser Forms ------------------ */
@media screen and (min-width: 701px) {

#form {
width:300px;
display:block;
float:left;
font-family: sans-serif, verdana;
font-size: 15px;
color:#000000;
font-weight: normal;
margin: 0px 20px 20px 20px;
background-color: #FFFF66;
border: solid 0px #000000;
margin: 20px;
padding: 10px;
}

#form input {
width:135px;
float:left;
text-align:left;
background-color: #ffffff;
border-color:#000000;
border: solid 1px #000000;
padding: 5px 5px 5px 5px;
margin-bottom:10px;
}

#form select {
float:left;
text-align:left;
border: solid 1px #000000;
padding: 5px 5px 5px 5px;
margin-bottom:10px;
width:147px;
}

#form textarea {
float:left;
text-align:left;
background-color: #ffffff;
border: solid 1px #000000;
padding: 5px 5px 5px 5px;
margin-bottom:10px;
width:135px;
}

#form [type="checkbox"]{
width:20px;
height:20px;
float:left;
text-align:left;
background-color: #ffffff;
border: solid 1px #000000;
margin:5px 0px 0px 0px;
}

#form input.button {
    border: 1px;
	background-color: #000000;
    border: solid 1px #000000;
	color: #FFFFFF;
	padding: 5px 5px 5px 5px;
	margin: 10px auto 10px auto;
	width:147px;
	text-align:center;
}

#form label {
clear: left;
width:135px;
text-align: right;
color: #000000;
padding: 5px 10px 5px 0px;
margin-bottom:10px;
float:left;
}

#form p {
font-family: sans-serif, verdana;
font-weight:bold;
text-align: center;
color: red;
margin-bottom: 10px;
font-size:23px;
}

}
/* ------------------- Mobile Browser Layout-------------------- */
@media screen and (min-width: 300px) and (max-width: 700px) {
body {
  font-family: sans-serif, verdana;
  color: #000000;
  margin: 0px 0px 0px 0px;
  background-color: #ffffff;
}

#page-container {
max-width: 700px;
margin-left: auto;
margin-right: auto;
}

#page {
max-width: 700px;
}   

#top-container {
float:left;
max-width:670px;
}

#header-container {
max-width:670px;
position:relative;
float:left;
}

#logo-container {
/*width:500px;*/
position:relative;
float:left;
margin: 30px 0px 30px 0px;
}

#logo-container p{
/*width:300px;*/
text-align: right;
float:right;
margin: 20px 0px 0px 0px;
}

#logo-container img{
max-width:100px;
min-width:50px;
float:left;
margin:0px 30px 0px 0px;
}

#menu-container {
position:relative;
float:left;
width:100%;
}

#menu {
float:left;
width:100%;
}

#central-container {
float:left;
}

#contents {
margin:0px; 
float:left;
min-width:300px;
/*width:60%;*/

}

#contents h1 {
font-size: 18px;
color: #800000;
border-bottom: solid 1px #000000;
font-weight: bold;
margin: 20px 20px 20px 20px;

}

#contents h2 {
color: #800000;
font-weight: bold;
margin: 10px 20px 20px 20px;
}

#contents p{
margin: 0px 20px 20px 20px;
text-align: justify;
}

#contents ul{
margin: 0px 0px 0px 0px;
}

#contents ul li{
margin: 5px 50px 5px 40px;
}

#contents ol{
margin: 0px 20px 20px 20px;
}

#contents ol li{
margin: 5px 50px 5px 40px;
}

#contents img {
margin: 0px 20px 20px 20px;
max-width:120px;
float:right;
}

#contents A:link {color: #003aff; font-weight: normal; text-decoration: none; }
#contents A:visited {color: #003aff; text-decoration: none; }
#contents A:active {color: #003aff; text-decoration: none; }
#contents A:hover {color: #2a318b; text-decoration: none; }

#footer {
clear:both;
position:relative;
}

#footer p{
text-align: center;
font-size:12px;
padding: 20px 0px 20px 0px;
}
}
/* ------------------- Mobile Browser Forms--------------------- */
@media screen and (min-width: 300px) and (max-width: 700px) {
#form {
width:300px;
display:block;
float:left;
font-family: sans-serif, verdana;
font-size: 15px;
color:#000000;
font-weight: normal;
margin: 0px 20px 20px 20px;
background-color: #FFFF66;
border: solid 0px #000000;
margin: 20px;
padding: 10px;
}

#form input {
width:135px;
float:left;
text-align:left;
background-color: #ffffff;
border-color:#000000;
border: solid 1px #000000;
padding: 5px 5px 5px 5px;
margin-bottom:10px;
}

#form select {
float:left;
text-align:left;
border: solid 1px #000000;
padding: 5px 5px 5px 5px;
margin-bottom:10px;
width:147px;
}

#form textarea {
float:left;
text-align:left;
background-color: #ffffff;
border: solid 1px #000000;
padding: 5px 5px 5px 5px;
margin-bottom:10px;
width:135px;
}

#form [type="checkbox"]{
width:20px;
height:20px;
float:left;
text-align:left;
background-color: #ffffff;
border: solid 1px #000000;
margin:5px 0px 0px 0px;
}

#form input.button {
    border: 1px;
	background-color: #000000;
    border: solid 1px #000000;
	color: #FFFFFF;
	padding: 5px 5px 5px 5px;
	margin: 10px auto 10px auto;
	width:147px;
	text-align:center;
}

#form label {
clear: left;
width:135px;
text-align: right;
color: #000000;
padding: 5px 10px 5px 0px;
margin-bottom:10px;
float:left;
}

#form p {
font-family: sans-serif, verdana;
font-weight:bold;
text-align: center;
color: red;
margin-bottom: 10px;
font-size:23px;
}

}
/* ------------------- Drop Menu ------------------------------- */
@media screen {
#menu ul {
	/* Main menu static positioning*/
	list-style:none;
	font-weight: normal;
	margin-bottom:0px;
	float:left;
	position:relative;
	z-index:8;
	}

#menu ul li{
	/* individual main menu items - positioning */
	float:left; /* remove for vertical menu*/
	position:relative;
	
	}

#menu ul a{
	/* Look of main menu item (no hover - sub menu inherits)*/
	/* for vertical menus define a width */
	display:block;

	/*custom*/
	background-color:#000000;
	font-family: verdana;
	font-size: 13px;
	color: #ffffff;
	padding: 5px 10px 5px 10px;
	text-decoration: none;
	}

#menu ul a:hover{
	/* Look of main menu item (Hovered - sub menu inherits) */
	
	/*custom*/
	background-color:#800000;
	font-family: verdana;
	font-size: 13px;
	color: #ffffff;
	text-decoration: none;
	}

#menu ul ul{
	/* Look and position of submenu */
	background:#ffffff; /* Make this as close to your page's background as possible. (IE7+) */
	background:rgba(255,255,255,0); /* Make the background fully transparent where we can. */
	list-style:none;
	position:absolute;
	left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */

	/*custom borders - no background or foreground*/
	border-width:1px;
	border-style:solid;
	border-color:#000000;
	box-shadow: 5px 5px 5px #bababa;
	margin:0px;
	padding:0px;
	}

#menu ul li:hover ul{
	/* Display the dropdown on hover - use top:0px; for flush vertical position on vertical menus */
	left:0px; /* Increase to width of menu for vertical menus side drop down */
	}

#menu ul ul li{
	/* Positioning of submenu items */
	/* Introducing a padding between the li and the a give the illusion spaced items */
	padding-top:0px;
	float:none;
	}

#menu ul ul a{
	/* Stop text wrapping and creating multi-line dropdown items */
	white-space:nowrap;
	
	}

#menu ul li:hover a{
	/* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
	/* Look of the Main menu item (hovered - sub menu inherits)*/
	
	/*custom*/
	background-color:#800000;
	font-family: verdana;
	font-size: 13px;
	color: #ffffff;
	text-decoration: none;
	}

#menu ul li:hover ul a{
	/* Look of submenu item static */
	
	/*custom*/
	background-color:#800000;
	font-family: verdana;
	font-size: 13px;
	color: #ffffff;
	text-decoration: none;
	}
	
#menu ul li:hover ul a img{
	/* Hide accompanying image in anchor */
	
	/*custom*/
	display: none;
	
	}	

#menu ul li:hover ul li a:hover{
	/* Here we define the most explicit hover states -- what happens when you hover each individual link. */
	/* Look of submenu item when hovered */
	
	/*custom*/
	background-color:#ffffff;
	font-family: verdana;
	font-size: 13px;
	color: #800000;
	text-decoration: none;
	}
	
#menu ul li:hover ul li a:hover img{
	/* Show accompanying image in anchor */
	
	/*custom*/
	display: block;
	position: absolute;
	left: 110%;
	top: -50%;
	border-width:1px;
	border-style:solid;
	border-color:#000000;
	box-shadow: 5px 5px 5px #bababa;
	width: 150px;
	}	

/* ----------------------------------------- 2nd Level ------------------------------------------------------- */

#menu ul ul ul{
	/* Look and position of submenu */
	background:#ffffff; /* Make this as close to your page's background as possible. (IE7+) */
	background:rgba(255,255,255,0); /* Make the background fully transparent where we can. */
	list-style:none;
	position:absolute;
	left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
	display:none;

	/*custom borders - no background or foreground*/
	border-width:1px;
	border-style:solid;
	border-color:#000000;
	box-shadow: 5px 5px 5px #bababa;
	}

#menu ul ul li:hover ul{
	/* Display the dropdown on hover - use top:0px; for flush vertical position on vertical menus */
	left:33%; /* Increase to width of menu for vertical menus side drop down */
	display:block;
	}

#menu ul ul ul li{
	/* Positioning of submenu items */
	/* Introducing a padding between the li and the a give the illusion spaced items */
	padding-top:0px;
	float:none;
	}

#menu ul ul ul a{
	/* Stop text wrapping and creating multi-line dropdown items */
	white-space:nowrap;
	
	}

#menu ul ul li:hover a{
	/* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
	/* Look of the Main menu item (hovered - sub menu inherits)*/
	
	/*custom*/
	background-color:#800000;
	font-family: verdana;
	font-size: 13px;
	color: #ffffff;
	text-decoration: none;
	}

#menu ul ul li:hover ul a{
	/* Look of submenu item static */
	
	/*custom*/
	background-color:#800000;
	font-family: verdana;
	font-size: 13px;
	color: #ffffff;
	text-decoration: none;
	}
	
#menu ul ul li:hover ul a img{
	/* Hide accompanying image in anchor */
	
	/*custom*/
	display: none;
	
	}	

#menu ul ul li:hover ul li a:hover{
	/* Here we define the most explicit hover states -- what happens when you hover each individual link. */
	/* Look of submenu item when hovered */
	
	/*custom*/
	background-color:#ffffff;
	font-family: verdana;
	font-size: 13px;
	color: #800000;
	text-decoration: none;
	}
	
#menu ul ul li:hover ul li a:hover img{
	/* Show accompanying image in anchor */
	
	/*custom*/
	display: block;
	position: absolute;
	left: 110%;
	top: -50%;
	border-width:1px;
	border-style:solid;
	border-color:#000000;
	box-shadow: 5px 5px 5px #bababa;
	width: 150px;
	}	
}