/* Reset */
/* ALWAYS put this information in the style sheet, before you start entering tags, ids, class etc. */
/* BEGIN FULL CSS RESET */

/* Color Legend */




html, body { margin: 0; padding: 0; border: 0;
				background: transparent; font-size:10px; }
				
div, span, article, aside, footer, header, hgroup, nav, section,
ht, h2, h3, h4, h5, h6 p, blockquote, a, ol, ul, li,
table, tr, th, td, tbody, tfoot, thead {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	background: transparent;
	}
	
img		{ margin:0; padding:0; border:0; }

table, tr, th, td, tbody, tfoot, thead {
	margin: 0; padding: 0; border: 0;
	vertical-align: baseline;
	background: transparent;
	}
	
table { border-collapse: collapse; border-spacing: 0; }

input, select, textarea, form, fieldset {
	margin: 0; padding: 0; border: 0;
	}
	
	article, aside, dialog, figure, footer, header, hgroup, nav, sections {
		display:block; }
		
h1, h2, h3, h4, h5, h6, p, li, blockquote, td, th, a, caption, em, strong, strike {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	font-weight: normal;
	font-style: normal;
	line-height: normal;
	text-indent: 0;
	text-decoration: none;
	text-align: left;
	color: #000;
	}
	
	ol, ul { list-style: none; }
	
	
	/* Global */
	
