/* 
Colour reference -
	 
*/

/* Eric Meyers Reset CSS rules */
html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	line-height: 1.5em;
	font-family: inherit;
	text-align: left;
	vertical-align: baseline;
}
a img, :link img, :visited img {
	border: 0;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
/*apply bullets with class .bullets */
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

input { vertical-align:middle; }

.clear:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

/* Overall font and typography declarations */
body {
	font-family: Arial, sans-serif;
	font-size: 62.5%;/*10px*/
	line-height: 1.5em;
	color: #3f3f3f;
	/*height:100%; /* needed for container min-height */
	background-color: #425527;
}

H1, H2, H3, .sitebranding strong {
	font-family: "Andale Mono","Courier New","Nimbus Mono L",monospace, serif;
}

H4, H5, H6 {
	
}

/*Links*/
a {
	color: #0055a6;
	text-decoration: none;
}

a:hover {
	color: #808000;
	text-decoration: underline;
}

a:visited {
	color: #0e75bc;
}

a:focus {
	border: 1px solid blue;	
}

.header ul li a {
	color: #003366;
	text-decoration: none;
}

.header ul li a:hover {
	color: #0e75bc;
	text-decoration: underline;
}

.header ul li a:visited {
	color: #808000;
}

.navigation ul li a {
	color: #808000;
	text-decoration: none;
}

.navigation ul li a:hover {
	color: #0e75bc;
	text-decoration: underline;
}

.navigation ul li a:visited {
	color: #aaaaaa;
}

.navigation ul li ul li a {
	color: #425527;
	text-decoration: none;
}

.navigation ul li ul li a:hover {
	color: #ff9900;
	text-decoration: underline;
}

.navigation ul li ul li a:visited {
	color: #aaaaaa;
}


/* END RESET */

/*Accessibility*/
dl.accessibility {
	position: absolute;	
}

/*Typography*/
/*#friendsgbg-com {
	background: url(../img/grid-02.png) no-repeat;
}*/

em {
	font-style: italic;
	font-weight: bold;	
}

strong {
	font-weight: bold;	
}

i.book-title {
	font-style: italic;
	font-family: Times, serif;
	font-size: 1.1em;	
}

/* basic font sizes */
p, ul, ol, dl, table, address, fieldset, pre, form div {
 font-size: 1.6em; /* 16px */
}

/* deal with likely (but certainly not all) inherited shrinkage */
ul p, ol p, div div div {
	font-size: 1em;
}

/* size headings using scale of 12, 15, 16, 18, 20, 30 */

h1, .sitebranding strong {
 	font-size: 3em; /* 30px */ 
	line-height: 0.8em; /* 24px */
}
h2, .bodycontent h1 { 
	font-size: 2em; /* 20px */ 
	line-height: 1.2em; /* 24px */
}
h3, bodycontent h2, .aside h2 { 
	font-size: 1.8em; /* 18px */ 
	line-height: 1.33333em; /* 24px */ 
}
h4 { 
	font-size: 1.4em; /* 14px */ 
	line-height: 1.7142em; /* 24px */
}	
h5 { 
	font-size: 1.5em; /* 15px */ 
	line-height: 1.6em; /* 24px */ 
}

h6 {
	font-size: 1.2em; /* 12px */ 
	line-height: 2em; /* 24px */
}

legend {
	font-size: 1.5em; /* 15px */ 
	line-height: 1.6em; /* 24px */
	font-weight: bold;
}

/*MARGINS*/
p, ul, ol, dl, address, table, blockquote, pre, fieldset, form {
 margin-bottom: 1.5em; /* 24px */
}

h1, .sitebranding strong {
	margin-bottom: 1em; 
	margin-top: 0em;
}

h2, .bodycontent h1 {
	margin-bottom: 1.2em; 
	margin-top: 0em;
}

h3, h4, h5, .bodycontent h2 {
	margin-bottom: 1.3333em; 
	margin-top: 1.3333em;
}

h6 {
	margin-bottom: 0; 
	margin-top: 2em;
}

/*General FONT COLORS*/
.bodycontent h1, h2, h3, h4 {
	color: #0055a6;
}

/*lists*/
.edlist li {
	list-style-type: circle;	
}

/*Grid >> Containers*/
#friendsgbg-com {
	width: 92%;
	max-width: 1355px;
	margin-left: 4%;
	margin-right: 4%;
	background-color: #ffffcc;	
}
/*Grid >> Global*/
.navigation, .bodycontent, .aside, .drawer {
	display: inline;
	float: left;
	position: relative;
	margin-left: 1.1%;
	margin-right: 1.1%;	
}

/*Grid >> Children (Alpha - First, Omega - Last)*/
.alpha {
	margin-left: 0;	
}

.omega {
	margin-right: 0;	
}

/*Grid >> Columns*/
.navigation {
	width: 16.96%;	
}

.bodycontent {
	width: 55.286%;	
}

.aside {
	width: 23.128%;	
}

.drawer {
	width: 23.128%	
}

/*Tables*/
table {
	font-size: 1.2em;
	line-height: 2em;
	margin-bottom: 2em;	
}

table caption {
	font-size: 1.6em;
	line-height:1.5em;
	font-weight: bold;
}

table th {
	font-weight: bold;
	padding: 0.25em;
	background-color: #ff9900;	
}	

table td {
	padding: 0.25em;
	border: 1px solid #000;	
}

table td ul, table td ol, table td dl {
	font-size: inherit;
	list-style: circle inside;
}

/*Page Layout*/
.sitebranding {
	border-bottom: 1em solid #ff9900;
	width: 100%;
	position: relative;	
}

