/*
template_002.css

CSS file for the v2 blog template

A NOTE ABOUT EMS:
As far as it was possible, this document uses ems for units.  This is a
good accessibility practice because since the size of an em is based on the
font size, it grows in relation to the font when the user changes the text size
of their browser.  As the text size increases, so does the size of margins and
padding, column widths, etc, thus maintaining the page layout as much as
possible.  The only times that ems are not used are when the CSS spec doesn't
allow them to be used, such as in the case of setting an element's absolute
position, or when a border needs to be only one pixel thick.

Likewise, all font sizes are set as a percentage of the base font size.  As the
base font size is changed in the user's browser, the rest of the fonts on the
page are resized accordingly.

 */

/*   BODY SETTINGS   */
body, html {
background-color: #ccffff !important;
font-style: Arial, Verdana, sans-serif  !important;
}

.mc {
background-color: transparent !important;
position: relative;
font-family: Arial, Verdana, sans-serif !important;
border: none !important;
padding: 0;
margin: 0;
}

iframe {
background: transparent !important;
} 

/*   BIG RED  */
#bigTop {
width: 100%;
background-image: url(http://compendium.com/images/blog/haitiaid_header_bg.jpg);
background-repeat: repeat-x;
background-color: #CCFFFF;
}

.bigTopContainer {
width: 974px;
margin: 0 auto;
text-align: left;
height: 342px;
}

.bigTopLogo {
padding: 50px 0 0 36px;
float: left;
width: 200px;
margin: 0 0 0 0;
}

.bigTopdonate {
float: left;
width: 200px;
margin: 190px 0 0 350px;

}

/*   HEADER SETTINGS  */
#header {
background-color: transparent  !important;
background-image: url(http://compendium.com/images/blog/haitiaid_headertip.png) !important;
background-repeat:  no-repeat;
color: #FFFFFF;
padding: 0;
margin: 27px 0 0 14px;
height: 30px !important;

}

#header h1 { 
padding: 4px 0 6px 0;
background-color: #3d3d3d  !important;
font-weight: bold;
color: #b1faf6;
font-size: 14px;
margin: 0;
/* making the width 100% allows horiz alignment from the UI */
}


#header a:link, #header a:visited, #a:hover, #header a:active {
color: #fff;
}

#mainMenu {
margin: 20px 0 0 0;
float: right;

}

#mainMenu ul {
height: 20px;
}

#mainMenu ul li {
float: left;
margin: 0 38px 0 0;
list-style: none;
}

#mainMenu ul li a, #mainMenu ul li a:link {
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
}


#mainMenu ul li a:hover {
color: #ccffff;
text-decoration: none !important;
}


/*   MENU SETTINGS   */
#menu {
background-color: transparent;
background-image: none !important;
width: 500px;
float: left;
margin: 330px 0 0 -20px;
color: #3d3d3d !important;
}

#menu #menu-1 {
background-color: transparent !important;
background-image: none !important;
}

#menu-1 ul {
background-color: transparent;
margin: 0;
padding: 0.5em 0 0.5em 0;
}

#menu-1 li {
display: inline;
background-color: transparent !important;
margin-left: 30px; /* used pixels to keep it aligned with the absolutely positioned blog title */
font-weight: bold;
font-size: 100%;
}

#menu-1, #menu-1 a:link, #menu-1 a:visited, #menu-1 a:active {
background-color: transparent !important;
color: #3d3d3d !important;
text-transform: uppercase;
}

#menu-1 a:hover {
color: #FFFFFF;
}


/*   MAIN COLUMN SETTINGS   */

#content {
margin: 0;
width: 560px;
border-right: 0 solid #999999;
background-color: transparent !important;
}

.yui-g div.first, .yui-gb div.first, .yui-gc div.first, .yui-gd div.first, .yui-ge div.first, .yui-gf div.first, .yui-g .yui-gc div.first, .yui-g .yui-ge div.first, .yui-gc div.first div.first {
float: left !important;
}

/*   POST SETTINGS   */

p.MsoNormal, li.MsoNormal, div.MsoNormal {
font-family: Arial, Verdana !important;
font-size:small;
color: #1d1d1d;
margin:0 ;
}

.post {
margin: 0 0 1em 0;
background: #CCFFFF !important;
color: #3d3d3d;
padding: 0 0 30px 20px;
}

.post-header h2 {
font-size: 138.5%;
border-bottom: 2px solid #3d3d3d;
font-weight: bold;
margin-bottom: .8em;
margin-top: 0;
padding: 1em 0 0 0;
color: #3d3d3d !important;
}


.post-header h2 a {
text-decoration: none !important;
}

.post-header-meta {
font-size: 85% !important;
font-style: italic;
padding: .3em 0 .3em 0;
}

.post-body {
margin-top: 1em;
margin-bottom: 0em;
padding-right:0;
padding-left:0;
line-height: 1.5em;
background: #CCFFFF !important;
font-style: Arial, Verdana, sans-serif  !important;
}

.post-body a {
text-decoration: underline !important;
}

.post-body img {
margin: 0.25em;
}

