/* 
-------------------------------------------------------------------------------
 * Name: TEEN OUTREACH
 * Date: Sept 2011
 * Description: Global Style Sheet
 * Version: 1.2
 * Coder: Creative Visions
 * Coder URI: http://www.creativevisions.us
-------------------------------------------------------------------------------
*/

/*	
-------------------------------------------
	RESET
-------------------------------------------
*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, span, applet, object, iframe { margin:0; padding:0; border: 0; }
a img { border: none; }
ol, ul, li { list-style: none; }
*:focus, *.focus { outline: 0; }

.clear { clear: both; font-size: 1px; line-height: 1px; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px; }

/*	
-------------------------------------------
	GENERAL LAYOUT
-------------------------------------------
*/
body { background-color: #FFF; margin: 0px; }

#wrapper { width:1000px; margin: 0 auto; }
#page-wrapper { width:1000px; position:relative; margin: 0 auto; padding-bottom: 25px; }

#main { width: 1000px; min-height: 450px; padding-top: 30px; color: #6d6c6c; clear: left; padding-bottom: 30px; }
#titles { padding-left: 10px; }
#nav_container { width: 976px; height: 25px; text-align: center; margin: 0 auto; padding-top: 9px; }

#content_wrapper { min-height: 450px; }
sup { position: relative; bottom: 0.8ex; vertical-align: baseline; font-size: 9px; }

/*	
-------------------------------------------
	SHORTCODES
-------------------------------------------
*/
p { font: 0.875em "Times New Roman", Times, serif; }
img, a img { border: 0; }
input, textarea { font-size:11px; font-family: Arial, Helvetica, sans-serif; }
a { color: #46518F; }
a:hover { text-decoration: none; }


/*	
-------------------------------------------
	HEADER
-------------------------------------------
*/
#header { height: 148px; background-image: url(../images/watermark.jpg); }

.left { float: left; margin-top: 41px; }
.right { float: right; margin-top: 27px; width: 200px; text-align: right; }

.rss, .facebook { margin-top: 5px; margin-bottom: 5px; }
.rss a, .facebook a { margin-top: 5px; margin-bottom: 5px; color: #46518F; }
.rss img, .facebook img { float: right; padding-left: 5px; }

.phone { margin-top: 10px; margin-bottom: 5px; }
.phone p { color: #46518F; font-weight: bold; margin: 0px; padding: 0px; }


#top_header { height: 148px; width: 1000px; background-image: url(../images/watermark.jpg); }
#top_header_left { float: left; margin-top: 41px; }
#top_header_rt { float: right; margin-top: 41px; }
.top_rss { background-image: url(../images/top_rss.png); background-repeat: no-repeat; background-position: 3px; height: 21px; }
.top_rss a { font-size: 11pt; color: #46518F; text-decoration: underline; padding-left: 28px; padding-top: 3px; }
.top_rss a:hover { text-decoration: none; }
.top_num { font-size: 11pt; color: #46518F; font-weight: bold; padding-top: 20px; }
.top_num p { margin: 0 0 3px 0; padding-right: 0px; }

/*	
-------------------------------------------
	BANNER
-------------------------------------------
*/
#banner { height: 294px; width: 1000px; margin-top: 3px; }

#head_rotate { height: 294px; width: 1000px; margin-top: 3px; }

/*	
-------------------------------------------
	NAV
-------------------------------------------
*/
#nav { margin: 0 auto; display: inline; }
ul#nav { padding-left: 0; white-space: nowrap; margin: 0px; }
#nav li { display: inline; list-style-type: none; }
#nav a { width: 150px; padding: 1px 10px 1px 10px; display: block; float: left; font-size: 11px; font-weight: bold; }
#nav a:link, #nav a:visited { color: #fff; background-color: #036; text-decoration: none; }
#nav a:hover { color: #fff; background-color: #369; text-decoration: none; }
#nav li a.our_programs { background-color: #3d5a2c; margin-right: 15px; }
#nav li a.by_teens { background-color: #532c5a; margin-right: 15px; }
#nav li a.about_us { background-color: #456f90; margin-right: 15px; }
#nav li a.contact_us { background-color: #904545; margin-right: 15px; }
#nav li a.blog { background-color: #908845; }

/*	
-------------------------------------------
	CONTENT
-------------------------------------------
*/
#content { width: 940px; text-align: left; padding: 10px 30px 0 30px; }
#content p { margin: 0px; color: #6d6c6c; line-height: 1.3em; }
#content ul { margin: 0px; padding: 5px 10px; }
#content ul li { list-style: disc outside; margin-left: 10px; font-size: .875em; }

/*SUBPAGE LAYOUT*/
#sub_content { float: left; width: 610px; min-height: 450px; margin-bottom: 40px; padding-right: 20px; }
#sub_content p { margin: 0px; font-size: .9em; line-height: 1.3em; color: #6d6c6c; padding-top: 10px; padding-right: 0px; padding-bottom: 0; padding-left: 30px; }
#sub_content a { text-decoration: underline; color: #456f90; }
.sub_content_list { padding: 0px; margin: 0 0 0 55px; font-size: .9em; color: #6d6c6c; }
.pic { border: 4px solid #446F91; }


/*	
-------------------------------------------
	SIDEBAR
-------------------------------------------
*/
#sidebar_wrapper { float: left; width: 368px; border-left: 2px dotted #456f90; padding: 0px; margin: 0px; }

#sidebar { float: left; width: 368px; border-left: 2px dotted #456f90; padding: 0px; margin: 0px; }
.sidebar-blue, .sidebar-green, .sidebar-purple, .sidebar-ltblue, .sidebar-red, .sidebar-yellow { padding-left: 20px; }
.sidebar-blue ul, .sidebar-green ul, .sidebar-purple ul, .sidebar-ltblue ul, .sidebar-red ul, .sidebar-yellow ul { padding: 15px 0 0 0; margin: 0 0 40px 0; }
.sidebar-blue li, .sidebar-green li, .sidebar-purple li, .sidebar-ltblue li, .sidebar-red li, .sidebar-yellow li { font-size: .9em; list-style-type: none; border-bottom: 1px solid #999; margin-right: 25px; margin-bottom: 5px; }
.sidebar-blue li a, .sidebar-green li a, .sidebar-purple li a, .sidebar-ltblue li a, .sidebar-red li a, .sidebar-yellow li a { display: block; text-decoration: none; color: #000; padding: 2px 0 1px 5px; }
.sidebar-blue li a:hover { background-color: #456f90; display: block; color: #FFF; }
.sidebar-green li a:hover { background-color: #3D5A2C; display: block; color: #FFF; }
.sidebar-purple li a:hover { background-color: #532C5B; display: block; color: #FFF; }
.sidebar-ltblue li a:hover { background-color: #446F91; display: block; color: #FFF; }
.sidebar-red li a:hover { background-color: #914545; display: block; color: #FFF; }
.sidebar-yellow li a:hover { background-color: #908945; display: block; color: #FFF; }
.sidebar_titles { }
.sidebar p { font-size: 0.9em; color: #666; }

/*	
-------------------------------------------
	FOOTER
-------------------------------------------
*/
#footer_wrapper { width:1000px; position:relative; margin: 0 auto 0 auto; }
#footer_bg { background-color: #bcbcbc; clear: both; }
#footer { background-color: #dedede; height: 138px; width: 1000px; }
.fcol1 { float: left; width: 375px; height: 100px; margin-left: 42px; padding-top: 23px; }
.fcol1 ul { float: left; width: 375px; list-style: none; display: block; margin: 0; padding: 0; }
.fcol1 li { width: 166px; float: left; background-image: url(../images/footer_arrow.jpg); background-position: 3px; background-repeat: no-repeat; padding: 0 0 0 15px; margin: 0; }
.fcol1 li a { font-size: 9pt; color: #6d6c6c; text-decoration: none; display: block; padding-left: 5px; margin: 0px; }
.fcol1 li a:hover { background-color: #CCC; display: block; }
.fcol2 { float: left; width: 11%; height: 86px; margin-top: 23px; background-image: url(../images/footer_okat_logo.jpg); background-repeat: no-repeat; }
.fcol3 { background-image: url(../images/footer_logo.jpg); background-repeat: no-repeat; background-position: 53px 0px; float: right; width: 465px; height: 73px; margin-top: 23px; padding-top: 40px; }
.fcol3 ul { list-style: none; display: block; text-align: right; margin: 0; padding: 0; }
.fcol3 li { font-size: 9pt; color: #6d6c6c; padding: 0 52px 0 0; margin: 0; }
.fcol3 li a { font-size: 9pt; color: #6d6c6c; text-decoration: none; padding-left: 5px; margin: 0px; }
.fcol3 li a:hover { background-color: #CCC; }