.primary-1 { background-color: #2F4266 }
.primary-2 { background-color: #2C3444 }
.primary-3 { background-color: #091937 }
.primary-4 { background-color: #829CCB }
.primary-5 { background-color: #9FAECB }

.complement-1 { background-color: #99793E }
.complement-2 { background-color: #67583E }
.complement-3 { background-color: #533A0B }
.complement-4 { background-color: #DCBE84 }
.complement-5 { background-color: #DCCAA7 }

html {
	height: 100%;
}

body {
    background: #D0D0D0;
    font-family: Arial;
}

a.button:link, a.button:visited {
    border:solid 1px black;
    color:white;
    background-color:#2F4266;
    padding:5px;
	text-decoration:none;
}

a.button:active { 
    color: #FFA500; 
}

a.sample3{
	font-size:0.75em;
	display:block;
	width:80px;
	padding-top:2px;
	padding-bottom:2px;
	text-align:center;
	border:2px solid;
	border-color:#aaaaaa #444444 #444444 #aaaaaa;
	background:#ffffff;
}

a.sample3:hover{
	background:#eeeeee;
}

/* ------------ Main BOX setting  ------------------ */
#container {
	width: 1130px; 
	border: 2px solid blue;
	color: #000000;
	background: #DCCAA7;
	margin: auto;
	border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
	overflow: hidden;
	box-shadow: #2C1414 0px 0px 40px;
}

/* content repeated at the top of each page (eg menu, banner, logo) */
#header {
	background-color: #2C3444;
	padding: 5px;
	padding-bottom: 0px;
    background-image: url(/site/images/EarthBanner.jpg);
    background-position: bottom;
}

#header .banner { float:left; cursor:default; }
#header .logo { float:right; margin-right:25px; margin-top:15px; }
.menu { float:left; clear:both; width:100%; }

#header img { border: 0px solid black; }
#header h1, #header h2 { display:inline; font-family: Century Gothic; }

#header h1 {
    font-size:80px;
    font-weight:normal;
    color:#F2F2A2;
}

#header h2 {
    font-size:40px;
    color:#F2F2A2;
    text-shadow: 1px 1px 2px black;
}

#header h3 {
    font-size:22px;
    font-weight:normal;
    color:#F2F2A2;
}

#header h4 {
    font-size:18px;
    font-weight:normal;
    color:#F2F2A2;
}

/* FOOTER  (content repeated at bottom of each page) */
#footer {
	background-color: #2C3444;
	padding: 5px;
	border-top: 2px solid black;
	text-align: center;
	color: white;
	clear: both;
	font-size: 12px;
    background-image: url(/site/images/EarthBanner.jpg);
}

/* content is the cell in the main table where invididual page content goes */
#content {
    font-weight:10px;
    background-color:#F0F0D0;
    padding:10px;
    min-height:500px;
    color:#091937;
}

#content h1 {
	font-family: Century Gothic;
    text-shadow: 1px, 1em transparent, 0.2em transparent;
    display:inline;
    color: black;
}

#content h2 {
	font-family: Century Gothic;
    text-shadow: 1px 1px 2px transparent, 0 0 1em transparent, 0 0 0.2em transparent;
    display:inline;
    color: mediumblue;
}

#content h3 {
	font-family: Century Gothic;
    text-shadow: 1px, 1em transparent, 0.2em transparent;
    display:inline;
    color: black;
}

#content h4 {
	font-family: Century Gothic;
    text-shadow: 1px, 1em transparent, 0.2em transparent;
    display:inline;
    color: black;
}

/*#content h1:hover, #content h2:hover, #content h3:hover, #content h4:hover {
    -moz-transition-duration: 1s;
    text-shadow: 1px 1px 2px black, 0 0 1em #0489B7, 0 0 0.2em #0489B7;
    color: #fff;
}*/

#content hr {
    color:#091937;
    background-color:#091937;
    height:1px;
    text-align:left;
    margin-right:40%;
    margin-top:0px;
}

#content p, #content li {
	font-size: 14px;
    text-align:justify;
    margin-left: 3%;
    margin-right: 3%;
    line-height: 150%;
}

