/*  
Theme Name: El Centro
Theme URI: http://sistercarmen.org/
Description: Testing grounds for development of sistercarmen.org.
Version: 1.7
Author: Jeremy Carlson
Author URI: http://jeremycarlson.com/

	The CSS, XHTML and design is released under GPL:
	http://www.opensource.org/licenses/gpl-license.php

	----------------------------------------

	Changelog
	
	1.7		Updated 6/1/2010: Adding Social Media Icons to nav
	1.6		Updated 2/9/2010: Minor tweaks to accommodate fixed width content
	1.5		Initial Release
	----------------------------------------

	Colors used on this site:
	#052	-	dark green
	#687	-	sage green (for type)
	#798	-	sage green (for backgrounds)
	#cdc	-	very pale green-gray
	#fa2	-	deep gold
	#fcc56c	-	pale gold
	#ffeed2	-	very pale gold/sand
	#46d	-	soft blue

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

/* ========================================
	Begin Structure
---------------------------------------- */
body, div, ul, ol, li {
	margin: 0;
	padding: 0; 
	}

body {
	font-size: 75%;
	font-family: Verdana, Arial, Sans-Serif;
	line-height: 1.3em;
	color: #000;
	background: #cdc;
	text-align: center;
	}

#page {
	width: 970px;
	margin: 0 auto;
	text-align: left;
	}

#header {
	position: static;
	width: 100%;
	background-color: #fff;
	border-bottom: 1px solid #052;
	}

#logo {
	width: 242px; /* fix for IE5.x/win? */
	padding-left: 10px;
	vertical-align: bottom;
	}

#description {
	padding: 10px 211px 0 10px; /* right padding corresponds to #sidebar width. */
	vertical-align: bottom;
	color: #fa2;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 80%;
	}

#sidebar {
	position: relative;
	padding-top: 70px;
	top: 0;
	right: 0;
	width: 211px;
	margin: 0 0 0 auto;
	border-left: 1px solid #052;
	background: #798;
	font-family: Georgia, Serif;
	}

* html #content { margin-right: -12px }

#info, #questions, #languages {
	position: absolute;
	width: 211px;
	}

#info { top: -1px; right: 0 }

#questions { bottom: 0 }

#questions, #questions strong {
	padding: 4px 0 8px;
	}

#questions {
	padding-top: 40px;
	}

#content, #footer {
	position: relative;
	padding: 1em 15px;
	margin: 0 211px 15px 0; /* right margin corresponds to #sidebar width. */
	}

#content {
	z-index: 1;
	width: 710px;
	float: left;
	margin-right: 0;
	}

.layout { margin-right: 20px }

#leftcolumn { padding-right: 20px }

#rightcolumn, #eventcalendar, #contextmenu { width: 199px }

#eventcalendar, #contextmenu {
	position: relative;
	float: right;
	display: inline; /* Fixes IE double margin for floats */
	margin: 1em 0 1em 25px;
	}

* html .layout,
* html #leftcolumn,
* html #rightcolumn,
* html #eventcalendar,
* html #contextmenu,
* html table.data,
* html table.data * {
	position: relative;
	}
/* Fix for quirkiness in IE. Again. Sigh. */

.event_list a {
	font-weight: normal;
	text-decoration: underline;
	}

.post {
	margin: 0 0 1em;
	padding: .6em 0 0;
	border-top: 1px solid #fa2;
	}

.postmetadata { padding-top: 5px }

td { vertical-align: top }

.data td {
	padding-right: 25px }

.box {
	border: 1px solid #052;
	padding: 5px;
	margin-bottom: 1em;
	background: #fff;
	}

img.box {
	padding: 0;
	display: block;
	margin-bottom: .1em;
	}

#itemsneeded {
	background: #fa2;
	border-bottom: none;
	margin-bottom: 0;
	}

div.one-image { display: inline !important } /* This is to make Gallery blocks work inline w/ posts - gives us control in WP */

/* End Structure */

/* ========================================
	Begin Typography & Colors
---------------------------------------- */

#footer {
	font-size: 80%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	}

#colophon {
	font-size: 70%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin-top: 2em;
	}

#footer a, #colophon a {
	font-weight: normal;
	text-decoration: underline;
	}

table, tr, td { font-size: 100% }

.widecolumn .entry p { font-size: 1.05em }

.entry { line-height: 1.4em }

.postmetadata { text-align: center }

.alt {
	background-color: #f8f8f8;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	}

small, #events {
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 0.9em;
	line-height: 1.5em;
	}

h1, h3 { font-family: /*Garamond, "Adobe Garamond",*/ Georgia, serif }

h1 {
	font-size: 2.8em;
	line-height: 1em;
	font-weight: normal;
	color: #052;
	margin-bottom: .2em;
	}

h2 { font-size: 1.3em }

h2.pagetitle { font-size: 1.6em }

h3 { font-size: 1.3em }

