/*   
To have a nice frame around your image add the following before the <img> element:
<span class="frame-outer"><span><span><span><span>

And the following after:
</span></span></span></span></span>

Example:
http://wp-themes.com/elegant-grunge/?TB_iframe=true&width=1153&height=527
	
*/

/*   
Theme Name: Elegant Grunge
Theme URI: http://michael.tyson.id.au/elegant-grunge-wordpress-theme
Description: An unwashed yet crisp theme with a feature footer, styled image frames, a page template with a uniquely configurable sidebar and a photoblog tag page
Author: Michael Tyson
Author URI: http://michael.tyson.id.au
Version: 1.0.3
Tags: tan, light, one-column, two-columns, three-columns, fixed-width, custom-header, right-sidebar, theme-options, threaded-comments, photoblogging

	Elegant Grunge by Michael Tyson
	http://michael.tyson.id.au/elegant-grunge-wordpress-theme
	
	The CSS, XHTML, design and PHP are released under GPL:
	http://www.opensource.org/licenses/gpl-license.php
	
*/


/****************************
 **   Contents
 ****************************
 
	* General
	* Layout		(Top-level page element styles)
		- Menu
		- Header
		- Content
		- Sidebar
		- Footer
	* Content	(Formatting of items in main content area)
		- General
		- Standard wordpress
		- Comments
		- Comment form
		- Frame
	* Sidebar	(Formatting of items in sidebar)
		- General
		- Tag cloud
		- Wordpress calendar
		- Photoblog widget
	* Footer		(Formatting of items in footer)
		

/****************************
 **   General
 ****************************/

body {
	margin: 0;
	padding: 0;
	background: #4c4c4c;font-size:16px;line-height:21px;
	font-family: "Palatino", "Georgia", "Baskerville", serif;
	color: #666;
}

a {
	color: #5f5f5f;
}

.entry img {
max-width:100%;height:auto;border: 0;
}
/****************************
 **   Layout
 ****************************/
/* Menu */
#menu {
    background-color: #191919;
    border-bottom: 1px solid #373737;
    height: 3em;
    margin-bottom: -18px;
    padding-bottom: 10px;
    padding-top: 20px;
}

#menu ul {
	margin: 0 auto;display:table;
	padding: 0;
	bottom: 0;
	left: 0;
	list-style: none;
}

.double-right-sidebar #menu ul {
	width: 947px;
}

#menu ul li {
	float: left;
}

#menu li a {
	display: block;
	padding-right: 40px;
	line-height: 3.0em;
	color: #868686;
	text-decoration: none;
}

#menu #active a, #menu li a:hover {
	color: #fff;
}

/* Header */

#header-wrap {
	background: url(images/header-repeat.jpg) repeat-x center top;
}

#header {
	height: 216px;
	background: url(images/header.jpg) no-repeat center;
}

.no-sidebar div #header {
	background-image: url(images/header-no-sidebar.jpg);
}

.double-right-sidebar div #header {
	background-image: url(images/header-double-sidebar.jpg);
}

#header div {
	max-width: 800px;
	margin: 0 auto;
}

.double-right-sidebar #header div {
	width: 947px;
}

#header 	 {

	margin: 0;
}

#header h3 a {
	color: #d3d3d3;	font: 2em "Georgia", "Baskerville", serif;
	text-decoration: none;padding-top: 20px;
	font-weight: normal;
	font-style: normal;
	text-shadow: #000 0 1px 2px;
	float: left;
}
#header h3 {
    padding-bottom: 30px;
}
#blog-description {
	position: relative;
	top: 0px;
	color: #616161;
	text-shadow: #000 0 1px 1px;
	left: 2%;
}

/* Content */

#content-container {
	background: #f3f4ee url(images/body.jpg) repeat-y center top;
}

.no-sidebar div #content-container {
	background-image: url(images/body-no-sidebar.jpg);
}

.double-right-sidebar div #content-container {
	background-image: url(images/body-double-sidebar.jpg);
}

#content {
	width: 800px;
	margin: 0 auto;
}

.double-right-sidebar #content {
	width: 947px;
}

#body {
	float: left;
	width: 490px;
	padding-left: 20px;
	padding-right: 20px;
}

.no-sidebar div div #body {
	width: 760px;
	float: none;
}

/* Sidebar */

#sidebar {
	float: right;
	width: 220px;
	position: relative;
	left: -15px;
}

.double-right-sidebar #sidebar {
	font-size: 0.8em;
	float: left;
	position: relative;
	left: 28px;
	width: 181px;
}

