/*	CSS-Framework

	Version		: 0.21
	File name	: cssf-base.css
	Description	: Styles for webdevelopers
	Author		: DIP Studio Inc
	
------------------------------ */

/* Utilites
------------------------------ */

* { margin: 0; padding: 0; }

*:focus { outline: none; }
.hidden { display: none; }
.show { display: block!important; }
.no-margin { margin: 0!important; }
.no-padding { padding: 0!important; }
.no-bg { background: none!important; }
.no-border, img { border: none!important; }

.cc {clear: both;}

.container { overflow: hidden; }
.img-repl { text-indent: -9999px; overflow: hidden; display: block; }

/* Main custom rules
------------------------------ */

html { background: #4d636f url(../images/body.jpg) repeat-x 0 0; font: .75em/1.5 Verdana, Arial, Helvetica, sans-serif; }
body { padding: 0; }

a { color: #0066cc; text-decoration: none; }
a:visited {  }
a:hover,
a:active { color: #000; border-bottom: 1px dotted #000; }

/* Template
------------------------------ */

#site { width: 900px; margin: 0 auto; padding: 0 20px; background: #32434b url(../images/site.jpg) repeat-y 0 0; }


#header { background: transparent url(../images/header.jpg) no-repeat 0 0; height: 148px; padding: 0; margin: 0; position:relative;}
#header img { float: left; }
#header a.home_link{ clear:left; display:block; border: none;}
#header a.home_link:hover{border: none !important;}
	
	#block-menu-primary-links {height:35px;}
	#block-menu-primary-links div{}
	#block-menu-primary-links div.block-inner{}
	#block-menu-primary-links div.content{}
	#block-menu-primary-links h2{display:none;}
	
	#block-menu-primary-links ul.menu,
	#main-nav { list-style:none; border: none; padding: 15px 30px 0px; z-index: 10; }
	#block-menu-primary-links ul.menu li,
	#main-nav li {border: none; padding: 0; margin: 0 5px 0 0; z-index: 100;}
	#block-menu-primary-links ul.menu li a,
	#main-nav li a {padding: 4px 18px 6px 16px; margin: 0; line-height: 1; overflow: hidden; height: 21px; color: #2c3940; font-weight: bold; text-transform: uppercase;}
	#block-menu-primary-links ul.menu li a:hover, #block-menu-primary-links ul.menu li a:active,
	#main-nav li a:hover, #main-nav li a:active {border: none;}
	#block-menu-primary-links ul.menu li:hover,
	#main-nav li:hover {background: #fff url(../images/topnav-r.gif) no-repeat 100% 0;}
	#block-menu-primary-links ul.menu li:hover a,
	#main-nav li:hover a {background: transparent url(../images/topnav-l.gif) no-repeat 0 0;}
	#block-menu-primary-links ul.menu li:hover li, #block-menu-primary-links ul.menu li:hover li a,
	#main-nav li:hover li, #main-nav li:hover li a {background: none;}
	#block-menu-primary-links ul ul {}
	#block-menu-primary-links ul ul li {}
	#block-menu-primary-links ul ul li a {text-transform: none !important;}
	
	#header .blurb {position: absolute; top: 70px; right: 28px; width: 350px; color: #fff; z-index: 1; font-weight: bold; font-family: Tahoma;}
	#header .blurb a {color: #2c3940;}
	
	.join-button {position:absolute; top: 12px; right: 28px;}
	.button:hover {border: none;}


#main {background: #fff url(../images/grad-v.jpg) repeat-x 0 0; overflow: hidden; clear:both;}
#dot { background: url(../images/dot.gif) no-repeat 591px 0; margin-bottom: 1px; }

/*#col-right { float: left; width: 286px; padding: 20px 0 10px 0;  }*/
#col-right { float: right; display:inline; width: 286px; padding: 20px 0 10px 0;  margin-right:23px;}
#content { width: 536px; padding: 20px 25px 10px 30px; float: left;  }

	#content p a strong, #content p a {color: #333; text-decoration: none;}
	#content hr {height: 1px; overflow: hidden; display: block; background-color: #ccc; border: none;}
	
	.content .w-45 {margin-right: 30px;}
	.content .col-last {margin-right: -10px;}

	.head-with-date {overflow: hidden;}
	.head-with-date h1, .head-with-date p {float: left; }
	.head-with-date p {color: #a2acb2; padding-left: 2em; font-size: .8em; font-weight: bold; padding-top: .8em; ; }
	
	.red-heading h2, .red-heading h2 a, .red-heading h2 a:hover {color: #8a0026; font-weight: bold !important;}
	.gold-heading h2, .gold-heading h2 a, .gold-heading h2 a:hover {color: #998b00; font-weight: bold !important;}
	.grey-heading h2, .grey-heading h2 a, .grey-heading h2 a:hover {color: #2c3940; font-weight: bold !important;}
	.right-arrow {overflow: hidden; clear: left;}
	.right-arrow h2 {float: left; background: transparent url(../images/right-arrow.gif) no-repeat 100% 75%; padding-right: 16px;  line-height: 1;}
	

	
	.calculator h2 {padding-left: 25px; line-height: 1.1em; }
	.calculator { margin-bottom: 24px; }

	.box {border: 1px solid #ccc; border-width: 1px 0 0 1px; padding: 1px;}
	.grad {background: transparent url(../images/grad-v.jpg) repeat-x 0 0; padding: 24px 20px 20px 24px;}
	
	.optnl-box { background: url(../images/optnl-box-t.gif) no-repeat; border-bottom: 15px solid #fff; }
	.optnl-box-content { background: url(../images/optnl-box-b.jpg) no-repeat left bottom; padding: 20px 23px; }
	.optnl-box ul { list-style: none; margin-left: 0!important; }
	.optnl-box ul li { padding-left: 17px; background: url(../images/right-arrow.gif) no-repeat 0 4px; color: #666; margin-bottom: 7px !important; display: block;}
	.optnl-box ul li a { color: #666;}
	.optnl-box ul li a:hover { color: #000; }
	
	#content .optnl-box { background: url(../images/optnl-box-2-t.gif) no-repeat; border-bottom: 15px solid #fff; width: 241px; }
	#content .optnl-box-content { background: url(../images/optnl-box-2-b.gif) no-repeat left bottom; padding: 17px; }
	#content .optnl-box h2 { font-weight: bold; }
	#content .optnl-box p { margin-bottom: 0; font-size: 11px; }
	
	#content .optnl-box-2 { margin-bottom: 15px; width: 241px; }
	#content .optnl-box-2 .optnl-box-content { background: none; padding: 17px 0 0 0; }
	#content .optnl-box-2 h2 { font-weight: bold; font-size: 16px; }
	#content .optnl-box-2 p { margin-bottom: 0; font-size: 11px; }

	.calculator {background: transparent url(../images/calculator.gif) no-repeat 0 0;}

	.content ul li, .content ol li { margin-bottom: 0;}
	#col-right .box ul.bordered {border-top: 1px solid #ccc;  padding: 0;}
	ul.bordered {list-style: none;}
	ul.bordered li {border-bottom: 1px solid #ccc; color: #4d636f; font-size: 100%; overflow: hidden; font-family: Arial;}
	
	#main ul.bordered li, 	#main ul.bordered li p  {margin-bottom: 0 !important;}
	
	ul.bordered li p {float: left; width: 180px; clear: left; font-weight: bold;}
	ul.bordered li span {float: right; width: 50px; font-size: 80%; color: #b8c2c8; padding: 14px 0 0;}
	ul.bordered li p a {color: #4d636f; padding: 11px 0; text-decoration: none; display:block;}
	ul.bordered li p a:hover {border: none; color: #000;}
	
	ul.with-arrow li {background: transparent url(../images/right-arrow.gif) no-repeat 4px 12px;}
	ul.with-arrow li p a {padding-left: 20px; }
	
	#content ul.bordered {margin-left: 1em;}
	#content ul.bordered li p {float:none; width: auto;clear: left; font-weight: bold;}
	#content ul.bordered li p a {color: #4d636f !important;}
	#content ul.bordered li p a:hover {color: #000 !important;}
	
	.box h3 {padding-top: 0;}
	
	#content p {color: #333;}
	#content p.newsdate {color: #a2acb2;}

#footer { clear: both; height: 60px; background: transparent url(../images/footer.jpg) repeat-x 0 0; font-size: 80%; padding: 0;}

	#footer p {float: left; color: #b8c2c8; margin: 30px 0 0 30px; line-height: 1;}
	#footer ul {float: right; margin: 30px 22px 0 0; border: none;}
	#footer ul li {border: 1px solid #b8c2c8; border-width: 0 0 0 1px; padding: 0; line-height: 1;}
	#footer ul li:first-child {border-left: none;}
	#footer ul a {color: #b8c2c8; margin: 0; padding: 0 8px;}
	#footer ul a:hover {color: #fff;}

/* Horizontal Menu
------------------------------ */

.menu-h { overflow: hidden; border-left: 1px solid #ccc; }
.menu-h li { float: left; list-style: none; padding: 0 .8em; border-right: 1px solid #ccc; }

/* Horizontal Drop Down Menu
------------------------------ */

#block-menu-primary-links .menu { /*min-height: 24px;*/ border-left: 1px solid #ccc; }
#block-menu-primary-links .menu li { float: left; display: block; position: relative; border: 1px solid #ccc; border-width: 1px 1px 1px 0px; list-style: none; }
#block-menu-primary-links .menu a { text-decoration: none; padding: 2px 10px; display: block; }

#block-menu-primary-links .menu ul.menu { display: none; position: absolute; top: 27px; left: 0px; width: 195px; border: 0; background: url(../images/drop-down-bg.png) repeat-y;}
#block-menu-primary-links .menu ul.menu img { display: block; }
#block-menu-primary-links .menu ul.menu .drop-down-bg { background: url(../images/drop-down-bg.png) repeat-y; padding: 0 23px 0 21px; width: 151px; }
#block-menu-primary-links .menu ul.menu { margin-top: -4px; }
#block-menu-primary-links .menu ul.menu li { overflow: hidden; height: auto!important; margin: 0 6px 0 0 !important; padding-left:6px; }
#block-menu-primary-links .menu ul.menu a, #block-menu-primary-links .menu ul.menu a:hover { line-height: 1; font-weight: normal!important; height: auto!important; border-bottom: 1px solid #cdd4d8 !important; float: left; width: 100%; padding: 10px 0!important; font-size: 11px; }
#block-menu-primary-links .menu ul.menu a:hover {color: #000 !important;}
#block-menu-primary-links .menu ul.menu li.last a { border: none; }
#block-menu-primary-links .menu ul ul { left: 100%; top: -1px; }

#block-menu-primary-links .menu li li { float: none; border-width: 1px 1px 0px 1px; }

#block-menu-primary-links .menu li:hover { background: #ccc; }
#block-menu-primary-links .menu a:hover { color: #fff; }

/*#block-menu-primary-links .menu li:hover .drop-down .drop-down,
#block-menu-primary-links .menu li:hover ul li:hover .drop-down .drop-down { display: none; }*/

#block-menu-primary-links .menu li:hover ul.menu,
#block-menu-primary-links .menu li:hover ul.menu li:hover ul.menu,
#block-menu-primary-links .menu li:hover ul.menu li:hover ul.menu li:hover ul.menu { display: block; list-style:none; padding:0; margin: 0; }

.menu-v-d ul ul { left: 100%; }

/* Content elements
------------------------------ */

h1, h2, h3, h4 { font: 1.7em Verdana, Arial, Helvetica, sans-serif; margin-bottom: .5em; }
h1 {font-weight: bold; font-family: Arial;}
h2 { font-size: 1.1em; }
h3 { font-size: 1em; color: #999; padding: 1.5em 0 1em;}
h4 { font-size: 1.1em; font-weight: bold; }



blockquote { margin-left: 10em; padding-left: 1em; border-left: 2px solid #ccc; }
pre, code { font: 1.2em/1.8 "Courier New", Courier, monospace; border: 1px dashed #aaa; padding: 1em; background: #eee; }
code { padding: .2em .5em; }

#content .content ul, #content .content ol { margin-left: 3em; line-height: 1.3em; }
.content ul li, .content ol li { margin-bottom: .2em; }

.icons a, .icon { padding-left: 20px; background-repeat: no-repeat; background-position: left center; }

.content p, .content ul, .content ol, .content table, blockquote, pre, .columns, .content img { margin-bottom: 1em; }

/* Text align & Float
------------------------------ */

.a-left { text-align: left; }
.a-center { text-align: center; }
.a-right { text-align: right; }

.f-left { float: left; }
.f-right { float: right; }

/*	Tables
------------------------------ */

table { border-collapse: collapse; width: 100%; }
table th, table td { border: 1px solid #ccc; padding: 2px 3px; vertical-align: top; }
table th { background: #f4f4f4; }
table td {  }

/*	Columns
------------------------------ */

.columns { width: 100%; overflow: hidden; }
.w-5, .w-10, .w-15, .w-20, .w-25, .w-30, .w-35, .w-40, .w-45, .w-50, .w-55, .w-60, .w-65, .w-70, .w-75, .w-80, .w-85, .w-90, .w-95, .w-100, .w-33, .w-66, .w-38, .w-62 { float: left; overflow: hidden; }

.col-content { padding: 0 6px; }
.col-first { padding-left: 0!important; }
.col-last { padding-right: 0!important; }

.w-5 { width: 5%; }
.w-10 { width: 10%; }
.w-15 { width: 15%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-30 { width: 30%; }
.w-35 { width: 35%; }
.w-40 { width: 40%; }
.w-45 { width: 45%; }
.w-50 { width: 50%; }
.w-55 { width: 55%; }
.w-60 { width: 60%; }
.w-65 { width: 65%; }
.w-70 { width: 70%; }
.w-75 { width: 75%; }
.w-80 { width: 80%; }
.w-85 { width: 85%; }
.w-90 { width: 90%; }
.w-95 { width: 95%; }
.w-100 { width: 100%; }

.w-33 { width: 33%; }
.w-66 { width: 66%; }

.w-38 { width: 38%; }
.w-62 { width: 62%; }

/* Images
------------------------------ */

.content img.null-image { padding: 0!important; border: none!important; margin: 0!important; }
img.f-left { margin-right: 1em; }
img.f-right { margin-left: 1em; }

/* Content Form
------------------------------ */

.content form { padding: .5em 0; }
.content fieldset { margin-bottom: 1em; border: none; }
.content legend { margin-top: -1px; padding-bottom: 1em; font-size: 1.1em; font-weight: bold; }

.content .f-row { overflow: hidden; margin-bottom: .5em; }
/*.content label { float: left; text-align: right; width: 25.99%; padding: 0 2%; }*/
.content .f-inputs { padding-left: 30%; }

.f-actions { padding-top: 1em; border-top: 1px solid #ccc; }

/* Inputs
------------------------------ */

input { vertical-align: middle }
.i-checkbox { margin-top: 3px; }
.i-text { width: 200px; padding: 0 1px; font: 1em sans-serif; }
.button { padding: 0 .25em; width: auto; overflow: visible; cursor: pointer; }


/* civi fixes */
div#crm-container form {overflow: visible; }
div#crm-container form div.form-item {overflow: visible !important; }
form#EventInfo {overflow: visible; }
form#EventInfo div.form-item{overflow: visible; }

#my_profile{
right:103px;
}
#my_user{
right:15px;
}
/* Logout link styles */
#header div.logout{position:absolute; right:20px; top: 47px;}
#header div.logout a{color:#fff; font-weight:bold;}
#header div.logout a:hover{border-bottom:1px dotted #fff;}


#content .civi_img{ max-width:75px; max-height: 75px;}
#content span.adr {display:block; text-align:right;}

/* Hide account creation link from sidebar */
#col-right #user-login-form ul.item-list li.first {display:none;}