#events * {
	margin: 0 }

#sidebar li {
	text-transform: uppercase;
	font-size: 1.1em;
	}

#sidebar li li { text-transform: none }

#info { border-bottom: 1px solid #052 }

#questions {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #052;
	background: #fcc56c;
	margin: 0;
	}

#questions strong {
	font-family: /*Garamond, "Adobe Garamond",*/ Georgia, serif;
	display: block;
	font-size: 2em;
	font-weight: normal;
	color: #fff;
	}

#languages {
	border-top: 1px solid #052;
	background: #fff;
	font-size: 70%;
	padding: 0 0 3px;
	}

#questions, #languages {
	text-align: center;
	/* The following are for having the side wheatstalk
	margin: 0 0 0 51px;
	border-left: 1px solid #052; */
	}

#sidebar #languages li {
	font-size: 130%;
	color: #052;
	display: inline;
	list-style-type: none;
	list-style-image: none;
	padding: 2px 8px;
	}

#sidebar #languages h2, #sidebar #languages a, #sidebar #languages a:visited { color: #fa2 }

h2.box {
	margin-bottom: 0;
	color: #fff;
	background: #798;
	padding: 2px;
	border-bottom: none;
	}

#events {
	margin-bottom: 0;
	padding: 2px;
	border-bottom: none;
	}

.box p, .box h2, .box h3, .box li { margin: .2em 0 0 }

h2.box, .box h3, #languages h2, #languages li, #languages li a {
	font-weight: bold;
	font-family: Georgia, serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	}

h2.box, .box h3 { font-size: 90% }

#content h2.box a { color: inherit; display: block }

#sidebar h2, #wp-calendar caption, cite { text-decoration: none }

.commentlist li, #commentform input, #commentform textarea { font: 0.9em 'Lucida Grande', Verdana, Arial, Sans-Serif }
	
.commentlist li { font-weight: bold }

.commentlist cite, .commentlist cite a {
	font-weight: bold;
	font-style: normal;
	font-size: 1.1em;
	}

.commentlist p {
	font-weight: normal;
	line-height: 1.5em;
	text-transform: none;
	}

#commentform p { font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif }

.commentmetadata { font-weight: normal }

small, .nocomments, .postmetadata, blockquote, strike { color: #687 }
	
code { font: 1.1em 'Courier New', Courier, Fixed }

acronym, abbr, span.caps
{
	font-size: 0.9em;
	letter-spacing: .07em;
	}

/* ========================================
	Background Images
---------------------------------------- */

#page { background: #ffeed2 url('i/green_bar_vert.gif') right top repeat-y; }
#info { background: #fa2 url('i/wheatongold.gif') left top no-repeat; }

/* List Images */
#sidebar li li { background-image: url('i/vv_whiteongreen.gif'); }
#content ul li { background-image: url('i/v_blackonbeige.gif'); }
#content .box ul li { background-image: url('i/v_blackonwhite.gif'); }
#content #itemsneeded ul li { background-image: url('i/v_blackongold.gif'); }


/* ========================================
	Begin Link Formatting
---------------------------------------- */

a {
	color: #46d;
	text-decoration: none;
	font-weight: bold;
	}

#content a:visited { color: #687 }

#sidebar li.page_item_current { color: #000 }
#sidebar li.page_item  { color: #fff }
#sidebar li.page_item_current a, #sidebar li.page_item a { color: inherit }

#sidebar, #sidebar a, #sidebar li.page_item a:hover { color: #fff }

#sidebar a:visited, #sidebar li.page_item a:visited { color: #cdc }

a:hover, .box a:hover, #sidebar #languages a:hover {
	color: #000;
	text-decoration: underline;
	}

#sidebar li li a { font-weight: normal }

#colophon * { color: #cdc }

/* End Link Formatting */


h2.pagetitle {
	margin-top: 30px;
	text-align: center;
}

#sidebar h2 {
	margin: 5px 0 0;
	padding: 0;
	}

h3.comments {
	padding: 0;
	margin: 40px auto 20px ;
	}

h3.langswitch { margin: 0 0 10px }

.langswitch a { font-weight: normal; text-decoration: underline }

/* ========================================
	Begin Search Results Styling
---------------------------------------- */
.searchresult {
	border-top: 1px solid #798;
	position: relative;
	clear: both;
	}

.searchresult .post {
	width: 48%;
	position: relative;
	float: left;
	margin-right: 1.8%;
	}
/* documentation on the following '.clearfix' solution to clearing floats at the end of boxes is found at http://www.positioniseverything.net/easyclearing.html */

/* NOTE: the '.clearfix' class (or renamed equivalent) should be applied to the box CONTAINING the float */
.searchresult:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.searchresult { display: inline-block }

/* Backslash hack - hide code from IE-mac until next comment\*/
.searchresult { display: block }
* html .searchresult { height: 1% } /* End hide from IE-mac. The * makes this rule apply only to IE - the "Tan Hack" is documented at http://www.positioniseverything.net/articles/box-model.html */