.double-right-sidebar #sidebar2 {
	font-size: 0.8em;
	float: right;
	position: relative;
	left: -8px;
	width: 169px;
}

/* Footer */

#footer-wrap-outer {
	margin-top: -51px;
	background: #4c4c4c url(images/footer-repeat.jpg) repeat-x center top;
}

#footer-wrap {
	width: 100%;
	background: url(images/footer.jpg) no-repeat center top;
	padding-top: 91px;
	padding-bottom: 30px;
}

.no-sidebar div #footer-wrap {
	background-image: url(images/footer-no-sidebar.jpg);
}

.double-right-sidebar div #footer-wrap {
	background-image: url(images/footer-double-sidebar.jpg);
}

#footer {
	width: 800px;
	margin: 0 auto;
	padding-left: 7px;
	padding-right: 7px;
	padding-top: 90px;
	min-height: 30px;
}


/****************************
 **   Content
 ****************************/

/* General */

h1 {
	font-size: 1.8em;line-height:1em;
	font-weight: normal;
	font-style: normal;
	color: #3b3b3b;
	margin-top: 0px;
	margin-bottom: 0.5em;
}

h1 a {
	text-decoration: none;
	color: #3b3b3b;
}

.post h2 {
    clear: both;
    font-size: 1.4em;
    line-height: 1em;
    margin-bottom: 15px;
    margin-top: 30px;
}
.post h3 {
	font-size: 1.2em;
	line-height: 1em;
	clear: both;margin-bottom: 15px;
    margin-top: 30px;
}
.post .entry {
	clear: both;
}


.post .info {
	color: #bcbcbc;
	font-size: 0.8em;
}


.hr {
	clear: both;
	border: 0;
	background-image: url(images/hr.jpg);
	color: #f8faf7;
	background-color: #f8faf7;
	width: 426px;
	height: 121px;
	margin: -8px auto 0;
}

.hr hr {
	display: none;
}



.clear {
	clear:both;
}


/* Comment Form */

#contact-form {margin:20px 0px 20px 10px;padding:10px;color:#000;width:360px;border:1px solid #ccc;}



/* Frame */


.frame-outer.aligncenter {
	text-align: center;
}

.frame-outer span {
	display: inline-block;
	background: url(images/frame-top-left.jpg) no-repeat left top;
}

.frame-outer span span {
	background: url(images/frame-bottom-left.jpg) no-repeat left bottom;
}

.frame-outer span span span {
	background: url(images/frame-top-right.jpg) no-repeat right top;
}

.frame-outer span span span span {
	background: url(images/frame-bottom-right.jpg) no-repeat right bottom;
	padding: 32px;
	min-width: 150px;
	min-height: 150px;
	text-align: center;
	overflow: hidden;
}

.frame-outer span span span span * {
    max-width: 425px;
}

.frame-outer.small span {
	background: url(images/frame-top-left-small.jpg) no-repeat left top;
}

.frame-outer.small span span {
	background: url(images/frame-bottom-left-small.jpg) no-repeat left bottom;
}

.frame-outer.small span span span {
	background: url(images/frame-top-right-small.jpg) no-repeat right top;
}

.frame-outer.small span span span span {
	background: url(images/frame-bottom-right-small.jpg) no-repeat right bottom;
	padding: 10px;
	min-height: 38px;
	min-width: 38px;
}

.frame-outer span span span span span {
	background: none;
}

.frame-outer span span span span .wp-caption-text {
	margin-top: 10px;
}


/****************************
 **   Sidebar
 ****************************/

/* General */

.sidebar h4 {
	font-size: 1.3em;
	color: #676767;
	margin-bottom: 20px;
}

.sidebar a {
	color: #9f9f9f;
}

.sidebar ul, .sidebar ul ol {
	margin: 0;
	padding: 0;
}

.sidebar ul li {
	list-style-type: none;
	list-style-image: none;
	margin-bottom: 25px;
}

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

.sidebar ul ul, .sidebar ul ol {
	margin: 5px 0 0 10px;
}

.sidebar ul ul ul, .sidebar ul ol {
	margin: 0 0 0 10px;
}

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

.sidebar ul ul li, .sidebar ul ol li {
	margin: 3px 0 0;
	padding: 0;
}



/****************************
 **   Footer
 ****************************/

#footer .legal, #footer .credit {
	color: #5f5f5f;
}

#footer .legal {
	float: left;color:#ccc;
}

#footer .credit a {
	text-decoration: none;
}