html		{	}
body		{ background-color:#88B4E5;	} /* this will change the background of your page */


/* END FULL CSS RESET */

/* BEGIN CODING BELOW */

/* Headings */

h1, h2, h3, h4, h5, h6 { font-weight:bold; color: #000; }

h1 {font-size:24px; }
h2 {font-size:20px; }
h3 {font-size:16px; }
h4 {font-size:14px; }
h5 {font-size:12px; }
h6 {font-size:14px; }
h7,h8 { font-weight:normal; color: #000; }
h7 {font-size:10px; }
h8 {font-size:18px; }

html img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; }
/* Text Elements */

p				{ color:#000; font-size:12px; line-height:150%; }
p	.left		{ margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p	.right		{ margin: 1.5em 0 1.5em 1.5em; padding: 0; }

a				{	}
a:link			{ color: blue;	}/*{ color: #00f;	}*/
a:visited		{ color:#FF0000; }/*{ color: #0f0;	}*/
a:active		/*{ color: #000;	}*/
a:focus			/*{ color: #666;	}*/
a:hover			/*{ color: #f00;	}*/

blockquote		{ color:#000; font-size:12px; }

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

/* Images */



/* Lists */

ul				{	}
ol				{ list-style-type:decimal; }

ul li			{color:#000; font-size:12px; }
ol li			{color:#000; font-size:12px; }

dl				{	}
dt				{	}
dd				{	}



/* Tables */

table			{ width:100%; }

tr				{	}
.odd			{ background-color:#eee; }
.even			{ background-color:#fff; }

th				{ font-weight: bold; }
thead, th		{ background: #ccc; }

tbody			{	}

th,td,caption	{	}
caption			{	}

tfoot			{	}
.tfooter		{ background-color:#ccc; text-align:center; font-style:italic; }

caption			{ background-color: #efefef; }


/* Containers */

#wrapper			{ width:1100px; margin:0px auto; background-color:#ffffff;} /*WRAPPER = the area of your webpage that will be used for text, images, ect.
																				Info listed centers the page using the wrapper 900px wide with zero margins 
																				and auto left and right.  Also if you do change this, you should also adjust the
																				left and right divs
																				If you are going to use 1500 make sure you have both left and right divs showing,
																				if using only one of the left or right divs, set to 1100px*/

#top				{ background-color:#88B4E5; width:100%; padding:0 0; overflow:hidden; border-bottom:3px #88B4E5 solid;	} /*the background of the top area will be black 
																															  (#000000) the width of the top will be 100% of 
																															  the wrapper size;  always make the wrapper size
																															  the largest width as everything else you do will
																															  go off ofthat number.  In this example we are
																															  stating that the css should use 100% of the
																															  900px available.  The border-bottom will put
																															  a border underneath the logo area, and above
																															  the navigation area - see #TOPNAV UL */

#logo				{ margin: 10px 0 0 10px; float: left; border-bottom:4px #0000ff; } /* zero margin top right and bottom, but 10 pixels to the left.  The float statement will float everything to the left in the logo area*/
																				
#twitter			{ float: right; padding: 0px 140px 0px 0px;	}


#social-media		{ float: right;margin:0 10px 0 0;	}
#social-media p		{ color:#000000; font-size:11px; margin: 4px 10px 4px 0px;	}
#social-media img	{ width:24px; height:24px;	}
#social-media ul li	{ display: inline; }
#social-media a:link	{ color:#000000; }
#social-media a:visited	{ color:#000000; }
#social-media a:active	{ color:#000000; }
#social-media a:hover	{ color:#000000; font-weight:bold; } /* green color code: background-color:#58a843 */
#social-media a:focus	{ color:#000000; }	

#banner				{ background-color: #ffffff; padding: 30px 0px 10px 0px; 
						border-bottom: 0px #88B4E5 solid; } /*This is the background color for the banner area just below the logo area where the slider may be.  To put the seperator in, enter border-bottom*/
#banner p			{ color: black; font-size: 16px; }																
#banner iframe 		{margin:  0 0 0 550px; } /*this will move the twitter feed over to the right side of the screen*/
/* #topnav is for the hyperlinks that appear just below the logo area */
#topnav				{ background-color:#333333; clear:both;	}
#topnav ul			{ width:100%; float:left; margin: 0px; background-color:#000000; border-bottom:3px #88B4E5 solid;} /*puts a border under the link area*/
#topnav ul li		{ display:inline; font-size:12px; }
#topnav ul li a		{ float: left ; margin:0 0 0 11px; padding: 5px 15px 2px 15px; font-weight:bold;} /*top right bottom left*/

#topnav a:link		{ color:#ffffff; }
#topnav a:visited	{ color:#ffffff; }
#topnav a:active	{ color:#ffffff; }
#topnav a:hover		{ color:#ffffff; background-color:#58a843; }
#topnav a:focus		{ color:#ffffff; }

#subbanner			{ width:100%; background-color:#ffffff;	padding: 15px 0; overflow:hidden; border-bottom:3px #646464 solid; }
#subbanner h3		{ color:#000000; margin: 0 5px 0 0; font-size: 16px; font-weight:bold; text-align:center; line-height:180%;  }
#subbanner iframe 	{ margin:  0 0 0 550px; } /*this will move the twitter feed over to the right side of the screen*/

#sidebar			{ 	}

#content			{ float:left; width: 800px; padding:20px; margin:  0 0 0 20px;}
#content h1			{ margin:  0 0 10px 0; font-size:32px; border-bottom :1px #FF0000 solid; padding:20px 0; } /* this will give the H1 location a bottom border, current is red*/
#content p			{ margin:16px 0; line-height:160%; }
#content h2			{ margin: 20px 0 0 0; }
#content img		{ padding:8px; border:0px #777777 solid; margin: 8px; }

/*#leftside			{ padding:0px; margin-right:0px; margin:  0 0 0 20px;	} /*will push the calendar area to the left*/
#leftside			{ float:left; width: 150px; padding:20px; margin:  0 0 0 20px;}
#leftside h1		{ padding: 0px; font-size:25px; }
#leftside h2		{ margin: 0 0 0 0; padding: 0 0 0 0; }	
#leftside h4		{ font-size:14px; font-weight: 100;}
#leftside p			{ margin:8px 0; line-height: 140%; }
#leftside td		{ height: 15px; font-size:12px; }


/*#rightside			{ padding:20px; margin-left:1000px; margin:  0 0 0 20px;	} /*will push the calendar area to the right*/
#rightside			{ float:right; width: 150px; padding:20px; margin:  0 0 0 20px;}
#rightside h1		{ padding: 0px; font-size:25px; }
#rightside h2		{ margin: 0 0 0 0; padding: 0 0 0 0; }	
#rightside h4		{ font-size:14px; font-weight: 100;}
#rightside p		{ margin:8px 0; line-height: 140%; }
#rightside td		{ height: 15px; font-size:12px; }





#content-wrapper	{	}

#leftnav			{	}

#footer				{ clear: both; background-color:#000000; padding:5px 0; border-top :4px #88B4E5 solid; border-bottom:4px #88B4E5 solid;} /*how the footer will appear.  Very important to add the CLEAR: BOTH tag*/

#footer p			{ margin:0 5px 0 25px; text-align: left; color:#ffffff; } /*aligns the footers text information and changes color */
/* #footer a:link		{ color:#0000FF ; }	
#footer a:active	{ color: yellow; }*/

#footer a:link			{ color: white;	}/*{ color: #00f;	}*/
#footer a:visited		{ color:#999999;}/*{ color: #0f0;	}*/

#box1	{	}

#box2	{	}

#box3	{	}

#box4	{	}

#box5	{	}

#box6	{	}


/* Layout Extra */




/* Navigation Extra */



/* Forms */

form { text-align:left; margin:20px;	}

label, submit, input, textarea {
	border:0; padding:0; margin:0; background:none;
	}
	
label {
	float: left; width: 150px;
	text-align:right; display:block;
	}

input, textarea { border:1px; color:#333; margin-left:10px; }
	
input {
	width: 280px; margin-bottom: 16px;
	}
	
textarea {
	width: 28px; height: 150px;
	margin-bottom: 16px;
	}
	
select {	}

.submit {
	width:90px; height:25px;
	margin-left:150px;
	font-size:12px;
}

br	{ clear: left;	}


/* Miscellaneous */

.copyright-text	{ font-size:80%; font-style:italic; color:#333; }
.footer-text	{ font-size:80%; font-style:normal; color:#666; }

.title			{ font-size:18px; font-weight:bold; color:#333;	 }
.subtitle		{ font-size:14px; font-style:italic; color:#333;  }

.artist			{ font-size:16px; font-weight:bold; color:#333;  }
.author			{ font-size:14px; font-weight:bold; color:#555;  }
.editor			{ font-size:14px; font-style:normal; color:#555;  }

.pub-date		{ font-size:10px; font-style:italic; color:#333;  }
.article-date	{ font-size:10px; font-style:italic; color:#555;  }
.location		{ font-size:10px; font-style:italic; color:#555;  }

.float-right	{ float:right; }
.float-left		{ float:left; }
.clear			{ clear:both; }

.hide			{ display:none;  }
.block			{ display:block;  }
.inline			{ display:inline;  }

.first			{ font-weight: bold; }
.last			{ font-weight: bold; }
.left			{ font-weight: bold; text-align:left; }
.right			{ font-weight: bold; text-align:right; }

.added			{ background:#D7D7FF;  }
.removed		{ background:#FFCECE; color:#f00;  }
.changed		{ background:#FFB;  }

	
/* Success, info, notice and error/aleart boxes - from Blueprint CSS Framework */	
	
.error, .alert, .notice, .success, .info {
	padding: 0.8em; margin-bottom: 1em; border: 2px solid #ddd; }
	
.error, .aleart	{ background: #fbe3e4; color: #8a1f11; border-color: #fbc2c4;  }

.notice			{ background: #fff6bf; color: #514721; border-color: #ffd324;  }

.success		{ background: #e6efc2; color: #264409; border-color: #c6d880;  }

.info			{ background: #d5edf8; color: #205791; border-color: #92cae4;  }

.error a	{ color: #8a1f11; }
.alert a	{ color: #8a1f11; }

.notice a	{ color: #514721; }
.success a	{ color: #264409; }
.info a		{ color: #205791; }