/*
Title: Leslie Carroll Designs
Author: Tome Wilson - tome@creativewebgroup.net
Last Updated: March 9, 2009
*/

/* ---[ css reset ]--------------------- */
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, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, ol, ul {margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline}
:focus {outline: 0}
body {line-height: 1}
ol, ul {list-style: none}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: separate; border-spacing: 0}
caption, th, td {text-align: left; font-weight: normal}
a {text-decoration: none}

/* ---[ structure ]--------------------- */
html, body {background: #757575 url(images/shell/background.png) repeat-x; height: 100%; min-width: 694px; text-align: center; color: #fff; font: normal 10px/1em Arial, Helvetica, sans-serif}
#center-on-page {width: auto; text-align: center}
#container {margin: 0 auto; width: 694px; display: block}

#header, #top-navigation, #footer {display: block; width: 694px; clear: both}
#header {height: 83px; margin-bottom: 2px}

/* ---[ top navigation rollover buttons ]--------------------- */
#top-navigation {width: 302px; float: right}
	#top-navigation ul {list-style: none}
	.top-navigation1, .top-navigation2, .top-navigation3, .top-navigation4 {height: 83px; float: left}
	#top-navigation a.home, #top-navigation a.about, #top-navigation a.contact, #top-navigation a.portfolio {float: left; background: url(images/shell/top-navigation.png) no-repeat; display: block; height: 83px; text-indent: -999999px}
	.top-navigation1 {/*width: 63px*/}
	#top-navigation a.home {background-position: 0 0; width: 63px}
	#top-navigation a.home:hover {background-position: 0 -83px}
	.top-navigation2 {/*width: 70px*/}
	#top-navigation a.about {background-position: -63px 0; width: 70px}
	#top-navigation a.about:hover {background-position: -63px -83px}
	.top-navigation3 {/*width: 83px*/}
	#top-navigation a.contact {background-position: -133px 0; width: 83px}
	#top-navigation a.contact:hover {background-position: -133px -83px}
	.top-navigation4 {/*width: 86px*/}
	#top-navigation a.portfolio {background-position: -216px 0; width: 86px}
	#top-navigation a.portfolio:hover {background-position: -216px -83px}

#main, #left-side, #right-side {height: 446px; display: block}

#main {text-align: left; width: 698px; clear: both}

#left-side {width: 207px; float: left; margin-right: 75px}
	#logo {margin-top: 10px}

	/* ---[ side navigation rollover buttons ]--------------------- */
	#side-navigation {height: 213px; width: 207px}
		#side-navigation ul {height: 213px; list-style: none}
		#side-navigation li {float: left; /*width: 207px*/ /* needed or else IE and Opera will go nuts */}
		#side-navigation a.leslie-carroll-designs, #side-navigation a.find, #side-navigation a.news, #side-navigation a.events, #side-navigation a.charity {float: left; background: url(images/shell/side-navigation.png) no-repeat; display: block; width: 207px; text-indent: -999999px}
		#side-navigation a.leslie-carroll-designs {background-position: 0 0; height: 42px}
		#side-navigation a.leslie-carroll-designs:hover {background-position: -207px -0px}
		#side-navigation a.find {background-position: 0 -42px; height: 44px}
		#side-navigation a.find:hover {background-position: -207px -42px}
		#side-navigation a.news {background-position: 0 -86px; height: 42px}
		#side-navigation a.news:hover {background-position: -207px -86px}
		#side-navigation a.events {background-position: 0 -128px; height: 42px}
		#side-navigation a.events:hover {background-position: -207px -128px}
		#side-navigation a.charity {background-position: 0 -170px; height: 43px}
		#side-navigation a.charity:hover {background-position: -207px -170px}

#right-side {width: 410px; float: left; border-right: 2px solid #fff; border-left: 2px solid #fff}
	#content {border-top: 2px solid #fff; width: 390px; padding: 10px 10px 0 10px; background: #e7e7e8; overflow: auto; color: #000; font-size: 13px}

		/* ---[ content styles ]--------------------- */
		em, .em {font-style: italic}
		strong, .strong {font-weight: bold}
		.big {font-size: 110%}
		.small {font-size: 75%}
		.l {float: left}
		.r {float: right}
		.clear {clear: both; display: block}
		.center {text-align: center}
		.none {padding: 0; border: 0 !Important}

		#content a {color: #029390}
		#content a:hover {color: #fff; background: #74bdbc}
		#content p {padding: .35em 0; line-height: 1.35em}
		.hr {font-size: 1px; border-bottom: 1px dotted #8b3f25; margin: 8px 0}
		.photoL {float: left; margin: 3px 8px 0 0}
		.photoR {float: right; margin: 3px 0 0 10px}
		.square1, .square2, .square3 {border: 2px solid #9e9e9e; background: #fff; display: block; height: 113px; width: 113px; float: left; margin: 10px 10px 0 0}
		.square3 {margin: 10px 0 0 0}
		.column1 {width: 170px; padding-right: 15px; float: left; text-align: center}
		.column2 {width: 170px; padding-left: 15px; float: left; text-align: center}

		#content ul {padding: .35em 0 .35em 1em; line-height: 1.35em; list-style-type: none; text-align: left}
		#content li {padding: .35em 0 .35em 1em; background: transparent url(images/square.gif) 0 .8em no-repeat}

		h1 {font: normal 26px/1em Arial, Helvetica, sans-serif; color: #029390; padding: 0 0 .15em 0}
		h2 {font: normal 22px/1em Arial, Helvetica, sans-serif; color: #8b3f25; padding: 0 0 .25em 0}
		h3 {font: bold 16px/1em Arial, Helvetica, sans-serif; color: #9e9e9e}

		/* ---[ font colors ]--------------------- */
		.black {color: #000 !Important}
		.white {color: #fff !Important}
		.grey {color: #666 !Important}
		.teal {color: #029390 !Important}
		.brown {color: #8b3f25 !Important}


#footer {margin-top: 14px}
#bottom-navigation {width: 600px; height: 10px; display: block; margin-left: 109px}
	#bottom-navigation ul {list-style: none}
	#bottom-navigation li {float: left}

#footer a {color: #fff; border-right: 1px solid #fff; padding: 0 8px}
#footer a:hover {background: #9e9e9e}
#footer p {margin-top: 10px}