@charset "utf-8";
/* CONTAINERS.CSS */
/* I put this in page order */

/* ####################### HEADER CONTAINER ######################## */

#header_container {
 	padding: 10px;
}

/* ####################### DYNAMIC ITEMS CONTAINER ################# */

/* FOR ALL DYNAMIC CONTAINERS *************/

.dynamic_items_container {
	text-align: center;		/* Center it */
	overflow: hidden;
}
	
.dynamic_items_items_container {
	position: relative;		
	left: 50%;
}

.dynamic_items_item_top {
	display: inline-block;	
	vertical-align: top;
	position: relative;		
	left: -50%;
}
	
/* MUST USE MIDDLE BY ITSELF */	
.dynamic_items_item_middle {
	display: inline-block;	
	vertical-align: middle;
	position: relative;	
	left: -50%;
}

.dynamic_items_item_bottom {
	display: inline-block;	
	vertical-align: bottom;
	position: relative;		
	left: -50%;
}

/* ####################### NAV CONTAINER ########################### */

#nav_dynamic_items_container {
	width: 100%;
	font-size: 24px;
}

#nav_dynamic_items_container a:link {
	color:#000;
	text-decoration: none;
}

#nav_dynamic_items_container a:visited {
	color:#000;
	text-decoration: none;
}

#nav_dynamic_items_container a:hover {
	color: #fff;
	text-decoration: none;
}

#nav_dynamic_items_container a:active {
	color: #fff;
	text-decoration: none;
}

#nav_dynamic_items_width {
	width: 80%;
}

/* ALL ITEMS *********************/

.nav_dynamic_item {
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 5px;
	margin-right: 5px;
	padding:10px; 
}

/* SPECIFIC ITEMS *****************/

/* Defines Height */
#nav_dynamic_item1 {
	width: auto;			/* Width of Texct */
	position: relative;
	color: #fff;
	z-index: 2;
}

#nav_dynamic_item1_background {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: #cedef4;
	opacity: 1.0;
}

/* Defines Height */
#nav_dynamic_item2 {
	width: auto;			/* Width of Text */
	position: relative;
	color: #fff;
	z-index: 2;
}
	
#nav_dynamic_item2_background {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: #cedef4;
	/* background-image: url(../images/antartica_very_low.jpg); */
	/* background-size: 100% 100%; */
	opacity: 1.0;
}

/* Defines Height */
#nav_dynamic_item3 {
	width: auto;			/* Width of Texct */
	position: relative;
	color: #fff;
	z-index: 2;
}
	
#nav_dynamic_item3_background {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: #cedef4;
	opacity: 1.0;
}

/* Defines Height */
#nav_dynamic_item4 {
	width: auto;			/* Width of Texct */
	position: relative;
	color: #fff;
	z-index: 2;
}
	
#nav_dynamic_item4_background {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: #cedef4;
	opacity: 1.0;
}

/* ####################### NARROW PICTURE CONTAINER ################ */

#narrow_picture_container {
 	/* padding: 10px; */
   	height: 300px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

#narrow_picture_container img {
  	position: absolute;
    margin: auto;
	width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* ####################### 403, 404, 500 STATUS CONTAINER ########## */

#status_code_container {
	text-align: center;
	margin-top: 20px;
	margin-bottom: 0px;
}

/* ####################### CONTACT FORM CONTAINER ################## */

#contact_form_container {
	text-align: center;
	margin-top: 20px;
	margin-bottom: 0px;
}

#contact_form {
  	/* background-color: grey; */
	width: 100%;
	padding-top: 20px;
	padding-bottom: 20px;
}

#contact_table {
	/* background-color:green; */
   	margin: 0 auto;
   	z-index: 1;
	width: 100%;
}

.contact_label {
	color: #805B08;
}

.contact_input {
    text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 25px;
	margin-top: 7px;
}

#t_name, #t_email, #t_phonenumber {
	background-color: #f9e9be;
	width: 25%;
	min-width: 220px;
	max-width: 250px;
}

#t_comments {
	background-color: #f9e9be;
	width: 50%;
	min-width: 220px;
	max-width: 500px;
}

#t_answer {
	background-color: #f9e9be;
	width: 25px;
}

.contact_button {
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 25px;
	margin-top: 7px;
	background-color: #f9e9be;
	width: 65px;
}

#contact_form_container a:link, #contact_form_container a:visited  {
	color: #777;
}

/* ####################### HOME PAGE CONTAINER ################ */

#home_page_container {
	text-align: center;
	margin-top: 20px;
	margin-bottom: 0px;
}

#home_page_container a:link, #home_page_container a:visited  {
	color: #efac17;
}

#home_page_container a:hover, #home_page_container a:active  {
	color: #805B08;
}

#home_page_container h3 {
	margin: 12px;
}

.contact_me_button {
	margin: auto;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 27px;
	margin-bottom: 25px;
	background-color: #CEDEF4;
	width: 90px;
}

/* ####################### FOOTER COPYRIGHT CONTAINER ############## */

#footer_copyright_container {
	text-align: center;
	margin-top: 30px;
	padding-bottom: 10px;
	font-size: 10px;
	color: #000;
}