@charset "UTF-8";
/* CSS Document */

/* ----------------------------------------------------------
    Arab American Institute CSS
    Managed by: Blue State Digital
    Last Update: May 2010 

    TABLE OF CONTENT

    01 - GLOBAL BROWSER RESET
    02 - COMMON STYLE
    03 - LAYOUT
    04 - HOMEPAGE 
    05 - SUBPAGES
    06 - FRAMEWORK
    07 - UTILITY
	
    COLOR GUIDE (Main Site Colors and their Hex Codes)
	
    BACKGROUND GREY: #f7f8fc
    


---------------------------------------------------------- */

/* 01 =GLOBAL BROWSER RESET
---------------------------------------------------------- */
/* YUI Reset version: 2.7.0 */

html { color: #000; background: #FFF; }
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,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,optgroup { font-style: inherit; font-weight: inherit; }
del,ins { text-decoration: none; }
li { list-style: none; }
caption, th { text-align: left; }
h1,h2,h3,h4,h5,h6 {	font-size: 100%; font-weight: normal; }
q:before, q:after {	content: ''; }
abbr,acronym { border: 0; font-variant: normal; }
sup { vertical-align: baseline; }
sub { vertical-align: baseline; }
/*because legend doesn't inherit in IE */
legend { color: #000; }
input,button,textarea,select,optgroup,option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; }
/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input,button,textarea,select { *font-size: 100%; }



/* 02 =COMMON STYLE 
---------------------------------------------------------- */

body { font: 62.5%/1.4 "Helvetica", "Lucida Sans Unicode", "Lucida Grande", sans-serif; background: #f7f8fc; color: #4d4d4f; }
h1, h2, h3, h4 { font-family: Georgia, "Times New Roman", Times, serif; color: #2b4a75; font-weight: bold; line-height: 1.2; }
#main.base { padding: 40px 39px 0; width: 553px; }
.full-width #main.base { width: 860px; }
.base h1 { font-size: 22px; color: #636466; margin-bottom: 15px; }
.base h2 { font-size: 20px; margin-bottom: 5px; }
.base h3 { font-size: 18px; }
.base h4 { font-size: 14px; }
.base h5 { font-size: 12px; font-weight: bold; margin-top: 10px; }

.topofpage {color: #990000}

.base p { font-size: 12px; margin-bottom: 12px; }
.base p.date { font-size: 11px; }

a:link, a:visited { color: #6081a3 ; text-decoration: none; }
a:hover { text-decoration: underline; color: #4C6D92; }

a.topofpage:link { color: #990000; }
a.topofpage:visited { color: #990000; }
a.topofpage:hover { color: #990000; }

blockquote { margin: 0 30px 20px; border-left: 0px solid #e2e3e4; padding-left: 20px; font-size: 12px; }

.base ul, .base ol { font-size: 12px; margin-bottom: 12px; }
.base ul li, .base ol li { list-style-position: inside; }
.base ul li { list-style-type: disc; }
.base ol li { list-style-type: decimal; }
.base li ol { padding-left: 20px; margin-bottom: 0; }
.base li ul { padding-left: 20px; margin-bottom: 0; }

.base #cse-search-box { position: static; width: 550px;}
.base #cse-search-box input.text { font-size: 12px; padding: 2px; position: relative; top: -6px; width: 500px; }

.newlist { padding-left:20px; }

/* 03 =LAYOUT
---------------------------------------------------------- */
#wrap {	margin: 0 auto;	width: 944px; }
#content { margin-bottom: 8px; }

#header { height: 150px; background: #4475ba url("/page/-/wrappers/images/mastheadnew.gif") 50% 0 no-repeat; position: relative; }
#header h2 { height: 109px; width: 350px; color: #FFF; background: url("/page/-/wrappers/images/logonew.gif") 5px 0 no-repeat; font-size: 26px; font-family: "Hoefler Text", Georgia, "Times New Roman", serif; }
#header h2 a { height: 109px; width: 350px; position: absolute; display: block; color: #f7f8fc; text-indent: -9999em; }
#header label, #header input.text { color: #555; font-family: Georgia, "Times New Roman", Times, serif; font-size: 10px; }
#header input.text { position: relative; top: -9px; height: 14px; }

#quick-signup { position: absolute; right: 25px; top: 55px; width:450px; }
#quick-signup fieldset { float: right; }
#quick-signup legend { color: #a1bee6; text-transform: uppercase; font-size: 10px; font-weight: bold; letter-spacing: .1em; }
#quick-email { width: 200px; }
#quick-zip { width: 100px; }

#cse-search-box { position: absolute; right: 25px; top: 120px; width: 155px; }
#quick-search { width: 120px; }

#navigation { margin-left: 5px; }
#navigation li.first { background: none; }
#navigation a { color: #f7f8fc; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; padding: 14px 11px 15px 12px; }
#navigation li { background: url("/page/-/wrappers/images/site-nav-border.gif") 0 50% no-repeat; height: 40px; padding-left: 1px; }
#navigation li ul { padding-left: 1px; }
#navigation li li {background: #153765; padding-left: 0; }
#navigation li li a { padding-top: 5px; padding-bottom: 5px; margin: 0; }
#navigation a:hover, #site-nav a:active, #navigation li.sfHover a { background: url("/page/-/wrappers/images/site-nav-hvr.gif") 0 0 repeat-x; text-decoration: none; }
#navigation li.sfHover li a { background: none; }
#main { float: left; width: 631px; }

#home #social-icons, #error404 #social-icons, #bsd #social-icons { display: none; }
#social-icons { position: absolute; bottom: -35px; right: 325px; }
#social-icons li { float: left; padding-left: 4px; }

/*** Testing Arab Voices Sidebar Events ***/
#sidebar-arab-voices-events { padding-top: 11px; background: #FFF url("/page/-/wrappers/images/actions.gif") 0 0 no-repeat; }
#sidebar-events-events h3 { padding: 0 10px; }
#sidebar #more-events-arab-voices { background: #FFF url("/page/-/wrappers/images/sidebar-box-bg.gif") 100% 100% no-repeat; padding: 0 10px 10px; margin-bottom: 8px; padding-left: 20px; }

#sidebar { width: 313px; float: right;	background: url("/page/-/wrappers/images/sidebar-bg.gif") 100% 100% no-repeat; font-size: 12px; }
#sidebar-inner { background: url("/page/-/wrappers/images/sidebar.gif") 0 0 no-repeat; padding: 13px 13px 13px 12px; }
#sidebar h3 { font-size: 16px; text-align: center; font-family: Georgia, "Times New Roman", Times, serif; }
#actions, #dr-zogby, #sidebar-events, #sidebar-arab-voices { background: #FFF url("/page/-/wrappers/images/sidebar-box-bg.gif") 0 100% no-repeat; }
#actions, #sidebar-events, #sidebar-arab-voices { padding-top: 11px; background: #FFF url("/page/-/wrappers/images/actions.gif") 0 0 no-repeat; }
#sidebar-events h3 { padding: 0 10px; }
#sidebar-events ul { padding: 10px 22px; background: #fff; margin: 10px; border: 1px solid #d1d3d4; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 1px 1px 5px #d1d3d4; -webkit-box-shadow: 1px 1px 5px #d1d3d4; box-shadow: 1px 1px 5px #d1d3d4; }
#sidebar-events ul li { padding: 10px 0; border-top: 1px dotted #2B4A75; }
#sidebar-events ul li:first-child { border: none; }
#sidebar-events h4 { font-size: 16px; line-height: 14px; font-weight: normal; }
#buttons li { text-align: center; text-transform: uppercase; margin: 0 10px 3px; padding: 9px 10px 0; height: 27px; font-weight: bold; -webkit-border-radius: 5px; -moz-border-radius: 5px; background: #9f0f0f url("/page/-/wrappers/images/action-btn.gif") 0 0 repeat-x; letter-spacing: .07em; }
#buttons li a { color: #FFF; }
ul#social { background: #FFF url("/page/-/wrappers/images/sidebar-box-bg.gif") 100% 100% no-repeat; font-family: Helvetica, Arial, sans-serif; padding: 20px 10px 20px; margin-bottom: 8px; }
#social li { display: inline; font-size: 11px; }
#social li a { color: #4d4d4f; padding: 15px 10px 10px 42px; border-left: 1px dotted #b2b4b6; }
#social a#fb { background: url("/page/-/wrappers/images/fb.gif") 0 5px no-repeat; border: none; padding-left: 35px; }
#social a#tw { background: url("/page/-/wrappers/images/tw.gif") 5px 5px no-repeat; }
#social a#fl { background: url("/page/-/wrappers/images/ev.gif") 5px 5px no-repeat; padding-right: 0; }
#sidebar #more-events { background: #FFF url("/page/-/wrappers/images/sidebar-box-bg.gif") 100% 100% no-repeat; padding: 0 10px 10px;}

#arabvoices {margin-bottom: 8px; padding-bottom: 10px; background-color:#F7F8FC; -webkit-border-radius: 5px; -moz-border-radius: 5px; } /*** Arab Voices Test ***/
#sidebar #arabvoices h3 { background: #e8e9ed url("/page/-/wrappers/images/dr-zogby.gif") 0 0 no-repeat; font-style: oblique; font-size: 14px; text-transform: none; padding: 18px 0 12px; } 
#sidebar #arabvoices h3 em { display: block; font-style: normal; font-size: 18px; text-transform: uppercase; } 
#arabvoices #side-tabs { background: url("/page/-/wrappers/images/sidebar-box.gif") 0 0 no-repeat; } 
#arabvoices-side-tabs { color: #4d4d4f; font-size: 12px; } 
#arabvoices-side-tabs h4, .zogby-archive-link { margin-bottom: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px dotted #2b4a75; } 
.zogby-archive-link { margin-bottom: 0; } 
#arabvoices-side-tabs h4.first { margin-top: 0; border: none; padding: 0; }
#arabvoices-side-tabs h4 a { font-size: 14px; color: #2b4a75; } 
#arabvoices-tab-nav li { font-weight: bold; font-family: Antenna, Helvetica, Arial, sans-serif; font-size: 12px; text-align: center; }
#side-tabs #tab-reviews { text-transform: none; } 
#side-tabs #tab-reviews a { padding-top: 13px; padding-bottom: 9px; }
#side-tabs #tab-press a { padding-top: 13px; padding-bottom: 9px; } 
#side-tabs #tab-appendix { text-transform: none; }
#side-tabs #tab-appendix a { padding-top: 13px; padding-bottom: 9px; } 


#dr-zogby { margin-bottom: 8px; padding-bottom: 10px; margin-top: 10px; }
#sidebar #dr-zogby h3 { background: #e8e9ed url("/page/-/wrappers/images/dr-zogby.gif") 0 0 no-repeat; font-style: oblique; font-size: 11px; text-transform: lowercase; padding: 18px 0 12px; }
#sidebar #dr-zogby h3 em { display: block; font-style: normal; font-size: 18px; text-transform: uppercase; }
#dr-zogby #side-tabs { background: url("/page/-/wrappers/images/sidebar-box.gif") 0 0 no-repeat; }
#side-tabs { color: #4d4d4f; font-size: 12px; }
#side-tabs h4, .zogby-archive-link { margin-bottom: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px dotted #2b4a75; }
.zogby-archive-link { margin-bottom: 0; }
#side-tabs h4.first { margin-top: 0; border: none; padding: 0; }
#side-tabs h4 a { font-size: 14px; color: #2b4a75; }
#tab-nav li { font-weight: bold; font-family: Antenna, Helvetica, Arial, sans-serif; font-size: 15px; text-align: center; }
#side-tabs #tab-sp a { padding-top: 13px; padding-bottom: 9px; }
#side-tabs #tab-sp, #side-tabs #tab-ww span { font-style: italic; font-family: Georgia, "Times New Roman", Times, serif; font-size: 13px; }
#side-tabs #tab-ww { text-transform: uppercase; letter-spacing: 1px; line-height: 1.1; }
#side-tabs #tab-ww span { font-size: 9px; font-style: normal; display: block; letter-spacing: -0.03em; }
#side-tabs #tab-vp { text-transform: lowercase; }
#side-tabs #tab-vp a { padding-top: 11px; padding-bottom: 7px; }

#twitterfeed { width: 247px; background: #FFF url("http://www.aaiusa.org/page/-/wrappers/images/twitterfeedbg.png") no-repeat; padding: 40px 20px 10px 20px; margin-bottom:8px; border-radius: 5px; }


.promo { background: #FFF; width: 267px; height: 46px; padding: 20px 0 20px 20px; margin-bottom: 10px; font-size: 18px; line-height: 1.2; font-weight: normal; overflow: hidden; border-radius: 5px; }
.promo img { float: right; margin: -20px 0 0 10px; }

/*** arab voices sidebar image ***/
.promo-arabvoices { background: #FFF; width: 268px; height: 26px; padding: 15px 0 20px 20px; margin-bottom: 10px; font-size: 18px; line-height: 1.0; font-weight: normal; overflow: hidden; }
.promo-arabvoices img { float: right; margin: -20px 0 0 10px; }

#footer { clear: both; padding: 12px 0 30px; border-top: 10px solid #e2e3e4; font-size: 11px; margin: 8px auto 0; width: 937px; }
#footer li { display: inline; padding: 0 4px 0 7px; background: url("/page/-/wrappers/images/footer-link.gif") 0 40% no-repeat; }
#footer li.first { background: none; }
#copyright { float: left; }
#links { text-align: right; }
#copyright, #copyright a:link, #copyright a:visited { color: #6f84a2; }

#stateprofilesleft { float:left; width: 250px; padding: 15px; }
#stateprofilesright { float:right; width: 250px; padding: 15px; }
#stateprofiles { padding: 0px 0px 0px 0px; border: 0px solid #335482; margin: 0px; width: 95%; min-width: 580px; margin: 0 auto; height: auto; }

/*** political platforms ***/

       div.rows div.row {
		clear:both;    
		width: 100%;
	}
	
	div.rows div.row-gray {
		clear:both;    
		width: 100%;
		background-color:#ededed;
	}

	div.rows div.column {
		float: left;
	}

	div.rows div.clear-row {
		line-height: 0px; 
		font-size: 0px; 
		clear:both;
	}		

	.w-40-percent {
		width: 200px;
		padding: 10px;
	}
	
	.w-40-percent-gray {
		width: 200px;
		padding: 10px;
		background-color: #ededed;
		height: auto;
	}
	.w-30-percent {
		width: 30%;
	}	
	.w-10-percent {
		width: 100px;
		padding-right: 5px;
		padding-top: 10px;
		padding-left: 5px;
	}

	#platforms-container {
		margin: auto;
		width: 90%;
		border: 2px solid black;
	}

.yv_icons
{
opacity:0.8;
filter:alpha(opacity=60); /* For IE8 and earlier */
padding-right:5px;
}

.yv_icons:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
padding-right:5px;
}



/*** SUPERFISH STYLES ***/
.sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; }
.sf-menu { line-height:	1.0; }
.sf-menu ul { position:	absolute; top: -999em; width: 10em; /* left offset of submenus need to match (see below) */ }
.sf-menu li:hover { visibility:	inherit; /* fixes IE7 'sticky bug' */ }
.sf-menu li { float: left; position: relative; }
.sf-menu a { display: block; position: relative; }
.sf-menu li:hover ul, .sf-menu li.sfHover ul { left: 0; top: 40px; /* match top ul list item height */ z-index: 99; }
ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top: -999em; }
ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left: 10em; /* match ul width */ top: 0; }
ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top: -999em; }
ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { left: 10em; /* match ul width */ top: 0; }
ul.sf-menu li ul { background: padding: 0 20px 10px; width: 160px; }
ul#navigation.sf-menu li li { margin: 0;  font-size: 14px; line-height: 16px; text-transform: uppercase;} 
ul#navigation.sf-menu li li a { color: #fff; text-indent: 0px; text-decoration: none; height: auto; width: 136px;}
ul#navigation.sf-menu li li a:hover { background: url("/page/-/wrappers/images/site-nav-hvr.gif") 0 0 repeat-x;}

.sf-menu a, .sf-menu a:visited  { color: #000; }
.sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { outline: 0; }


ul#navigation.sf-menu li.sfHover li { height: auto; }

/*** shadows for all but IE6 ***/
.sf-shadow ul {
	background:	url('/page/-/images/wrapper/shadow.png') no-repeat bottom right;
	padding: 0 8px 9px 0;
	-moz-border-radius-bottomleft: 17px;
	-moz-border-radius-topright: 17px;
	-webkit-border-top-right-radius: 17px;
	-webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off { background: transparent; }

ul#navigation.sf-menu li ul { display: none; }


.sf-sub-indicator { display: none; }


/* 04 =HOMEPAGE
---------------------------------------------------------- */

#feature { height: 315px; background: url("/page/-/wrappers/images/feature-bg.gif") 0 0 no-repeat; padding: 9px 9px 0; position: relative; overflow: hidden;}
#rotator { font-size: 13.5px; color: #4d4d4f; line-height: 1.3; overflow: hidden; height: 307px; }
#rotator h2 { font-size: 20px; padding: 20px 0 10px; }
#rotator h2 a { color: #9f0f0f; }
.slide { width: 613px; }
.slide img { float: left; margin-right: 20px; }
.slide p { margin-right: 15px; }
#pager { position: absolute; bottom: 25px; right: 54px; z-index: 10; }
#pager a, a.more { background: #bf2434 url("/page/-/wrappers/images/pager.gif") 0 0 repeat-x; color: #FFF; font-size: 14px; font-family: Din, Helvetica, Arial, sans-serif; margin: 0 1px; text-transform: uppercase; padding: 0 6px 3px 7px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-align: center; }
a.more { font-size: 12px; width: 80px; font-weight: bold; left: 340px; top: 273px; position: absolute; letter-spacing: .05em; padding: 1px 11px 3px; }
#pager a:hover, #pager a:active, a:hover.more, a:active.more { text-decoration: none; }
#pager a.activeSlide { background: #88151a url("/page/-/wrappers/images/pager-hvr.gif") 0 0 repeat-x; }

#welcome { background: #4c6d92 url("/page/-/wrappers/images/countdown-bg.gif") 0 100% no-repeat; margin: 0px 0; font-size: 12px; }
#welcome h3 { height: 35px; padding-top: 25px; text-indent: 7px; text-align: center; color: #f7f8fc; background: #5c7da0 url("/page/-/wrappers/images/Countdown_Home.gif") 0 0 no-repeat; font-size: 14px; }
#welcome p { color: #FFF; padding: 8px 25px 15px; }
a.welcomelink { color: #f7f8fc; }
a.welcomelink:hover { color:#9fb6ca; }

#newsblog { background: url("/page/-/wrappers/images/newsblog-bg.gif") 0 100% no-repeat; padding: 0 0 25px; }
#newsblog h3 { height: 36px; padding-top: 23px; text-indent: 3px; text-align: center; color: #2b4a75; background: #ecedf0 url("/page/-/wrappers/images/newsblog.gif") 0 0 no-repeat; font-size: 14px; }
#newsblog h3 a { height: 100%; display: block; }
.entry { color: #4d4d4f; width: 580px; padding: 20px 0 17px; margin: 0 auto; background: url("/page/-/wrappers/images/entry.gif") 50% 0 no-repeat; font-size: 12px; }
.entry2 { color: #4d4d4f; width: 580px; padding: 10px 0 17px; margin: 0 auto; background: url("/page/-/wrappers/images/entry.gif") 50% 0 no-repeat; font-size: 12px; }
.entry.first { background: none; }
.entry2.first { background: none; }
.entry h4 { font-size: 14px; color: #2b4a75; font-weight: bold; }
.date { font-size: 10px; text-transform: uppercase; }
#press .date { margin: 25px 0 0; }
.base p.meta, .meta {	color: #2b4a75;	text-transform: uppercase; font-size: 11px; margin-top: 15px; }
.entry img { float: left; margin: 0 10px 0 0; border: 1px solid #e2e3e4; }


#back-top {
	position: fixed;
	bottom: 30px;
	margin-left: -150px;
}

#back-top a {
	width: 108px;
	display: block;
	text-align: center;
	font: 11px/100% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #636363;

	/* transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover {
	color: #6081a3;
}

/* arrow icon (span tag) */
#back-top span {
	width: 108px;
	height: 108px;
	display: block;
	margin-bottom: 7px;
	background: #ddd url(http://www.aaiusa.org/page/-/wrappers/images/up-arrow.png) no-repeat center center;

	/* rounded corners */
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-o-border-radius: 15px;
	border-radius: 15px;
	border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;

	/* transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover span {
	background-color: #6081a3;
}


/* 05 =SUBPAGES
---------------------------------------------------------- */

p.legis-summary { margin-bottom: 0; }

#SKIN h1 { color: #2B4A75 !important; }

#event_results .event_footer .links { float: left !important; }
#event_results .event_footer .links .detail_button a { margin: 0 !important; }

#bluebox {
	background-color: #e8e9ed; 
	padding-left: 20px; 
	padding-right: 20px; 
	padding-top: 20px; 
	border: 1px solid #335382; 
	margin: 0px;
}


/* 06 =FRAMEWORK
---------------------------------------------------------- */
/*
SKIN OVERRIDES
Last Update: JUNE 11, 2010
NOTE: These definitions assume that framework elements have been wrapped in a div with the id "framework".
For the YUI styles to work the body id should be "bsd"
*/
 
/*=TYPOGRAPHY
---------------------------------------------------------- */
#framework #SKIN h1, /*If you change the font-soze for h1 or it's top margin or padding properties be sure to change the top margin property for "#SKIN #account_actions" such that the base line for the elements within line up with h1 in control_set div*/
#framework #SKIN .basic .main #eventdetail .title, /*Event Title*/
#framework #profiledetail #sectionheader,
#framework #stdheader #title /*Page title on Outreach pages*/
{ font-size: 24px; font-weight: bold; line-height: 30px; margin-bottom: 6px; }
 
#framework h4 { margin-bottom: 10px; }

/*if using cufon or typekit for headers be sure to target the following header ids/classes
#titletext - header for Outeach pages
.headertitle — header for Comunity pages
*/
#framework #contribution .contribheader, /*Section headers on Contribute form*/
#framework #SKIN h2,
#framework #sectionheader,
#framework #SKIN .widget_header,
#framework #SKIN .widget_title,
#framework #community .communitypostinlist .title, /*Blog post title on community web page*/
#framework #community .header, /*Community page headers */
#framework #community .communitypostfull .title, /*Community title for full blog post*/
#framework #community .journaltitle,
#framework #community .journalarchive .journalarchivetitle,
#framework a#host-button,
#framework #loginform .logintitle,
#framework #signupform .signuptitle,
#framework #outreach_content #loginform .logintitle,
#framework #outreach_content #signupform .signuptitle,
#framework #manageform .managetitle,
#framework #forgotpw .header
{ font-size: 18px; font-weight: bold; line-height: 24px; margin-bottom: 6px; }
 
#framework #SKIN h3,
#framework #SKIN .basic .main .typedescheader,
#framework #community .postlist table.head .text, /*Table heading on Community Dashboard page*/
#framework #community .subheader, /*Subheader on the Community Blog Entry Preview page*/
#framework #community .profileteaser .title, /* Profile teaser title on Blog home page*/
#framework #odgettingstarted .odsechead,
#framework #odprogress .odsechead,
#framework #odyourpage .odsechead,
#framework #odstats .odsechead,
#framework #odaddress .odsechead,
#framework #odgroup .odsechead,
#framework #outreach_content .omhead
{ font-size: 14px; font-weight: bold; line-height: 20px; margin-bottom: 6px; }
 
#framework #SKIN h4, #framework #SKIN h5 { font-size: 12px; font-weight: bold; line-height: 18px; }
 
/*HEADERS WITH BOTTOM BORDERS*/
#framework #contribution .contribheader, /*Section headers on Contribute form*/
#framework #sectionheader,
#framework .sectionheader,
#framework #SKIN .header,
#framework #SKIN .basic .main .typedescheader,
#framework #community .header /*Community page headers */
#framework #community .communitypostfull .title, /*Community title for full blog post*/
#framework #community .journaltitle,
#framework #community .journalarchive .journalarchivetitle,
#framework #stdheader, /*Header for Outreach pages*/
#framework #community .profileteaser .title, /* Profile teaser title on Blog home page*/
#framework #odgettingstarted .odsechead,
#framework #odprogress .odsechead,
#framework #odyourpage .odsechead,
#framework #odstats .odsechead,
#framework #odaddress .odsechead,
#framework #odgroup .odsechead,
#framework #outreach_content .omhead,
#framework #manageform .managetitle,
#framework #forgotpw .header
{ border-bottom: 1px solid #ddd; padding-bottom: 3px; }
 
/*WIDGET HEADERS*/
#framework #SKIN .widget_header { background: #eee; border-bottom: 1px solid #ddd; margin-bottom: 6px; padding: 5px 10px; position: relative; }
 
/*SUB-HEADERS*/
#framework #SKIN .widget_subheader, /*Widget Subheader on the dashboard*/
#framework #community .subheader /*Subheader on the Community Blog Entry Preview page*/
{ background: #F2F7F7; border-bottom: 1px solid #ddd; padding: 5px 10px; }
 
 
 
/*=BUTTONS
---------------------------------------------------------- */
/*INPUT BUTTONS*/
#framework input[type=button],
#framework input[type=submit],
#framework .submit,
#framework #invitationpage #submit_button,
#framework #date-filter,
#framework .loginbutton input,
#framework .signupbutton input,
#framework #community input[type=submit],
#framework .utils_search button
{  } /*Targets most Buttons*/
 
/*INPUT HOVER STATES
Note this will only work for modern browsers*/
#framework input[type=button]:hover,
#framework input[type=submit]:hover,
#framework input:hover.submit,
#framework #invitationpage input:hover#submit_button,
#framework button:hover#date-filter,
#framework .loginbutton input:hover,
#framework .signupbutton input:hover,
#framework #community input[type=submit]:hover,
#framework .utils_search button:hover
{  }
 
/*RSVP and DETAILS BUTTONS*/
#framework #event_results .event_footer .links { float: left; }
#framework #event_results .event_footer .links .detail_button, #framework #event_results .event_footer .links .rsvp_button { float: right; }
#framework #event_results .event_footer .links .detail_button a, #framework #event_results .event_footer .links .rsvp_button a { display: block; margin-left: 10px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; padding: 2px 10px; }
#framework #event_results .event_footer .links .detail_button a { background: #eee; border: 1px solid #ccc; padding: 2px 10px 1px; }
#framework #event_results .event_footer .links .rsvp_button a { background: #555; color: #fff; padding: 3px 10px 2px; }
#framework #event_results .event_footer .links .detail_button a:hover, #framework #event_results .event_footer .links .rsvp_button a:hover { background: #333; border-color: #333; color: #eee; } /*Hover state for RSVP and Details buttons*/
 
/*CONTACT IMPORTER BUTTOM FOR SHARE AND INVITE FORMS*/
#framework #contact_importer_button { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; font-size: 12px; } /*You can change the background color to match your other input button styles*/
 
/*SEARCH BUTTON*/
#framework .search_form button { }
 
/*=TEXT INPUT FIELDS AND TEXTAREAS
---------------------------------------------------------- */
#framework input.text, #framework textarea { padding: 3px; } /*Use this definition to target most of the text input fields*/
 
/*=TABS
NOTE If the background color for your page is not white you will have to update the bottom border color for the active tabs for Framework, Events and Friends i.e.
#framework #SKIN #blue_hat .blue_hat_active { background: none; border-bottom: 1px solid #f7f8fc; font-weight: bold; }
#framework ul#event_order li.active { background: none; border-bottom: 1px solid #f7f8fc; font-weight: bold; }
#framework #SKIN #friends_tabs ul li.active_tab  { background: none; border: 1px solid #ddd; border-bottom: 1px solid #f7f8fc; }
---------------------------------------------------------- */
/*FRAMEWORK TABS*/
#framework #SKIN #blue_hat { background: none;  border-bottom: 1px solid #ddd; height: 43px; }
#framework #SKIN #blue_hat ul { display: inline; float: right; height: auto; margin: 0 5px; padding: 18px 0 0 0; }
#framework #SKIN #blue_hat li { background: #eee; border: 1px solid #ddd; border-top-left-radius: 3px; display: inline; float: right; padding: 5px 10px 4px; text-decoration: none; }
#framework #SKIN #blue_hat li a { color: #888; text-decoration: none; }
#framework #SKIN #blue_hat .blue_hat_active { background: none; border-bottom: 1px solid #f7f8fc; font-weight: bold; }
#framework #SKIN #blue_hat .blue_hat_active a { color: #555; }
#framework #SKIN #blue_hat li a:hover { background: none; color: #555; }
 
/*EVENT TABS*/
#framework ul#event_order { border-bottom: 1px solid #ddd; clear: both; float: left; list-style-type: none; margin: 0 0 10px 0; top: 0;  width: 100%; }
#framework ul#event_order li {  background: #eee; border: 1px solid #ddd; color: #888; display: inline; float: left; margin: 0 0 -1px 5px; padding: 5px 10px 4px; text-decoration: none; }
#framework ul#event_order li a { color: #888;  }
#framework ul#event_order a:hover { color: #555; }
#framework ul#event_order li.active { background: none; border-bottom: 1px solid #f7f8fc; font-weight: bold; }
#framework ul#event_order li.active a { color: #555; }
 
/*WIDGET TABS*/
/*Note that the active tab background color should be the same as the .widget_header background color under the WIDGET HEADERS category above*/
#framework #SKIN .widget_tabs { margin: 0; padding: 0;  }
#framework #SKIN .widget_tabs li { border-top-left-radius: 3px; float: left; list-style: none; padding: 5px 10px 4px 10px; margin: 0 5px 0 0; list-style-type: none; }
#framework #SKIN .widget_tabs li.active_tab { background: #eee; font-weight: bold; }
#framework #SKIN .widget_tabs li.inactive_tab { background: #ddd; }
 
/*FRIENDS TABS*/
#framework #SKIN #friends_tabs { border-bottom: 1px solid #ddd; margin: 18px 0 6px 0; }
#framework #SKIN #friends_tabs ul { margin: 0; padding: 5px 0 0 0; list-style: none; }
#framework #SKIN #friends_tabs li { border-top-left-radius: 3px; border-top-right-radius: 3px; display: inline; float: left;  margin: 0 0 -1px 5px; list-style-type: none; padding: 5px 10px 4px; }
#framework #SKIN #friends_tabs ul li.active_tab  { background: none; border: 1px solid #ddd; border-bottom: 1px solid #f7f8fc; }
#framework #SKIN #friends_tabs ul li.active_tab a { color: #555; font-weight: bold; }
#framework #SKIN #friends_tabs ul li.inactive_tab  {  background: #eee; border: 1px solid #ddd;  }

/*=SPEAKOUT TABS*/
#framework #speakout #tabs { margin-top: 18px; }
#framework #speakout #nav-tabs { border-bottom: 1px solid #ddd; clear: both; float: left; list-style-type: none; margin: 0 0 18px 0; top: 0;  width: 100%; }
#framework #speakout #nav-tabs li { background: #eee; border: 1px solid #ddd; color: #888; display: inline; float: left; margin: 0 0 -1px 5px; padding: 5px 10px 4px; text-decoration: none; }
#framework #speakout #nav-tabs li.tab-on { background: none; border-bottom: 1px solid #f7f8fc; color: #555; font-weight: bold; }

#framework .group_field { margin-bottom: 10px; }
#framework #speakout .splash { margin: 0 0 20px 0; }
#framework #speakout table { clear: left; margin: 0 20px 10px 0; }
#framework #speakout .recipient-header { font-weight: bold; }
#framework #speakout .recipient-divider { padding-top: 10px; font-style: italic; }
#framework #speakout .stat { text-align: right; }
#framework #speakout td { vertical-align: top; }
#framework #speakout .field { width: 50%; padding-left: 10px; }

/*SPEAKOUT OVERWRITE*/

#framework .left { float: left; width: 400px; border-right: 0px solid #ccc; padding-right: 20px; }
#framework .right { float: left; padding-left: 10px; width: 400px; }
#framework .bsd-page-header { border: 2px solid #335482; background-color:#e8e9ed; padding: 20px 20px 5px 20px; margin-bottom: 10px; }



 
/*YUI POP OVER
This controls the style of the pop over opened after clicking the contact importer button
As noted above, in order for this to work the body id should be "bsd"
---------------------------------------------------------- */
#bsd .yui-panel { border: 1px solid #ccc; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
#bsd .yui-panel-container.shadow .underlay { display: none; }
#bsd .yui-panel .container-close { right: 10px; } /*This targets the close button in the popover. You can replace the default image with one of your choosing. Image dimensions should be 12px square*/
#bsd .yui-panel .hd { background: #eee; color: #333; border: none; border-bottom: 1px solid #ddd; font-size: 18px; font-weight: bold; line-height: 24px; margin-bottom: 6px; padding: 10px; }
#bsd .yui-panel .bd { font-size: 12px; line-height: 18px; padding: 6px; }
#bsd #contact_importer_wrapper { margin: 0; }
#bsd #contact_importer_wrapper #contact_importer_error { margin: 18px 0 0 0; }
#bsd #contact_importer_dialog .button-group button { background: #eee; border: 1px solid #ddd; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; cursor: pointer; padding: 3px 10px; }
/*Contact Listings*/
#bsd #contact_importer_wrapper #results_table_header { background: #eee; }
#bsd #contact_importer_wrapper #results_table_outer { border: 1px solid #ddd; }
 
 
 
/*=LAYOUT
---------------------------------------------------------- */
/*SOCIAL NET WIDGET COLUMNS*/
#framework #SKIN #widget_group_1 { float: left; width: 49%; } /*Left column*/
#framework #SKIN #widget_group_2 { float: right; width: 49%; } /*Right column*/
 
 
/*=PLEASE DO NOT DELETE OR MODIFY ANY OF THE STYLES BELOW
---------------------------------------------------------- */
#framework #SKIN #widget_directory_search_groups_by_keyword { float: none !important; }



/* JQUERY UI-TABS */

#framework { font-size: 12px; }

#sidebar .ui-widget {  }
#sidebar .ui-widget input, #sidebar .ui-widget select, #sidebar .ui-widget textarea, #sidebar .ui-widget button { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1em; }
#sidebar .ui-widget-content { background: #FFF; }
#sidebar .ui-widget-content a { color: #333333; }
#sidebar .ui-widget-header { border: 1px solid #e78f08; color: #ffffff; font-weight: bold; }
#sidebar .ui-widget-header a { color: #ffffff; }

/* Layout helpers
----------------------------------*/
#sidebar .ui-helper-hidden { display: none; }
#sidebar .ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
#sidebar .ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
#sidebar .ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#sidebar .ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
#sidebar .ui-helper-clearfix { display:block; }
/* end clearfix */
#sidebar .ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }

/* Interaction states
----------------------------------*/
#sidebar .ui-state-default, #sidebar .ui-widget-content .ui-state-default { font-weight: bold; color: #1c94c4; outline: none; }
#sidebar .ui-state-default a, #sidebar .ui-state-default a:link, #sidebar .ui-state-default a:visited { color: #b1b3b6; text-decoration: none; outline: none; }
#sidebar .ui-state-hover, #sidebar .ui-widget-content .ui-state-hover, #sidebar .ui-state-focus, #sidebar .ui-widget-content .ui-state-focus { font-weight: bold; color: #c77405; outline: none; }
#sidebar .ui-state-hover a, #sidebar .ui-state-hover a:hover { color: #636466; text-decoration: none; outline: none; }
#sidebar .ui-state-active, #sidebar .ui-widget-content .ui-state-active { border: 1px solid #d1d3d4; background: #f7f8fc; font-weight: bold; color: #636466; outline: none; }
#sidebar .ui-state-active a, #sidebar .ui-state-active a:link, #sidebar .ui-state-active a:visited { color: #636466; outline: none; text-decoration: none; }


/* Corner radius */
#sidebar .ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; }
#sidebar .ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; }
#sidebar .ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; }
#sidebar .ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; }
#sidebar .ui-corner-top { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; }
#sidebar .ui-corner-bottom { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; }
#sidebar .ui-corner-right {  -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; }
#sidebar .ui-corner-left { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; }
#sidebar .ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; }


/* tabs */
#sidebar .ui-tabs { padding: 20px 9px 0; zoom: 1; }
#sidebar .ui-tabs .ui-tabs-nav { list-style: none; position: relative; padding: 2px 5px 0; }
#sidebar .ui-tabs .ui-tabs-nav li { position: relative; float: left; border-bottom-width: 0 !important; margin: 0 0 -1px 0; padding: 0; }
#sidebar .ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none; padding: 8px 7px 3px; }
#sidebar .ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 1px; border-bottom-width: 0; -moz-box-shadow: 0 -1px 1px #d1d3d4; -webkit-box-shadow: 0 -1px 2px #d1d3d4; }
#sidebar .ui-tabs .ui-tabs-nav li.ui-tabs-selected a, #sidebar .ui-tabs .ui-tabs-nav li.ui-state-disabled a, #sidebar .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
#sidebar .ui-tabs .ui-tabs-nav li a, #sidebar .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
#sidebar .ui-tabs .ui-tabs-panel { padding: 18px 22px; display: block; border: 1px solid #d1d3d4; background: #f7f8fc; -moz-border-radius: 6px; -webkit-border-radius: 6px; -moz-box-shadow: 1px 1px 5px #d1d3d4; -webkit-box-shadow: 1px 1px 5px #d1d3d4; }
#sidebar .ui-tabs .ui-tabs-hide { display: none !important; }




/* 07 =UTILITY
---------------------------------------------------------- */

#dsq-content .dsq-item-cp { display: none; } /* hides Disqus community page link */

.clickable { cursor: pointer; }
.stretcher { clear: both; height: 1px; visibility: hidden; }
.nomargin { margin-bottom: 0px; }
.floatl {float: left; margin: 0; padding: 0 10px 10px 0;}
.floatr {float: right; margin: 0; padding: 0 0 10px 10px;}
.floatl-nomargin { float: left; margin: 0; padding: 0;}
.floatr-nomargin { float: right; margin: 0; padding: 0;}
.clear {clear:both; height:0; margin:0; font-size: 1px; line-height: 0;}
.required { color: red; }

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

sup, sub { height: 0; line-height: 1; vertical-align: baseline; _vertical-align: bottom; position: relative;}
sup { bottom: 1ex; }
sub { top: .5ex; }

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

.cufon-loading a {
   visibility: hidden !important;
} 

#twitter {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width:430px;
border:1px solid #c9c9c9;
}
#twitter_t {
width:405px;
height: 44px;
background:#c68aeb url(yourimagehere);
color:#fff;
text-shadow:.5px .5px #333;
font-size:18px;
font-family:Candara;
padding-top:20px;
padding-left:25px;
}
#twitter_m {
width: 400px;
padding: 0 15px;
background:#f7effc;
}
#twitter_container {
min-height:45px;
height:auto !important;
height:40px;
padding-bottom:5px;
padding-top:5px;
}
#twitter_update_list {
width: 413px;
padding: 0;
overflow: hidden;
font-family: Georgia;
font-size: 14px;
font-style: italic;
color: #31353d;
line-height: 16px;
font-weight:bold;
margin-left:-13px;
}
#twitter_update_list li {
width: 400px;
list-style: none;
padding:15px;
border-bottom: dotted 1px #ccc;
}
#twitter_update_list li a {
color:#631891;
text-decoration: none;
}
#twitter_update_list li a:hover {
color: #31353d;
}
#twitter_b {
width: 430px;
height: 29px;
background:#c68aeb url(yourimagehere);
}

<!-- css3 test area -->

.css3button h2 { color: #f7f8fc; font-size: 120px; line-height: 190px; font-family: Helvetica, sans-serif; font-weight: bold; text-align: center; text-shadow: rgba(0, 0, 0, .3) 5px 5px 5px; } 

#css3button { 
/*gradient*/ background: #666666; 
/* old browsers */ background: -moz-linear-gradient(top, #666666 4%, #545454 50%, #3A3A3A 51%, #131313 100%); 
/* firefox */ background: -webkit-gradient(linear, left top, left bottom, color-stop(4%,#666666), color-stop(50%,#545454), color-stop(51%,#3A3A3A), color-stop(100%,#131313)); 
/* webkit */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#131313',GradientType=0 ); 
/* ie */ /*box styles*/ height: 200px; width: 400px; margin: 100px auto; 
/*shadow*/ -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, .3); -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, .3); box-shadow: 5px 5px 5px rgba(0, 0, 0, .3); 
/*corners*/ -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px;