.post-body h3 {
font-size: 130%;
font-weight: bold;
margin-bottom: 1em;
margin-top: 1em;
padding: 0;
color: #3d3d3d;
}

.post-body h4 {
font-size: 120%;
font-weight: bold;
margin: 30px 0 5px 3px;
padding: 0 0 0 10px;
background: url(http://compendium.com/images/blog/bullet-left.png) no-repeat left center;
color: #3d3d3d;
}

.post-body h5 {
font-size: 120%;
margin: 18px 0 0 0;
font-weight: bold;
color: #CC3333;
}

.post-body h5 a {
text-decoration: none !important;
}

.post-body ol li {
list-style-position: outside;
margin-left: 20px;
}

.post-footer {
padding: 0 0 14px 0 !important;
background-color: #CCFFFF !Important;
font-size: 85%;
position: relative;
clear: both;
margin-top: 1em;
margin-bottom: 2em;
}

.post-footer a {
color: #3d3d3d;
display: inline;
padding: 20px 20px 20px 0;
}

.post-social-bookmarking {
padding: 1em 6em 0 0;
color: #444444;
}

.post-social-bookmarking2 {
padding: 2em 0 0 0em;
color: #444444;
border-top: 1px dashed #999999;
}

/*   POST FORMS   */
#post-form {
background-color: #e6e6e6;
}

#post-form div {
}

#post-form h3 {
color: #444444;
background-color: #e6e6e6;
margin: 0;
padding: 0.5em;
}

/* Labels appear before the corresponding form field in the HTML.  Both
   are floated left, so
 */
#post-form label {
float: left;
clear: left;
width: 35%;
text-align: right;
margin: 0.3em 0.3em 0 0;
}

#post-form input[type="text"], #post-form textarea {
float: left;
margin-top: 0.3em;
border: 1px solid #eeeeee;
}

#post-form textarea {
width: 60%;
}

#post-form #captcha, #post-form img {
clear: left;
margin-left: 35%;
margin-top: 0.3em;
padding-left: 0.3em;
border: 0;
width: auto;
}

#post-form-submit {
margin-left: 35%;
margin-top: 0.3em;
margin-bottom: 0.3em;
}



/*   POSTS NAVIGATION   */
#posts-navigation {
margin: 1em 0 1em 0;
width:100%;
clear: left;
}

#posts-navigation #prev {
float: left;
}

#posts-navigation #next {
float: right;
}

#posts-navigation a {
padding: 0.2em 1em;
margin-top: 1em;
margin-bottom: 1em;
color: #FFFFFF;
font-weight: bold;
background-color:#343434;
display:inline;
}

/*   COMMENTS SETTINGS   */
#comments {
clear: both;
padding-bottom: 2em;
border-bottom: none #999999;
}

#comment-form div {
background-color: #CCFFFF;
}

#comments h3 {
margin-top: 5em;
margin-left: 0em;
color: #444444;
}

#comment-list {
margin-left: 1em;
margin-right: 4em;
margin-bottom: 3em;
}

.comments-blog-title {
font-style: italic;
color: #CC3333;
}

.comment-header {
padding: .5em;
}

.comment-odd {
background-color: #CCFFFF;
}

.comment-even {
background-color: #CCFFFF;
}

#comment-list dt {
margin: 2em 0 0.20em 0;
color: #404040;
font-weight: bold;
}

#comment-list dd {
margin-bottom: 1em;
}

#comment-form {
width: 80%;
background-color: #CCFFFF;
margin-left: 0;
}

#comment-form div {
}

#comment-form h3 {
color: #444444;
background-color: #CCFFFF;
margin: 0;
padding: 0.5em;
}

/* Labels appear before the corresponding form field in the HTML.  Both
   are floated left, so
 */
#comment-form label {
float: left;
clear: left;
width: 35%;
text-align: right;
margin: 0.3em 0.3em 0 0;
}

#comment-form input[type="text"], #comment-form textarea {
float: left;
margin-top: 0.3em;
border: 1px solid #404040;
}

#comment-form textarea {
width: 60%;
}

#comment-form #captcha, #comment-form img {
clear: left;
margin-left: 35%;
margin-top: 0.3em;
padding-left: 0.3em;
border: 0;
width: auto;
}

#comment-form-submit {
margin-left: 35%;
margin-top: 0.3em;
margin-bottom: 0.3em;
}

/*   MESSAGE SETTINGS  */
/*   Used to display a message to the user to indicate the result of their
 *   action.  Possible message types include success, warning, and 
 *   failure.
 */

/* Styles common to all message types */
.message {
margin: 1em;
width: 90%;
background-color: #e6e6e6;
border-width: 1px;
border-style: solid;
font-weight: bold;
padding: 7px;
}

.message.success {
background-color: #e6e6e6;
border-color: #88f;
color: #666666;
}

.message.error, .message.warning {
background-color: #e6e6e6;
border-color: #e6e6e6;
color: #990000;
}

/*   SEARCH SETTINGS   */
#search-results-header {
border-bottom: 1px dashed #999999;
color: #393939;
font-size: 138.5%;
font-weight: bold;
font-family: Tahoma, Arial;
}