div.imageboxR {
   float: right;
    margin-right:3%;
    margin-left:3%;
	font-size: 14px;
    text-align:justify;
}

div.imageboxC {
   float: center;
    margin-right:3%;
    margin-left:3%;
	font-size: 14px;
    text-align:justify;
}

div.imageboxL {
   float: left;
    margin-right:3%;
    margin-left:3%;
	font-size: 14px;
    text-align:justify;
}

#content li, #content .img-left, #content .img-right {
    margin: 5px 3%;
}

#content .info {
    float: center;
    border: 2px solid black;
    border-radius: 5px;
    box-shadow: 3px 3px 4px #444;
    padding: 0px 8px 8px 8px;
}

#content ul.info {
    list-style: none;
    margin:0px;
    padding:0px;    
    border:none;
}

#content li.info {
    width: auto;
    min-height: 260px;
    display: block;
    float: left;
    margin: 0px 0px 20px 20px;
    text-align: center; 
    text-decoration: none;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2C3444', endColorstr='#777777');
    background: -webkit-gradient(linear, left top, left bottom, from(#2C3444), to(#777));
    background: -moz-linear-gradient(top,  #2C3444,  #777);
}

#content li.info:hover {
    /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2C3444', endColorstr='#555555');
    background: -webkit-gradient(linear, left top, left bottom, from(#2C3444), to(#555));
    background: -moz-linear-gradient(top,  #2C3444,  #555);*/
    border-color: white;
}

#content li.info.no-hover:hover {
    border-color: black;
}

#content li.info a {
    display: block;
    height: 100%;
    color: white;
    text-decoration: none;
    outline: none;
}

#content li.info h2, #content li.info p {
    color: #F2F2A2;
}

#content li.info p a {
    text-decoration: underline;
    display: inline;
}

#content li.info p a:active { color: #F00; }

#content li.info h2 {
    margin: auto;
    font-size: 18px;
}

#content li.info .img {
    margin: auto;
    margin-top: 5px;
}

#content li.info .img img { 
    max-width: 100%;
    max-height: 220px;
    border: 1px solid black;
}       

#content img {
	border: 1px solid black;
}

#content .img-left {
	float:left;
	clear:left;
}

#content .img-right {
	float: right;
	clear: right;
}

#content .img-center {
	margin-left: 5px 3%;
	clear: both;
}

#content table, #content tr, #content td {
    padding:5px;
    border-collapse:collapse;
    border-style:solid;
    border-width:1px;
    border-color:black;
    margin: auto;
}

#content th {
    text-align:center;
    background-color:#2F4266;
    color:white;
    font-size:18px;
}

#content td.highlight {
    text-align:center;
    color:black;
    font-weight: bold;
    font-size:16px;
}

#content .empty, #content .empty tr, #content .empty td  {
    border-style:none;
    border-width:0px;
    margin:0px;
    padding:0px;
    border-spacing:0px;
}

#controls, #content table th {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2F4266', endColorstr='#222222');
    background: -webkit-gradient(linear, left top, left bottom, from(#2F4266), to(#222));
    background: -moz-linear-gradient(top,  #2F4266,  #222);
}

#controls {
	-moz-border-radius: 10px;
	border-radius: 10px;
	
    /*background-color:#2F4266;*/
	border: 1px solid white;
	width:550px;
	padding:0px;
	margin-bottom: 10px;
}


#controls table {
	margin: 5px auto;
	width: 95%;
	border: none;
}

#controls td, #controls tr {
	text-align:center;
	color:white;
	border-width: 0px 1px;
	border-color:white;
	border-style:solid;
	font-size: 12px;
	padding: 0px;
	margin: 0px;
}

#controls hr {
	background-color: white;
	color: white;
	border: none;
	height: 1px;
	margin: 0px 4%;
}

#controls #notification, #controls #status {
	/* border: 1px solid white; */
	margin: auto;
	font-family: Lucida Console;
	font-size: 16px;
}

#controls #notification { width: 250px; height: 1em; padding:2px; /*border: 1px solid white;*/ }
#controls #status { width: 350px; }