/*  
Theme Name: JG MCC
Theme URI: http://www.marylandcommunityconnection.org
Description: Theme for maryland community connection website.
Version: 1.0
Author: Joseph Gummadi

This theme is adopted from a blank theme by Elliot Jay Stocks http://elliotjaystocks.com

flickrs
http://www.flickr.com/photos/bunnymay/2383766265/sizes/o/in/set-72157604066533274/
http://www.flickr.com/photos/teotwawki/1444791636/sizes/o/
*/

/* ************************************************************************
GLOBAL RESETS - Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui
************************************************************************ */

*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td {
	margin:0;
	padding:0;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

fieldset, img {
	border:0;
}

address, caption, cite, code, dfn, em, strong, th, var {
	font-style:normal;
	font-weight:normal;
}

ol, ul, li {
	list-style:none;
}

caption, th {
	text-align:left;
}

h1, h2, h3, h4, h5, h6 {
	font-size:100%;
}

q:before, q:after {
}

a {
	text-decoration:none;
	outline:none;
}

/* Sensible Defaults*/

strong { font-weight:bold;}
em, em strong, strong em { font-style:oblique;}
* a { position:relative;} /* Gets links displaying over a PNG background */
a img { border:none;} /* Gets rid of IE's blue borders */

/* ************************************************************************
GENERAL
************************************************************************ */

body {
	background:#F4F4F4 url(media/body.png) repeat-x;
	font:0.8em Arial, Helvetica, Sans-Serif;
	color:#444;
}

#page {
	width:760px;
	margin:0 auto;
}

/*-- Header Sizes --*/
h1 { font-size:170%;}
h2 {	font-size:150%;}
h3 {	font-size:130%;}
h4 {	font-size:120%;}
h5 {	font-size:110%;}
h6 {	font-size:100%;}


/* ************************************************************************
MENU and dropdown
************************************************************************ */
#nav {
	color: #EEEEEE;
	margin: 0 auto 0;
	padding: 0;
	}

#nav .wrap {
	background: url(images/nav.png);
	width: 960px;
	height: 45px;
	margin: 0 auto 0;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-bottomright: 10px;
	-khtml-border-radius: 10px;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	opacity: .90;
	-moz-opacity: .90;
	-khtml-opacity: 0.90;
	filter:alpha(opacity=90);
	}
	
#nav ul {
	width: 500px;
	float: left;
	list-style: none;
	margin: 0;
	padding: 0 0 0 10px;
	}
	
#nav li {
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
	}
	
#nav li a {
	color: #EEEEEE;
	display: block;
	font-size: 14px;
    margin: 0;
	padding: 17px 12px 17px 12px;
	text-decoration: none;
	text-shadow: #000000 1px 1px;
	position: relative;
	background: url(images/navline.png) no-repeat right;
	}

#nav li a:hover, #nav li a:active {
	background: #F4F4F4;
	color: #4c4c4c;
	text-shadow: none;
	}
	
#nav li a.sf-with-ul {
	padding-right: 20px;
	}	
	
#nav li a .sf-sub-indicator {
	background: url(images/arrow-down.png);
	display: block;
	width: 10px;
	height: 10px;
	text-indent: -9999px;
	overflow: hidden;
	position: absolute;
	top: 19px;
	right: 5px;
	}
	
#nav li a:hover .sf-sub-indicator {
	background: url(images/arrow-down.png);
	}
	
#nav li li a, #nav li li a:link, #nav li li a:visited {
	background: #F4F4F4;
	color: #4C59B1;
	width: 138px; 
	margin: 0;
	padding: 6px 10px 6px 10px;
	border-bottom: 1px dotted #CCCCCC;
	text-shadow: #FFFFFF 1px 1px;
	text-transform: none;
	position: relative;
	opacity: .95;
	-moz-opacity: .95;
	-khtml-opacity: 0.95;
	filter:alpha(opacity=95);
	}
	
#nav li li a:hover, #nav li li a:active {
	background: #FFFFFF;
	color: #333333;
	}

#nav li li a .sf-sub-indicator, #nav li li a:hover .sf-sub-indicator {
	background: url(images/arrow-right.png);
	top: 10px;
	}
	
#nav li ul {
	z-index: 9999;
	position: absolute;
	left: -999em;
	height: auto;
	width: 160px;
	margin: 0;
	padding: 0;
	}

#nav li ul a { 
	width: 140px;
	}

#nav li ul a:hover, #nav li ul a:active { 
	}

#nav li ul ul {
	margin: -33px 0 0 158px;
	}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfHover ul ul, #nav li.sfHover ul ul ul {
	left: -999em;
	}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfHover ul, #nav li li.sfHover ul, #nav li li li.sfHover ul {
	left: auto;
	}

#nav li:hover, #nav li.sfHover { 
	position: static;
	}

