/* Heights and Widths CSS */

/* CSS file for Sustainable Engineering and Design website. */
/* File name: heights_and_widths.css. */
/* This file sets the heights, widths, and alignments of elements in the fluid grid layout, if needed. 
   It also allows the padding to be set on inner enclosing elements, so that the padding size doesn't
   disrupt the enclosing fluid-grid layout. */
   
/* Just a reminder: class = . dot, ID = # number sign. */

#Header {
	height: 40px;
	background-color: #010e14;
	}
	
#Logo, #Title, #Turtle_title {
	height: 160px;
	}
		
#Menu {
	/* height: 40px; */
	}

#Slider {
	/* height: 300px; */
	}
	
#LeftSidebar, #PageContent {
	height: 800px;
	overflow:auto;
	}
	
#Footer {
	height: 100px;
	background-color: #010e14;
	}
	
.contentinner {
	padding: 10px;
}

.footercolumns {
	column-count:3;
	column-rule:medium;
	column-rule-color: #c6bda0;
}

.centred {
	text-align:center;
}

/* OLD CSS FOR REFERENCE. REMOVE WHEN DONE. */

/* Heights of div elememts. Also padding, etc. Border-radius of 10 px is added in the
   .grid_1 through .grid_12 class selectors in the 960_12_2_2.css file. */ 

/* #oea_home_logo, #oea_home_title, #oea_content_logo, #oea_content_title, #oea_footer {
	height: 140px;
	margin-bottom: 2px;
	margin-top: 2px;
	/* Padding (inside box); 10 px padding all around makes total box wider by 20 px, so 20 must be subtracted from the box widths in 960_12_2_2.css.  
	padding: 10px;
	}
	
#oea_home_logo p, #oea_content_logo p {
	text-align: center;
	}
	
#oea_menu_bar {
	height:40px;
	margin-bottom: 2px;
	margin-top: 2px;
	/* Padding (inside box); 10 px padding on left and right makes total box wider by 20 px, so 20 must be subtracted from the box widths in 960_12_2_2.css.  
	padding-right: 10px;
	padding-left: 10px;
	}
	
#oea_home_slider {
	height:300px;
	margin-bottom: 2px;
	margin-top: 2px;
	/* Padding (inside box); 10 px padding all around makes total box wider by 20 px, so 20 must be subtracted from the box widths in 960_12_2_2.css.  
	 padding: 10px; 
	
/* The slider image is provided as a background image. 
	
	background-image:url(../images/horse_racing.jpg);
	background-position:center;
	background-repeat:no-repeat;
	background-size: auto;
	}
	
#oea_home_content_body {
	height:400px;
	margin-bottom: 2px;
	margin-top: 2px;
	/* Padding (inside box); 10 px padding all around makes total box wider by 20 px, so 20 must be subtracted from the box widths in 960_12_2_2.css.  
	padding: 10px;
	
	/* Overflow:hidden is temporary. It keeps extra content from appearing outside the box. Scrollbars obscure round corners; will have to figure out how to fix that.
	overflow:hidden; 
	}
	
#oea_home_content_sidebar {
	background-color:transparent; /* override background colour of this div because it encloses two other divs 
	height:400px;
	margin-bottom: 2px;
	margin-top: 2px;
	
	/* This element does not have padding, since it contains two child elements that do, but it must be as wide as the ones that do. It is a grid_3 element with an original width of 216 px. 
	width: 216 px;
	}
	
#oea_content_content_body, #oea_register_content_body {
	height:704px;
	margin-bottom: 2px;
	margin-top: 2px;
	/* Padding (inside box); 10 px padding all around makes total box wider by 20 px, so 20 must be subtracted from the box widths in 960_12_2_2.css.  
	padding: 10px;
	}
	
#oea_home_calendar {
	height:180px;
	margin-bottom: 2px;
	margin-top: 0px;
	margin-left: 0px; /* no left or top margin because that's aleady handled by the enclosing div */
	/* Padding (inside box); 10 px padding all around makes total box wider by 20 px, so 20 must be subtracted from the box widths in 960_12_2_2.css. Enclosing div is still 400 - 4 = 396 px high. 
	padding: 10px;
	}
	
#oea_home_events {
	height:196px; /* 400 - 160 - 4 
	margin-bottom: 2px;
	margin-top: 2px;
	margin-left: 0px; /* No left margin because that's aleady handled by the enclosing div */
	/* Padding (inside box); 10 px padding all around makes total box wider by 20 px, so 20 must be subtracted from the box widths in 960_12_2_2.css. Enclosing div is still 400 - 4 = 396 px high. 
	padding: 10px;
	}
	
	/* Stylin' the form elements. This applies to the registration page and to the 
	login form in the footer. */
	
	/* The fieldsets in general: box qualities and legend text: 
	
fieldset {
	padding: 10px;
	border: 1px solid #333333;
	border-radius: 15px;
}

fieldset legend {
	padding: 0px 5px 0px;
	font-style: italic;
	font-weight: bold;
}

/* "Fieldset" box surrounding contact information. 

#oeaf1fs1_contactinfo {
	height: 260px;
	float: left;
}

/* divs inside contact info 

#oeaf1fs1_contactinfo div {
	width: 300px;
	float:left;
}

/* Label elements for contact information: 

#oeaf1fs1_contactinfo div label {
	width: 110px;
	float: left;
	clear: left;
	margin-right: 10px;
	margin-top: 8px;
	text-align: right;
}

/* Input elements for personal information: 

#oeaf1fs1_contactinfo input {
	margin-top: 8px;
}

#oeaf1fs1_contactinfo textarea {
	margin-top: 8px;
}

 /* "Fieldset" box surrounding riding experience: 
 
 #oeaf1fs7_ridingexperience {
	width: auto;
	height: 260px;
	float: left;
	margin-left: 10px;
}

/* Label elements for riding experience: 

 #oeaf1fs7_ridingexperience label {
	width: 120px;
	float: left;
	margin-right: 10px;
	text-align: right;
}

 /* "Fieldset" box surrounding membership type: 
 
 #oeaf1fs3_membershiptype {
	width: 150px;
	float: left;
}

/* Label elements for membership type:

 #oeaf1fs3_membershiptype label {
	width: 70px;
	float: left;
	margin-right: 10px;
	text-align: right;
}

/* "Fieldset" box surrounding membership length: 

#oeaf1fs4_membershiplength {
	width: 150px;
	float: left;
	margin-left: 10px;
	margin-right: 10px;
}

/* Label elements for membership length: 

#oeaf1fs4_membershiplength label {
	width: 70px;
	float: left;
	margin-right: 10px;
	text-align: right;
	
*/