#footer .credit {
	float: right;color:#ccc
}


#footer .widget-wrap {
	float: left;
	width: 264px;
	margin-bottom: 36px;
}


#footer .widget {
	margin-right: 21px;
	margin-left: 21px;
}

#footer {
	font-size: 16px;
	line-height:21px;
}

#footer a {
	color: #a3a3a3;
}

#content blockquote {font-style:italic;}
#content li { margin-bottom: 13px;margin-top: 5px;}
a:hover {color:#99f}
.entry hr {
    border-bottom: 1px solid #999;
    color: #999;
    margin: 30px 10px;
}
fieldset#contact-form textarea {font-size: 15px;margin-bottom: 15px;padding: 3px;width: 97%;}
@media (max-width: 1024px) {
#menu li a {
    padding-right: 24px;
}
#content {
    margin: 0 auto;
    width: 100%;
}#content-container,#header-wrap {
    background-size:100% auto;
}#header {
    background-size: 139% auto;
    height: 156px;
}
#body {
    float: left;
    padding-left: 13%;
    padding-right: 2%;
    width: 50%;
}#sidebar {
    float: left;
    left: 0;
    margin-left: 2%;
    position: relative;
    width: 22%;
}#header h3 a {
    font: 1.5em "Georgia","Baskerville",serif;
    padding-top:8px;padding-bottom: 30px;
}#blog-description {
    padding-top: 20px;
}
h1 {
    color: #3b3b3b;
    font-size: 1.5em;}
.post h2,.blog-post h2.blog-title {
    clear: both;
    font-size: 1.2em!important;
    line-height: 1em!important;
}

.post h3 {
	font-size: 1em;
	line-height: 1em;
	clear: both;
}
	}
@media (max-width: 900px) {
#page {
    overflow: hidden;
    width: 100%;
}#header {
   background: rgba(0, 0, 0, 0) url(images/header2.jpg) no-repeat scroll center center/165% auto;
}
#content-container {
    background: #f3f4ee url(images/bodycuerpo.jpg) repeat-y scroll center top/116% auto;
}
#body {
    float: none;
    padding-left: 6%;
    padding-right: 2%; padding-top: 3%;
    width: 90%;
}
#sidebar {
    float: none;
    left: 0;
    margin-left: 6%;
    position: relative;
    width: 90%;
}#menu li a {
    padding-right: 15px;
}#header div {
    width: 92%;
}#footer {
    width: 94%;
}
#footer-wrap {
    background: rgba(0, 0, 0, 0) url(images/footer2.jpg) no-repeat scroll center top / 190% auto;
    padding-bottom: 30px;
    padding-top: 91px;
    width: 100%;
}
	}
@media (max-width: 767px) {
	#menu li a {
    padding-right: 8px;
}
}
@media (max-width: 700px) {

#menu {
    display: none;
}
	#menu li a {
    padding-right: 8px;
}#header {
    background-size: 165% 100%;
    height: 130px;
}#footer .credit {
    color: #ccc;
    float: none;
}#footer {
    padding-top: 20px;
}
#header {background:none;}
}
@media (max-width: 480px) {
.entry img {
    float: none!important;
    clear: both;
}#content blockquote {
    font-style: italic;
    margin: 10px 15px;
}
.entry ul {
    padding-left: 20px;
}
#contact-form {
    width: 88%;
}
.hr {
    color: #f8faf7;
    height: 80px;
    margin: 0;
    width: 93%;
}
#header h3 a {
    font: 1.4em "Georgia","Baskerville",serif;line-height:1em;
    padding-bottom: 10px;
    padding-top: 8px;
}
#blog-description {
    padding-top: 0;
}
h1 {
    color: #3b3b3b;
    font-size: 1.4em;
}
}
@media (max-width: 375px) {
#header h3 a {
    font: 1.3em "Georgia","Baskerville",serif;line-height:1em;
    padding-bottom: 8px;
    padding-top: 6px;
}#blog-description {
    font-size: 0.9em;line-height:1em;
    padding-top: 0;
}
h1 {
    color: #3b3b3b;
    font-size: 1.3em;
}

#footer-wrap {
    padding-bottom: 29px;
    padding-top: 31px;
    width: 100%;
}
#sidebar {
    padding-bottom: 20px;
}
#footer-wrap {
    background: transparent url(images/footer2.jpg) no-repeat scroll center top / 190% 100%;
    padding-bottom: 29px;
    padding-top: 60px;
    width: 100%;
}
}