/* 
Theme Name: Somos Amigos Theme

Description: A personalized theme for Somos Amigos

Author: Lara Lind

Author URI: http://www.larajlind.com

Version: 1.0
*/

/* ------------------------------------------------------------------- OPENS NORMALIZER ------------------------------------------------------------------- */

/* Normalize padding and margins */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {
				margin: 0;
				padding: 0;
}

/* Normalize header sizes */
h1, h2, h3, h4, h5, h6 {
				font-size: 100%;
}

/* Normalize list styles */
ol, ul {
				list-style: none;
}

/* Normalize font style and weight on odd elements */
address, caption, cite, code, dfn, em, strong, th, var {
				font-style: normal;
				font-weight: normal;
}

/* Normalize table borders */
table {
				border-collapse: collapse;
				border-spacing: 0;
}

/* Normalize other borders */
fieldset, img {
				border: 0;
}

/* Normalize text-alignment */
caption, th {
				text-align: left;
}

/* Normalize (remove) quotation marks */
q:before, q:after {
				content: '';
}

/* ------------------------------------------------------------------- CLOSES NORMALIZER ------------------------------------------------------------------- */

/* 
blue: #009ddc;
lighter version of blue: 85BCE6 
lightest version of blue: ADCFED
*/

html, body {margin:0; padding:0; width:100%; height:100%; scrollbar-base-color: #009966;overflow:hidden;}
body {font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;}

p {font-size: 13px; color: #CCC; line-height: 150%;}
a {text-decoration: underline; color: #009ddc; font-weight: normal;}
h1 {}
h2 {font-size: 20px; font-weight: normal; color: #fff;}
h3 {font-weight: normal; color: #009ddc;}
h4 {font-size: 14px; font-weight: normal; color: #fff;}
h5 {font-size: 14px; font-weight: normal; color: #009ddc;}
.trademark {font-size: 9px; vertical-align: top;}
ul {font-size: 13px; color: #CCC; list-style-type: none;}

#header {width: 100%; background: url(../images/black-bg.jpg) repeat-x scroll 0 100% #000; overflow: hidden; height: 60px; z-index: 10;}
#nav {/*background: url(../images/logo-2.jpg) no-repeat scroll 0 0 #000;*/ width: 960px; height: 50px; margin: 0 auto; z-index: 50;}
#donate-button {width: 137px; height: 49px; float: right; margin-top: 5px;}

#navlist {float: left; margin: 33px 0 0 5px; z-index: 80; width: 545px; z-index: 80;}
#navlist li {font-size: 14px; float: left;}
#navlist a {display: block; padding-left: 17px; text-decoration: none; color: #CCC;}
#navlist li a:hover {color: #009ddc;}
#navlist li ul {visibility: hidden; position: absolute; color: #CCC; margin: 15px 0 0 0; background-color: #000; padding: 10px; font-size: 13px; z-index: 75;/*width: 100%;*/ border: 1px solid #ccc;}
#navlist li ul li {display: block; /*padding: 0 0 25px 0;*/ float: none;}
#navlist li ul li a {width: auto; padding: 4px 10px; display: inline;}
#navlist li.current_page_item a, #navigation li.current_page_parent a, #navlist li.current_page_ancestor a {color: #009ddc;}
#navlist li a:hover, #navlist li a:active, #navlist li:hover a, #navlist li:active a {color:#ccc; display: block; clear: both;}
#navlist li li a:hover, #navlist li li a:active, #navlist li li:hover a, #navlist li li:active a, #navlist li li.current_page_item a,#navlist li li.current_page_parent a,#navlist li li.current_page_ancestor a {background:#000; color:#009ddc;}
#navlist li ul li a {display: block;}
#navlist li.page-item-17 a {padding-left: 0;}
#navlist li.page-item-211 ul {display: none;}
#navlist li.page-item-15 a {display: none;}
#navlist li.page-item-366 a {display: none;}

#logo-image {float: left;}

#background {position:absolute; z-index: -1; width:100%; height:100%; /*min-height: 550px;*/}
#wrapper {width: 1000px; margin: 20px auto 100px auto; /* position: relative;*/}

#black-box {width: 960px; height: 450px; margin: 0 auto;}
#black-box-content {width: 730px; height: 290px; padding: 60px 120px 100px 120px;}
#black-box-text {width: 400px; height: 310px; overflow: auto;}
#black-box-text p {padding-right: 35px;}
#black-box-text-wide {width: 730px; height: 310px; overflow: auto;}
#black-box-text-wide p {padding-right: 35px;}

.black-bg-trans {background: url(images/backgrounds/black-bg-trans.png) repeat-x; width: 960px; height: 450px;}
.black-bg-landscape {background: url(images/backgrounds/bg-landscape-1.jpg) no-repeat; width: 960px; height: 450px;}
.black-bg-med {background: url(images/backgrounds/med-prof-bg-2.jpg) no-repeat; width: 960px; height: 450px;}
.black-bg-dental {background: url(images/backgrounds/dent-prof-bg.jpg) no-repeat; width: 960px; height: 450px;}
.black-bg-othervol {background: url(images/backgrounds/other-vol-bg.jpg) no-repeat; width: 960px; height: 450px;}
.black-bg-building {background: url(images/backgrounds/building-bg.jpg) no-repeat; width: 960px; height: 450px;}
.black-bg-landscape-2 {background: url(images/backgrounds/landscape-bg.jpg) no-repeat; width: 960px; height: 450px;}

#homepage-bar {width: 940px; height: 21px; padding: 7px 10px 7px 10px; background-color: #009ddc; margin: 30px 0 0 0;}
#homepage-bar p {color: #ffffff; font-size: 16px; text-align: center; font-weight: bold;}
#homepage-bar a {color: #000;}

.floatimgright {float:right; padding: 7px; border: 1px solid #fff;}


/* HOME PAGE */
#slideshow {position: relative; height: 450px;}
#slideshow IMG {position: absolute; top: 0; left: 0; z-index: 8;}
#slideshow IMG.active {z-index: 10;}
#slideshow IMG.last-active {z-index: 9;}


/* NEWS */
#black-box-text-wide-news {width: 730px; height: 310px; overflow: auto;}
#black-box-text-wide-news .post {border-bottom: 1px solid #fff; width: 690px; margin-bottom: 12px;}
#black-box-text-wide-news .post p {padding-right: 10px;}
.post_titles {font-size: 16px; color: #009ddc;}

/* CORPORATE SPONSORS */
#corporate-sponsors {background: url(images/sponsors-08032011.jpg) no-repeat; width: 960px; height: 450px;}
#corporate-sponsors h3 {background-color: #85BCE6; padding: 10px; color: #fff; font-size: 22px; font-weight: normal; text-align: center;}

/*PAYPAL BUTTON ON VOLUNTEER PAGE */
#paypal-btn {margin-top: 20px;}
#paypal-btn h4 {padding-bottom: 10px;}

/* CONTACT PAGE */
#contact-info {width: 225px; float: left;}
#contact-form {width: 400px; float: right;}
#contact-form textarea {height: 75px; width: 300px; border: 1px solid #999999; margin-top:7px; padding:3px; overflow: hidden;}
#contact-form input {border: 1px solid #999999; margin-top:7px; padding:3px; width:300px;}
#contact-form .send {float: right; margin: 4px 0 0 5px; padding: 5px 20px; width: auto; -moz-border-radius:5px 5px 5px 5px; background: none repeat scroll 0 0 #009ddc; border:1px solid #009ddc; color:#fff; cursor:pointer;}
#contact-form .send:hover {background:none repeat scroll 0 0 #22b24c; border:1px solid #22b24c; }
.contact-form-right {float: right;}
.contact-form-left {float: left; width: 70px; margin-top: 7px;}
.contact-form-submit {float: right;}
#contact-form-mailing-list {float: left; width: 290px; margin-top: 7px;}
#contact-form-yes-no select {border: 1px solid #999999; padding: 3px; float: right; width: 75px; margin-top: 7px;}
#contact-form-mailing-list p {padding: 0;}
#captcha-input {float: left; margin: 0 0 0 21px;}
#captcha-input input {width: 150px;}
#captcha-text {margin-top: 7px;}

/* FOOTER */
#footer {width: 100%; background: #000; overflow: hidden; height: 39px; color: #fff; position: absolute; bottom: 0; left: 0; margin-top: 30px;}
#footer-content {width: 960px; margin: 0 auto;}
#footer p {padding-top: 8px; width: 335px; float: left;}
#social-media {width: 117px; float: right; margin-top: 5px; height: 30px;}
.social-media-icons {float: left; margin-left: 9px;}

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

/* INTERNAL SCROLL BAR */

/*  scrollgeneric is used for corrective styling of elements, and should not be modified or removed */ 
.scrollgeneric {line-height: 1px; font-size: 1px; position: absolute; top: 0; left: 0;}

/* do not forget to put colors for backgrounds for before image(s) can load , this is more important for
the scrollbar itself than the scrollbase, as user can live without an image on the base but cannot see
any scrollbar when images cannot load. */
.vscrollerbar { width: 10px; background: #dedede;}

.vscrollerbase {width: 10px; background: none;}

/* height of this element is auto set to fit the scrollbase, to cover the base */
/* this element can be used to place a faux top arrow image */
.vscrollerbasebeg {width: 10px; height: 10px !important; 
/*Again, the safari fix, normally this line is not needed.*/ 
background: url(images/scroll-up-3.gif) no-repeat 0 0;}

/* height of this element should be set */
/* this element can be used to place a faux bottom arrow image */
.vscrollerbaseend {
height: 10px; width: 10px; background: url(images/scroll-down-3.gif) no-repeat 0 0;}

/* do not forget to give horizontal scrollbars some color properties even if you don't plan on using them */
.hscrollerbase {height: 16px; background-color: white;}
.hscrollerbar {height: 16px; background-color: black;}

/* paddings of these elements will decide how far the scrollbar will stop in both ends, and are not actually
used for styling, and are set to 0 by the script, here we will set them the size of our faux arrows */
.vscrollerbar, .hscrollerbar {
padding: 12px; z-index: 2;}

/* properties for scroller jog box, just in case */
.scrollerjogbox {
width: 18px; height: 16px; top: auto; left: auto; bottom: 0px; right: 0px; background: #37917A;}