@charset "UTF-8";

body {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: small;
	color: #00F;
	background-color: #3333FF;
	text-align: center;
}

    #container {
	background-color: #C8D9BC;/*#0FF*//*#C8D9BC*/
	width: 840px;
	margin-right: auto;
	margin-left: auto;
/*	position: relative;*/
/*	text-align: center;*/
/*	background-image: url(images/container_bg.gif);
/*	background-repeat: no-repeat;
	/*overflow: hidden;/*added to auto adjust sidebar to the bottom*/
}

#container-outer {
		width: 817px;/*817px-current*//*830px*//*lower number makes it smaller, higher number makes is bigger*/
    float:left;/*CONTENT*/
    overflow: hidden;/* To hide anything that overflows out of the outer container*/
    background: #0FF;/*#eee*/
/*  border-style: solid;*/
/*  border-width: 5px;*/
/*  border-color: yellow;*/

}

#container-inner {
    float:right;/*SIDEBAR*/
    background: #C8D9BC;/*#555*/
    position: relative;
    left:510px; /*75%*//*520px and 270px*//*higher number to right, lower number to the left*/
/*  border-style: solid;*/
/*  border-width: 5px;*/
/*  border-color: black;*/
	border-left-width: 2px;
	border-left-style: solid;
	border-left-color: #060;
}


#header {
	height: auto;
	z-index: auto;
	background-color: #FFFFFF;
	background-repeat: no-repeat;
	background-position: right;
}


#header img {
	margin-top: 0px;
	margin-left: 0px;
}

 
dl {
	color: #000;
	font-size: medium;
	margin-left: 2px; /*10px*//* previous value = 15px*/
	margin-right: 2px;/*10px*//*added to put a margin on the right side of the pictures on the sidebar*/
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
}

dd {
	font-size: small;
	margin-bottom: 10px;/*10px*/
	font-weight: normal;
	margin-right: 2px;/*10px*/
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	margin-left: 2px;/*5px*/
}

    #navigation {
	background-color: #0099FF;
	height: 36px;
	width: 100%;
}

    #footer {
	background-color: #CCC;
	clear: both;
}

#navigation ul li {
	float: left;
	list-style-type: none;
}

#navigation ul li a {
	color: #FFF;
	text-decoration: none;
	display: block;
	padding-top: 8px;
	padding-right: 15px;
	padding-bottom: 8px;
	padding-left: 15px;
}

#navigation a:hover {
	background-color: #330066;
	background: #0055D4;
  	background: -moz-linear-gradient(#43A9FF, #0043A8);
  	background: -o-linear-gradient(#43A9FF, #0043A8);
  	background: -webkit-linear-gradient(#43A9FF, #0043A8);
  	text-shadow: none;
}

#navigation a:active {
	background-color: #CC0099;
}

#navigation a:visited {
	color: #CCCCCC;
}

#navigation li.selected a { 
/*	background-color: #330066; <!--previous value-->*/
	font-weight: bold;
	font-style: italic;
	color: #000000;/*previous collor was bright red: #FF0000*/
/*	background: #0055D4;<!--previous value-->*/
/*  background: -moz-linear-gradient(#43A9FF, #0043A8);<!--previous value-->*/
/*  background: -o-linear-gradient(#43A9FF, #0043A8);<!--previous value-->*/
/*  background: -webkit-linear-gradient(#43A9FF, #0043A8);<!--previous value-->*/
  text-shadow: 2px 2px 7px #111111;


}

#navigation ul {
	margin: 0px;
	padding: 0px;
}

#sidebar {
    float: right;
/*    width: 25%; *//*25%*/
    position: relative;
    right: 505px;/*510px*/ /*520px*//*75%*//*lower number moves letters to the right*/
	width: 240px;/*240px*/
	text-align: center;
/*	border-left-width: 5px;*/
/*	border-left-style: solid;*/
/*	border-left-color: #060;*/
/*  border-style: solid;*/
/*  border-width: 20px;*/
/*  border-color: purple;*/
}


/*#sidebar {
	float: right;
	width: 275px;/*previous value = 270px*/
/*	height: 100%; /*added to auto adjust sidebar to the bottom*/
/*	text-align: center; /*added to center text*/
/*	background-color: #C8D9BC;
	border-left-width: 2px;
	border-left-style: solid;
	border-left-color: #060;
    padding-bottom: 99999px;
    margin-bottom: -99999px;*/


/*	margin-top: -9999px; /*Added to make sidebar with the same size as content*/
/*	margin-bottom: -9999px; /*Added to make sidebar with the same size as content*/
/*	padding-top: 9999px; /*Added to make sidebar with the same size as content*/
/*	padding-bottom: 9999px; /*Added to make sidebar with the same size as content*/


	/*margin-bottom: -5000px; /* any large number will do; to auto adjust sidebar to the bottom*/
   /*padding-bottom: 5000px; /* any large number will do; to auto adjust sidebar to the bottom*/
/*}*/


#main {
    float: left;
    margin: 1px;
/*  width: 75%; *//*75%*/
    position: relative;
    right: 545px; /*545px-current*//*550px*/  /*75%*//*lower number moves the letters to the right*/
	width: 520px;/*520px width minus margin-left: 20px minus margin-right: 20px equal 480px*/
/*	margin-left: 20px;*/
/*	margin-right: 20px;*/
/*	padding-left: 20px;*/
/*	padding-right: 20px;*/
	text-align: center;
/*  border-style: solid;*/
/*  border-width: 5px;*/
/*  border-color: red;*/
}



 /*   #main {
	float: left;
	width: 520px;
	height: 100%; /*added to auto adjust sidebar to the bottom*/
/*	padding-left: 20px;
	text-align: center;
	padding-bottom: 99999px;
    margin-bottom: -99999px;

}*/

	.overflow {
		overflow: hidden; /*Added to make sidebar with the same size as content*/
	}


    
html {
/*This command put a scroll bar on all the pages, so that the webpages will not shift, right-to-left, or left-to-right depending on how much contents in the webpage.*/
	overflow:scroll;
}



@media (max-width: 767px) {
	.main,
	.sidebar {
	min-height: initial !important;
	}
}