#nav li.right {
	float: right;
	margin: 0;
	padding: 13px 25px 12px 0;
	}

#nav li.right a {
	display: inline;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	color: #EEEEEE;
	font-weight: normal;
	text-decoration: none;
	}
	
#nav li.right a:hover {
	color: #EEEEEE;
	text-decoration: underline;
	text-shadow: #000000 1px 1px;
	}
	
#nav li.date {
	}
	
#nav li.rss a {
	background: url(images/rss.png) no-repeat left center;
	margin: 0 0 0 10px;
	padding: 3px 0 3px 18px;
	}
	
#nav li.search {
	padding: 0 10px 0 10px;
	}
	
#nav li.twitter a {
	background: url(images/twitter-nav.png) no-repeat left center;
	padding: 3px 0 1px 20px;
	}
	



/* ================================================================ 
   This CSS is further CSS I have created specifically for Wordpress
   so that the current page is highlighted in two levels.
   If you want it in three levels let me know.

   Author: Isaac Rowntree
   Website: www.zackdesign.biz
=================================================================== */

#menu-item-1037 {
width: 62px;
}
#menu-item-1037 .sub-menu {
width: 120px;
}

.menu ul ul .current_page_item a {
	color:#fff;
}

.menu .current_page_item a {
	color:#fff;
}

.menu ul .current_page_item ul a {
 	color:#EAF6FB;
}

.menu ul .current_page_item ul a:hover {
	color: #fff;
}

.menu .current_page_item a:hover {
}


/*-----Searchbar----*/

#searchbar {
	float:right;
	background:url(media/searchform.png) no-repeat;
	padding:15px;
	height:45px;
	width:220px;
}

#searchbar form {	
	margin:5px auto 13px auto;
	width:178px;
	height:18px;
	border:1px solid #aaa;
	background:#fff;
	padding:3px;
}

#searchbar form input#s {
	border:0;
	height:14px;
	width:152px;
	float:left;
	padding:2px;
}

#searchbar form input#searchsubmit {
	border:0;
	background:url(media/search.png) no-repeat;
	height:18px;
	width:20px;
	padding:0;
	margin:0;
	float:right;
	cursor:pointer;
}

/*-------SUBMENU -------------*/

#submenu {
	width:670px;
	background:#C3D9FF;
	padding:10px;
	margin:0 -5px 10px -5px;
	text-align:left;
}

#submenu ul {
	padding:0 0 0 40px;
}

#submenu ul li {
	display:inline;
	background:transparent url(media/dot.png) center left no-repeat;
	padding: 0 6px 0 10px;
	margin:0;
	font-size:95%;
}

#submenu ul li.title {
	background:none;
	font-weight:bold;
	margin:0 0 0 -40px;
	color:#666;
}

#submenu ul li a {
	color:#666;
}

#submenu ul li a:hover{
	text-decoration:underline;
}

#submenu ul li ul {
	display:inline;
}

/* ************************************************************************
HEADER
************************************************************************ */

#header {
	height:60px;
	clear:both;
	background:url(media/mcc.gif) no-repeat; /*mcc*/
	padding:0 0 0 38px; /*mcc*/
	margin-bottom:5px; /*mcc*/
	z-index:-1;
}

#header h1#title{
	padding:8px 10px 0 10px;
	font-size:32px;
	text-align:left;
	letter-spacing:-2px; /*mcc*/
}

#title a, #title a:hover {
	color:#EBF1F4;
}


/* ************************************************************************
CONTENT
************************************************************************ */

#content {
	background:url(media/content.png) no-repeat;
	padding:55px 40px 10px 40px;
	line-height:1.5;
}

#contentbg {
	background:url(media/contentbg.png) repeat-y;
}

#content p {
	padding:8px 0;
}

blockquote {
	font-style:oblique;
	margin:10px 0 10px 0;
	padding:5px 10px 5px 10px;
	background:#F4F7F9;
	border:1px solid #E5ECF9;
}

a {
	color:#479BD3;
	text-decoration:none;
}

#content img {
	border:4px solid #C3D9FF;
}

#content #narrow ul li {
	list-style-type:disc;
	margin:0 0 0 15px;
}

/* ************************************************************************
NARROW/WIDE COLUMNS
************************************************************************ */

#narrow {
	width:440px;
	padding:0 40px 0 0;
	float:left;
}

#wide {
	width:680px;
}

.clear {
	clear:both;
}

/* ************************************************************************
HOMEPAGE
************************************************************************ */

.quote {
	color:#AAA;
	font-size:60px;
	float:left;
}

#hometagline {
	color:#BBB;
	font:30px "times new roman", serif;
	text-align:center;
	line-height:1.3;
	font-style:oblique;
	letter-spacing:0.8;
}

/* ************************************************************************
BOTTOMBAR
************************************************************************ */