/* End Search Results Styling */

/* ========================================
	Begin Images
---------------------------------------- */
p img {
	padding: 0;
	max-width: 100%;
	}

/*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */
	
img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}
	
img.alignright {
	padding: 4px;
	display: inline;
	}

img.alignleft {
	padding: 4px;
	display: inline;
	}

.alignright {
	float: right;
	margin: 0 0 2px 7px;
	}
	
.alignleft {
	float: left;
	margin: 0 7px 2px 0;
	}
/* End Images */



/* ========================================
	Begin Lists
---------------------------------------- */

#content ul { list-style: none } 

ul, ol, dl { position: relative } /* This is a fix for disappearing list backgrounds in IE - see http://www.positioniseverything.net/explorer/ie-listbug.html */

/* All list items that have images on their left side (see header template): */
#sidebar li li, #content ul li, #content .box ul li, #itemsneeded ul li, #content li, #sidebar ul ul li {
	padding-left: 1em;
	background-repeat: no-repeat;
	background-position: 0 .25em;
	}

#content ol { padding-left: 1em }

.postmetadata ul, .postmetadata li {
	display: inline;
	list-style-type: none;
	list-style-image: none;
	}
	
#sidebar ul li {
	list-style-type: none;
	list-style-image: none;
	margin-bottom: 15px;
	}

#sidebar ul p, #sidebar ul select { margin: 5px 0 8px }

#sidebar ul { margin: 5px 10px 0 }

#sidebar ul ul, #sidebar ul ol { margin: 0 }

ol li, #sidebar ul ol li { list-style: decimal outside }

#sidebar ul ul li, #sidebar ul ol li {
	margin-bottom: 0 }

#colophon li { display: block }

#sidebar ul#colophon li {
	padding: 0;
	background-image: none;
	}

/* End Lists */



/* ========================================
	Begin Form Elements
---------------------------------------- */

#searchform {
	margin: 10px auto;
	padding: 5px 3px; 
	}

#sidebar #searchform #s {
	width: 115px;
	padding: 2px;
	}

#sidebar #searchsubmit { padding: 1px }

.entry form { /* This is mainly for password protected posts, makes them look better. */
	text-align:center }

select { width: 130px }

#commentform input {
	width: 170px;
	padding: 2px;
	margin: 5px 5px 1px 0;
	}

#commentform textarea {
	width: 100%;
	padding: 2px;
	}

#commentform #submit {
	margin: 0;
	float: right;
	}
/* End Form Elements */


/* ========================================
	Begin Calendar
---------------------------------------- */

#wp-calendar {
	border-top: 1px solid #fa2;
	padding-top: 5px;
	empty-cells: show;
	margin: 10px auto 0;
	width: 155px;
	}

#wp-calendar th {
	font-style: normal;
	text-transform: capitalize;
	}


#wp-calendar #next a {
	font-size: 9pt;
	padding-right: 10px;
	text-align: right;
	}

#wp-calendar #prev a {
	padding-left: 10px;
	text-align: left;
	}

#wp-calendar a { display: block; text-decoration: none }

#wp-calendar caption {
	font: bold 1.3em 'Lucida Grande', Verdana, Arial, Sans-Serif;
	text-align: center;
	width: 100%;
	}

#wp-calendar td {
	padding: 3px 0;
	text-align: center;
	}

#wp-calendar td.pad:hover { /* Doesn't work in IE */
	background-color: #fff }

/* End Calendar */



/* ========================================
	Begin Various Tags & Classes
---------------------------------------- */

acronym, abbr, span.caps { cursor: help }

acronym, abbr { border-bottom: 1px dashed #999 }

blockquote {
	margin: 15px 30px 0 10px;
	padding-left: 20px;
	border-left: 5px solid #ddd;
	}

blockquote cite {
	margin: 5px 0 0;
	display: block;
	}

.center { text-align: center }

hr { display: none }
.content hr { display: block }

a img { border: none }

.navigation {
	display: block;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 60px;
	}

a.nocontent { /* This is special for when there's no content in one language */
	display: block;
	padding: 1em 0;
	border-top: 1px solid #fa2;
	border-bottom: 1px solid #fa2;
	}

.social { position: relative; height: 30px }
.social a {
    display: block;
    position: absolute;
    width: 30px;
    height: 30px;
    text-indent: -5000px;
    background-image: url('/i/socialicons.jpg');
    }

#sidebar li { clear: right }

.social #twitter { left: 0; background-position: 0 0 }
.social #facebook { left: 30px; background-position: -30px 0 }

/* End Various Tags & Classes*/

/* Tweaking Admin Bar styles for WP Admin Bar plugin */
body #wp-admin-bar {
	margin: 0 auto;
	width: 970px;
	background: #ffeed2;
	border-bottom-color: #052;
	}