/*   SIDEBAR SETTINGS   */
.sidebar {
overflow: hidden;
margin-top: 0;
padding: 0 0 0 0;
background-color: transparent !important;
}


.sidebar h3 {
margin: 0;
color: #3d3d3d !important;
background-image: none !important;
background-color: transparent !important;
font-weight: bold;
font-size: 93%;
border-bottom: 2px solid #3d3d3d;
}

.sidebar .widget {
margin: 2.1em 0 0 0;
background-color: transparent !important;
background-image: none;
}

.sidebar a:link, .sidebar a:visited, .sidebar a:hover, .sidebar a:active, .sidebar ul, .sidebar li {
color: #cc3333;
}

.sidebar .widget div, .sidebar .widget ul, .sidebar .widget p {
margin: 0;
padding: .5em 0 0 2em; /* pad the entire *content* of the widget */
}

.sidebar .widget ul,  .sidebar .widget ul li {
list-style-position: outside;
margin: 0 0 0.25em .5em;
list-style-type: square !important;
color: #444444;
}

.linkList h4 a {
color: #2f2f2f;
}

.aboutBlog p {
color: #3d3d3d !important;
line-height: 1.3em;
}


/*   SIDEBAR CTAS   */

#sidebar {
background-color: transparent !important;
color: #3d3d3d !important;
margin: 0 0 0 0;
float: right;
}


/* prevent the double-padding of paragraphs and divs within widget content */
.sidebar .widget div div, .sidebar .widget div p {
padding: 0;
}

.InlineImage, .Text, .HTML, sidebarDivider {
padding: 0;
background-color: transparent !important;
}

#search form, .Search form {
position: relative;
border: none !important;
}

.search-button {
position: relative;
bottom: -6px;
}

.input {
background-color: white !important;
border: none !important;
height: 20px !important;
color: #3d3d3d !important;
}

/*   FOOTER SETTINGS   */
#footer {
width: 100%;
margin-top: 30px;
margin-bottom: 0;
background-color: #222222;
padding: 10px 0 0 0;
}

#footer p {
padding: 0 0 0 2em;
font-size: 77%;
text-align: center;
}

#footer-text {
padding: 1em 0 0 0;
text-align: center;
}

#resource-footer {
padding-top: 40px;
background-image: url(http://compendiumblogware.com/images/blog/newsletter_footer_signup_01.jpg);
background-repeat: no-repeat;
background-color: #2f2f2f;
margin-left: 1em;
width: 363px;
height: 95px;
}

#compendium-footer {
position: absolute;
top: 0;
right: 0;
padding: 0.5em;
}



#footerForm {
padding: 0 0 0 1em;
line-height: 1.3em;
color: #e6e6e6;
}

#footerForm input[type="text"], #footerForm forum input textarea {
background-color: #efefef;
color: #444444;
border: 1px grooved #222222;
padding: .4em;
width: 15.25em;
}


#footerForm img {
clear: left;
margin-left: 35%;
margin-top: 0.3em;
padding-left: 0.3em;
border: 0;
width: auto;
}

#footerFormsubmit {
margin-left: 35%;
margin-top: 0.3em;
margin-bottom: 0.3em;
}

.queryField {
height: 60px;
padding: .4em;
width: 15.25em;
background-color: #efefef;
color: #444444;
border: 1px grooved #222222;
}






/*   GENERAL SETTINGS   */

/* Rounded corners are accomplished though displaying one quarter of an
   absolutely positioned transparent PNG image.  The correct section of the
   image is displayed at each corner of the rounded element using as CSS Sprite
   technique.  The image has a white radius with a transparent inside to let the
   background color of the rounded element come through.

   PNG images look much better than GIF images for this purpose because PNGs
   support alpha transparency.  That means that a given pixel in a PNG image
   can be set to be totally opaque (showing true white, in this case), totally
   transparent (showing the background color of the rounded element), or one of
   254 levels of transparency in between.  Alpha transparency permits us to create
   a smoother antialiased corner than a corresponding GIF image, in which there
   are only fully white or fully transparent pixels.  IE6 and below do not support
   PNG transparency, so a browser-specific CSS file for IE6 specifies a GIF
   version of the corner-rounding mask.  It doesn't look as nice as the PNG in a
   more modern browser, but it is acceptable.
 */
.rounded {
position: relative;
margin: 0;
}

.tl, .tr, .bl, .br {
background: transparent url(http://images.content.compendiumblog.com/images/roundcornersprite-white.png) no-repeat 

scroll !important;
position: absolute;
width: 4px;
height: 4px;
padding: 0 !important;
margin: 0;
}

.tl {
top:0;
left:0;
background-position: 0 0 !important;
}

.tr {
top:0;
right:0;
background-position: -4px 0 !important;
}

.bl {
bottom:0;
left:0;
background-position: 0 -4px !important;
}

.br {
bottom:0;
right:0;
background-position: -4px -4px !important;
}

a:link, a:visited, a:active {
text-decoration: none;
}

a:hover {
text-decoration: underline !important; /* always underline a clickable link during hover */
}


#compendium-analytics {
display: none;
}