#bottombar {
	width:680px;
	display:block;
	background:#F4F7F9;
	padding:5px 0 5px 0;
	border:1px solid #E5ECF9;
}

ul#bottombarul {
	list-style:none;
}

ul#bottombarul li {
	width:203px;
	margin:0 12px 0 10px;
	display:inline;
	float:left;
}

ul#bottombarul li ul {
	display:block;
	border:10px solid #C3D9FF;
	height:230px;
	background:#fff;
}

ul#bottombarul li ul li a{
	padding:3px;
	width:177px;
	display:block;
	border-bottom:1px solid #D9E3ED;
	font-weight:bold;
	background:#fff;
	color:#111;
}

ul#bottombarul li ul li a:hover{
	background:#E5ECF9;
	color:#222;
}


ul#bottombarul li ul li {
	margin:0;
}


/* ************************************************************************
SIDEBAR
************************************************************************ */

#sidebar {
	width:200px;
	float:right;
}

#sidebar h2 {
	padding:5px 0 0 0;
}

a#donate {
	display:block;
	height:39px;
	width:195px;
	background:url(media/donate.png) no-repeat;
	margin:10px auto 10px auto;
}

a#donate:hover {
	background:url(media/donate.png) 0 -39px no-repeat;
}

#sidebar .widget ul{
	background:#C3D9FF;
	padding:10px;
}

#sidebar .widget ul li{
	background:#fff;
}

#sidebar .widget ul li a, #sidebar .widget ul li ul li a{
	padding:3px;
	width:174px;
	display:block;
	border-bottom:1px solid #D9E3ED;
	font-weight:bold;
	background:#fff;
	color:#111;
}

#sidebar .widget ul li a:hover, #sidebar .widget ul li.current_page_item li a:hover, #sidebar .widget ul li.current_page_item a{
	background:#E5ECF9;
	color:#222;
}

#sidebar .widget ul li.current_page_item a{
	background:#F1F5FC;
	color:#222;
}

#sidebar .widget ul li.current_page_item li a{
	background:#fff;
	color:#111;
}

/*Nested Lists - for subnavigation */

#sidebar .widget ul li ul{
	padding:0 0 0 0;
}


#sidebar .widget ul li ul li{
	border-left:15px solid #E5ECF9;
}

#sidebar .widget ul li ul li ul li{
	display:none;
}

#sidebar .widget ul li ul li a{
	width:159px;
	font-weight:normal;
}


#sidebar ul li b {
	font-size:90%;
	text-transform:uppercase;
	padding:0 3px 0 10px;
	background:url(media/dot.png) center left no-repeat;
}



/* ************************************************************************
FOOTER
************************************************************************ */

#footer {
	background:#3b3b3b;
}

#footercontainer {
	background:#3B3B3B url(media/footer.png) no-repeat;
	display:block;
	padding:10px 40px 40px 40px;
	margin:0 auto;
	width:680px;
	text-align:center;
	font-size:90%;
}

#footer #credits {
	padding:0 0 75px 0;
	color:#aaa;
}

#footer #credits a {
	color:#888888;/*#A2CDE5*/
	text-decoration:underline;
}

#footer #credits a:hover {
	color:#C3D9FF;
	text-decoration:underline;
}

#footercontent {
	font-size:106%;
	color:#aaa;
	line-height:1.4;
	font-style:oblique;
}

#footercontent h2 {
	color:#666;
}

#footercontent a {
	color:#A2CDE5;
}

#footercontent a:hover{
	color:#66B6E8;
}

#footer img.footerlogo {
	float:right;
	margin:2px 0 2px 6px;
	border:0;
}

#footerleft {
	float:left;
	text-align:right;
	width:48%;
}

#footerright {
	float:right;
	text-align:left;
	width:48%;
}

/* ************************************************************************
POSTS
************************************************************************ */

.post {
	margin:0 0 25px 0;
}

.post h2 {
	line-height:1.4;
}

/* Meta Data */

.post p.postmetadata  {
	background:#DAE8EF;
	color:#A0B2BC;
	line-height:1;
	padding:7px 10px!important;
}

.post p.postmetadata  a {
	color:#82A6BA;
}

.post p.postmetadata  a:hover {
	text-decoration:underline;
}

/*Comments*/

#comments {
	margin-left:30px;
}

#comments h3 {
	margin-left:-10px;
}

form#commentform {
	background:#DAE8EF;
	color:#82A6BA;
	padding:10px 10px 10px 50px;
	width:590px;
}

form#commentform textarea {
	width:400px;
}

ol.commentlist li{
	background:#fafafa;
	padding:20px;
}

ol.commentlist li.alt {
	background:#f4f4f4;
}

#commentauthor {
	width:30%;
	float:left;
}

#commenttext {	
	width:70%;
	float:right;
}

#commenttext p {
	padding:0 !important;
	margin:0 !important;
}