.sitebranding img {
	position: absolute;
	top: 0;
	right: 0;	
}

.sitebranding h1, .sitebranding strong {
	background: url(../img/21stC_gardens.jpg) no-repeat left center #3399ff;
	padding: 3em 0 1.625em 1.2em;
	color: #ffffff;
	margin: 0;
	display: block;
	font-weight: normal;
}

.header ul li {
	float: left;
	width: 15.682%;
	margin-right: 1.1%;
	margin-left: 1.1%;
	padding: 1.1em 0;	
	background: #ff9900;
	margin-top: 0.75em;
	margin-bottom: 1.25em;
	text-align: center;
	font-weight: bold;

}

.header ul li.education {
	margin-right: 0;	
}

.navigation li {
	padding-left: 0.5em;	
}

.navigation li ul {
	font-size: 0.75em;
	margin-bottom:0;
	padding-left: 1em; 	
}

.feature {
	float: right;
	padding: 0.5em 0.5em 0.5em 1em;	
}

ul.half-content, div.half-content {
	display: inline;
	float: left;
	position: relative;
	margin-left: 1.1%;
	margin-right: 1.1%;
	width: 47.8%;	
}

/*Events*/

.bodycontent dt, .footer dt {
	font-weight: bold;
	display: inline;
	float: left;
	padding-right: 1em;	
}

.bodycontent dt:after, .footer dt:after {
	content: ' :';	
}

.bodycontent dl dd {
	padding-left: 4.5em;	
}

.half-content dl {
	font-size: 1.2em;
	line-height: 2em;
	margin-bottom: 2em;	
}

.half-content dl ol {
	font-size: 1em;
	margin-bottom: 0;	
}

dl.external-links {
	clear: right;	
}

dl.external-links dt {
	float: none;	
}

dl.external-links dd {
	padding-left: 1em;
	padding-bottom: 1em;	
}

.aside h2, #index-page .aside h3 {
	text-align: left;
	color: #808000;
}

.aside h3, .aside h4 {
	padding-left: 0.5em;
	color: #003366;	
}

.aside p, .footer p, .footer dl, .aside ul {
	padding: 0 0.5em;
	font-size: 1.2em;
	line-height: 2em;
	margin-bottom: 2em;
}

.footer h5 {
	padding: 0 1em;
	color: #003366;	
}

.footer h6 {
	text-transform: uppercase;
	padding-left: 0.5em;	
}

.footer {
	background-color: #ff9900;	
	width: 100%;
	display: inline-block;
}

.footer .feature {
	float: left;
	padding: 0.75em 0.5em 0em 1em;
}

.footer #sponsors p {
	margin-bottom: 1em;	
}

.footer #sponsors img {
	margin-bottom: 1em;
	margin-left: 1em;
	padding: 0.5em;
	background-color: #fff;
	border: 1px solid #000;	
}

@media (max-width: 400px) {
		#friendsgbg-com {
			width: 98%;
			margin: 0 auto;
			background-color: #ffffcc;	
		}
		/* size headings using scale of 12, 15, 16, 18, 20 */
		h1, .sitebranding strong { 
			font-size: 2em; /* 20px */ 
			line-height: 1.2em; /* 24px */
			letter-spacing: -1px;
		}
		h2, .bodycontent h1 { 
			font-size: 1.8em; /* 18px */ 
			line-height: 1.33333em; /* 24px */ 
		}
		h3, bodycontent h2, .aside h2 { 
			font-size: 1.4em; /* 14px */ 
			line-height: 1.7142em; /* 24px */
		}	
		h4, h5, h6 { 
			font-size: 1.5em; /* 15px */ 
			line-height: 1.6em; /* 24px */ 
		}
		legend {
			font-size: 1.5em; /* 15px */ 
			line-height: 1.6em; /* 24px */
			font-weight: bold;
		}
		p, ul, ol, dl, address, table, blockquote, pre, fieldset, form {
 			margin-bottom: 0em; /* 12px */
		}
		h2, .bodycontent h1 {
			margin-bottom: 0.6em; 
			margin-top: 0em;
		}
		h3, h4, h5, .bodycontent h2 {
			margin-bottom: 0.66665em; 
			margin-top: 0.66665em;
		}
		h6 {
			margin: 0;
		}
		dl.accessibility {
			font-size: 1em;	
			float: left;
		}
		.navigation, .bodycontent, .aside, .drawer {
			float: none;
			position: relative;
			margin-left: 1.1%;
			margin-right: 1.1%;	
		}

		.sitebranding h1, .sitebranding strong {
			background: #ff9900;
			padding: 1.3em 2.5em 1.3em 0.2em;
			color: #000000;
			margin: 0;
			display: block;
			font-weight: normal;
		}
		.header {
			background: #000000;	
		}
		.header ul li {
			float: none;
			width: 75%;
			margin: 0.24em 0;
			padding: 0;	
			background: #ff9900;
			text-align: center;
			font-weight: bold;
			border-bottom: 1px solid #000000;
		}
		
		.navigation li ul {
			font-size: 0.75em;
			margin-bottom:0;
			padding-left: 0.5em; 	
		}
		.navigation li ul li {
			display: inline;
			margin: 0 1.1%;	
		}
		.bodycontent h1, .bodycontent h2, .footer h5, div.half-content dl {
			padding: 0 0.5em;	
		}
		.bodycontent ul {
			font-size: 1.2em;	
		}
		.bodycontent p, .aside p, .footer p, .footer dl, .aside ul {
			padding: 0 0.5em;
			font-size: 1.2em;
			line-height: 1.75em;
			margin-bottom: 0.75em;
		}
		div.half-content {
			float: none;
		}
}