/*
Theme Name: ErosBlog Responsive Mobile 2013
Theme URI: http://www.erosblog.com/
Description: Eros Blog Theme mobile with nav bar
Version: 4.0
Author: Bacchus
Author URI: http://www.erosbog.com
*/

html, body{
width: 100%;
margin:0px;
padding:0px;
}

body{
position:relative;
top:0px;
left:0px;
color:#242215;
font-family:"Lucida Grande", Arial, Helvetica, sans-serif;
background-color:#e4e489;
background-image: url(images/nymphs-medallion.jpg);
background-position: 1% 90%;
background-attachment: fixed;
background-repeat: no-repeat;
/*
background-image:url(images/mainbg.jpg);
background-position: top left;
background-repeat: repeat-x;
*/
}

/* ==================
    HYPERLINK STYLES 
   ================== */

a, a:link{
color: #6a6a41;
font-weight:bold;
text-decoration:none;
}

a:visited{
color: #81824f;
text-decoration: none;
}

.postcontentBR a, .postcontentBR a:link{
font-weight:bold;
color: #95794b;
text-decoration:none;
}

a:hover, .postcontentBR a:hover{
color: #000;
text-decoration:none;
} 

#sidebarleft a, #sidebarright a{
color: #6a6a41;
text-decoration:none;
font-weight:bold;
}

#sidebarleft a:visited, #sidebarright a:visited{
color: #81824f;
text-decoration:none;
font-weight:bold;
}

#sidebarleft a:hover, #sidebarright a:hover{
color: #000;
text-decoration:none;
}

h2.posttitle a, h2.posttitle a:link{
color: #474725;
text-decoration:none;
}

h2.posttitle a:hover{
color: #000;
text-decoration:none;
}

/* ==================
   TERONG PLUGIN OUTPUT    
   ================== */

p.terong-heading{
font-size: 87.5%; 
font-weight: bold; 
font-style: italic;
margin: 0;
}

ul.terong-list{
font-size: 87.5%; 
padding-left: 1.375em;
line-height: 1.118em;
}

.terong-list li{

}


/* ==================
   GENERAL FORMATTING    
   ================== */

#navbar {
	width: 100%;
	background-color: #FEFFB1;
	padding: 0;
}

#navbar-homelogo {
	height: 39px;
	min-width: 85px;
	float: left;
	width: 36%;
	background-color:transparent;
	background-image:url(images/erosblogtitlebg-39px.jpg);
	background-repeat:repeat-x;
	background-position:top left;
}

#navbar-navbuttons-wrapper {
	float:right;
	margin: 0;
	padding: 0;
	width: 60%;
	background-color:transparent;
}
#navbar-navbuttons {
	float: right;
}

#trigram {
margin-right: .813em;
}

#dice-navbar {
margin-right: .688em;
}

#navbar-dropdown {

	width: 100%; 
	text-align: center;
	border: none;
	background-color:  #FEFFB1;
}

#navbar-dropdown ul {
	padding: 0;
	}

#navbar-dropdown li {
	padding: 0;
	list-style-type: none;
	font-size: 1.125em;
	line-height: 2em;
	border-bottom: 1px solid black;
	}

#navbar-dropdown a {

	
}


#navbar-bottom{
width: 100%;
margin: 0;
padding: 0;
background-color: transparent;
background-image:url(images/maintopbg.gif);
background-position:0px -3px;
border-top:1px solid #cccc7a;
border-bottom:1px solid #cccc7a;
height:11px;
}

.embed-container {
    position: relative;
    padding-bottom: 56.25%; /* 16/9 ratio */
    padding-top: 30px; /* IE6 workaround*/
    height: 0;
    overflow: hidden;
    margin-bottom: 20px;
}

.embed-container iframe, /* Youtube et al */
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 6%;
    width: 88%;
    height: 100%;
}

.center {
      display:block;
      margin:0 auto;
	text-align: center;
	}

.alignright {
	float: right;
	}
	
.alignleft {
	float: left
	}

hr {
	display: none;
	}

a img {
	border: none;
	}

.navigation {
	text-align: center;
	padding-top: 4px;
	padding-bottom: 7px;
        padding-left: 12px;
        padding-right: 12px;
	}


h1 {
	font-size: 131.3%;
	margin-top: 0em;
	margin-bottom: 0em;/*both set to zero and padding in header div is used intead to deal with compound ie pc problems that are beyound summary in a simple comment.*/
	}
h2 {
	font-size: 131.3%;
	margin: 1.2em 10px 1.2em 10px;
	}
h3 {
	font-size: 131.3%;
	margin: 1.2em 0em 1.2em 0em;
	font-weight: normal;
	}
img {
	border: 0;
	}

ol, li {
	padding-top: 0.2em;
	padding-bottom: 0.1em; 
	}
p {
	line-height: 1.375em;
	margin: .875em 0em .875em 0em;
	}

pre {
	font-family: monospace;
	}

strong, b {
	font-weight: bold;
	}

ul{
margin:0px;
padding:0px 10px 20px 10px;
}

#sidebarleft ul, #sidebarright ul, #sidebarleft li, #sidebarright li{
list-style-type:none;
margin-top:0;
margin-bottom: 0;
margin-left: 2%;
padding-top:0;
padding-bottom: 0;
}

#sidebarleft h2, #sidebarright h2{
	font-size: 112.5%;
	margin: 10px;
	margin-left: 4%;
	margin-bottom: 2px;
	}


/* ==================
      POSITIONING    
   ================== */

#sidebarleft{
width: 180px;
margin:0px;
padding:0px;
font-size: 87.5%;
background-color: inherit;
background-image:url(images/sidebarleftbg.jpg);
background-size:100% auto;
background-repeat:repeat-y;
background-position:left top;
border-bottom: 1px solid #81824f;
border-right: 1px solid #81824f;
}

#sidebarleft-insidewrapper{
background-image: inherit;
background-image:url(images/sidebarlefttop2.jpg);
background-size: 100% auto;
background-repeat: no-repeat;
background-position:left top;
}

#sidebarleftcontent{
width: 100%;
margin:0 0 1em 0;
padding:0px;
color:#504d32;
overflow:hidden;
text-align:left;
}

#sidebarright{
width: 316px;
margin:0;
padding:0;
background-color: inherit;
background-image:url(images/sidebarrightbg.jpg);
background-size:100% auto;
background-repeat:repeat-y;
background-position:top left;
border-bottom: 1px solid #81824f;
}

#sidebarright-insidewrapper{
background-color: inherit;
background-image:url(images/sidebarrighttop.jpg);
background-size:100% auto;
background-repeat: no-repeat;
background-position:top left;
}

#sidebarrightcontent{
width: 100%;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding: 0;
color:#504d32;
overflow:hidden;
text-align:center;
}

/* ==================
     SIDEBAR STYLES    
   ================== */


#sidebarleftcontent li{
text-align:left;
}

#sidebarrightcontent li{
text-align:right;
}

#sidebarrightcontent p, #sidebarleftcontent p{
padding-left:1%;
padding-right:1%;
}

#sidebarrightcontent img, #sidebarleftcontent img, 
#sidebarrightcontent a img, #sidebarleftcontent a img{
text-align:center;
display:block;
margin:0 auto;
}

#searchform input {
  width: 80%;
  max-width: 256px;
}

/* ==================
      MAIN COLUMN    
   ================== */

#main{
padding:0px;
margin-top: 0;
margin-bottom: 10px;
background-color:#e4e489;
background-image:url(images/mainbg.jpg);
background-repeat:repeat-x;
background-position: 0px 12px;
}

#logos-top{
margin:0px;
padding:0px;
background-color:#f9f993;
background-image:url(images/maintopbg.gif);
background-position: 0px -3px;
height:11px;
border-bottom:1px solid #cccc7a;
border-left:1px solid #cccc7a;
border-right:1px solid #cccc7a;
}

#logos-bottom{
margin: 0;
padding: 0;
background-color: transparent;
background-image:url(images/maintopbg.gif);
background-position:0px -3px;
border-top:1px solid #cccc7a;
border-bottom:1px solid #cccc7a;
border-left:1px solid #cccc7a;
border-right:1px solid #cccc7a;
height:11px;
}

#logos-wrapper{
position: relative; 
height: 165px; left:0; 
background-color: transparent; 
border-left:1px solid #cccc7a; 
border-right:1px solid #cccc7a; 
padding: 0; 
}

.blogtitle{
float:left;
width: 40%;
min-width: 172px;
margin: 0;
padding: 0;
background-color:transparent;
background-image:url(images/erosblogtitlebg.jpg);
background-repeat:repeat-x;
background-position:top left;
}

.blogtitleimage{
float:right;
margin: 0;
}


.headerangels{
float:right;
width: 50%;
min-width:212px;
height:165px;
background-image:url(images/headerangels.jpg);
background-repeat:no-repeat;
background-position: 60% top;
margin: 0;
padding: 0;
}

.description{
position:absolute;
top:115px;
left: 10px;
font-size: 81.3%;
width: 55%;
}

.commentbottom_border{
margin: 0;
padding: 0;
background-color: transparent;
background-image:url(images/maintopbg.gif);
background-position:0px -3px;
border-top:1px solid #cccc7a;
border-bottom:1px solid #cccc7a;
height:11px;
}

.mainpost{
padding-top: 0;
padding-bottom: 0;
background-color: #e6e689;
border-left:1px solid #cccc7a;
border-right:1px solid #cccc7a;
}

.links{
padding-top: 0;
padding-bottom: 0;
background-color: #e6e689;
color:#504d32;
border-left:none;
border-right:none;
background-image:none;
overflow:hidden;
text-align:left;
}

.links h2 {
	font-size: 112.5%;
	margin-left: 4%;
	margin-right: 4%;
	margin-bottom: 1px;
	margin-top: .5em;
}

.links ul {
padding: 0;
margin:0;
}

.links li {
list-style-type: none;
padding-left: 8%;
padding-right: 4%;
margin: 0;
}

.display-ads{
padding-top: .5em;
padding-bottom: .5em;
background-color: #e6e689;
border-left:none;
border-right:none;
background-image:none;
text-align:left;
}


h2.posttitle{
margin-left:4%;
margin-top: 4px;
margin-bottom: 12px;
}

h2.pagetitle{
text-align: right;
margin-right:30px;
}

.post {
padding-top: 1px;
padding-bottom: 1px;
}

.date{
width: 95%;
text-align: right;
color: #7b7647;
padding-top: 4px;
font-weight: bold;
font-size: 75%;
}

.byline{
text-align: right;
margin-right:30px;
}


.postcontent{
margin-left:3%;
margin-right: 3%;
margin-top: 10px;
margin-bottom: 10px;
}

.postcontent ul{
margin-left: 4%;
margin-bottom: 0;
padding-bottom: 0;
}

blockquote{
display:block;
margin:0 3% .875em 3%;
background-color: #e6db84;
border-left: 8px solid #f2e78b;
border-bottom:1px solid #f2e78b;
padding-left: 1%;
padding-right: 2%;
padding-top: 1px;
padding-bottom: 1px;
}

blockquote p {
	line-height: 118.8%;
	margin: .688em 0em .688em 0em;
}


.postcontentTR{

background-color:#f5f69d;
background-image: url(images/postcontentTR.jpg);
background-position:top right;
background-repeat:no-repeat;
}


.postcontentTL{
background-color:transparent;
background-image: url(images/postcontentTL.jpg);
background-position:top left;
background-repeat:no-repeat;
border-bottom:1px solid #f2e78b;
}


.postcontentBL{
background-color:transparent;
background-image: url(images/postcontentBL.jpg);
background-position:bottom left;
background-repeat:no-repeat;
}


.postcontentBR{
border-bottom:1px solid #f2e78b;
background-color:transparent;
background-image: url(images/postcontentBR.jpg);
background-position:bottom right;
background-repeat:no-repeat;
padding-left: 2%;
padding-right: 2%;
padding-top: .25em;
padding-bottom: .75em;
}

p{
padding-left:10px;
padding-right:10px;
}

.postcontent img, .postcontent a img{
text-align:center;
display:block;
margin:0 auto;
border:1px solid #504d32;
}



.posted{
background-color: #e6e689;
text-align:center;
padding-top:0;
padding-bottom:8px;
font-size: smaller;
}

textarea#comment {
background-color: #feffb1;
color: #504d32;
border:1px solid #504d32;
width: 80%;
resize:vertical;
}

.alignleft{
float:left;
margin-left:20px;
}


.alignright{
float:right;
margin-right:20px;
}

input{
background-color: #feffb1;
color: #504d32;
border:1px solid #504d32;
}

ol{
margin:0px 0px 0px 10px;
padding:0px;
}

ol.commentlist li{
padding:0;
margin:0;
margin:20px 25px 20px 25px;
}

.alt .postcontentTR{
background-color: #e6db84;
background-image: url(images/postcommentTR.jpg);
background-position:top right;
background-repeat:no-repeat;

}


.alt .postcontentTL{
background-color:transparent;
background-image: url(images/postcommentTL.jpg);
background-position:top left;
background-repeat:no-repeat;
}


.alt .postcontentBL{
background-color:transparent;
background-image: url(images/postcommentBL.jpg);
background-position:bottom left;
background-repeat:no-repeat;
}


.alt .postcontentBR{
background-color:transparent;
background-image: url(images/postcommentBR.jpg);
background-position:bottom right;
background-repeat:no-repeat;
padding: 15px;
}

div#adspot_169526464.adspot {
border-spacing:0;
overflow:hidden;
background-color:#e4e489;
border-color:#000000;
border-width:1px;
border-style:solid;
width:300px !important;
font-size: 81.3%;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
margin-bottom: 5px;
}

div#adspot_169526464 a.adspot_link , div#adspot_169526464 a.adspot_adurl {
font-family:Arial;
font-size: 81.3%;
color:#6a6a41;
font-weight:normal;
margin:0;
}

div#adspot_169526464 a.adspot_link:link, div#adspot_3169526464 a.adspot_link:visited, div#adspot_169526464 a.adspot_adurl:link, div#adspot_169526464 a.adspot_adurl:visited {
color:#6a6a41;
font-size: 81.3%;
}
div#adspot_169526464 a.adspot_link:active, div#adspot_169526464 a.adspot_link:hover, div#adspot_169526464 a.adspot_adurl:active, div#adspot_169526464 a.adspot_adurl:hover { 
color:#6a6a41; 
}

div#adspot_169526464 * img {
border-width:0;
border-spacing:0;
padding-left: 0;
}

div#adspot_169526464 div.adspot_link {
width:300px !important;
text-align:center;
padding-bottom: 1px;
}

@media screen and (min-width: 1024px) { /* screens bigger than 1024px */

			.postcontent img {max-width: 512px;} /* mostly for larger animated .gifs */
		}

@media screen and (max-width: 1024px){

			.postcontent img {max-width: 420px;} /* 512px pics don't fit well at 1024 */

		}


@media screen and (max-width: 800px){

			.postcontent img {max-width: 480px;} /* no ad sidebar allows even bigger pics */
			#sidebarright {display: none;}
			#logos-top {display: none;}
			#logos-wrapper {display: none;}
			#logos-bottom {display: none;}
			#sidebar-dicewrapper {display: none;}
			#home-from-links {display: none;}
		}

@media screen and (max-width: 768px){

			.postcontent img {max-width: 460px;} /* no ad sidebar still allows bigger pics */
			#sidebarright {display: none;}
			#logos-top {display: none;}
			#logos-wrapper {display: none;}
			#logos-bottom {display: none;}
			#sidebar-dicewrapper {display: none;}
			#home-from-links {display: none;}

		}

@media screen and (max-width: 640px){

			.postcontent img {max-width: 300px;} 
			#sidebarright {display: none;}
			#logos-top {display: none;}
			#logos-wrapper {display: none;}
			#logos-bottom {display: none;}
			#sidebar-dicewrapper {display: none;}
			#home-from-links {display: none;}
		}


@media screen and (max-width: 480px){

			.postcontent img {max-width: 320px;}
			#sidebarright {display: none;}
			#sidebarleft {display: none;}
			#logos-top {display: none;}
			#logos-wrapper {display: none;}
			#logos-bottom {display: none;}
			#sidebar-dicewrapper {display: none;}
			#sidebar-tweetwrapper {display: none;}
			#home-from-links {display: none;}
			.date {display: none;}
			h2.posttitle{margin-top: 0; margin-bottom: 1px;}
			.postcontent {margin-top: 3px; padding-top: 0;}
			.postcontentBR {padding-top: 1px; padding-left: 1%; padding-right: 1%;}
		}


@media screen and (max-width: 360px){

			.postcontent img {max-width: 280px;}
			#sidebarright {display: none;}
			#sidebarleft {display: none;}
			#logos-top {display: none;}
			#logos-wrapper {display: none;}
			#logos-bottom {display: none;}
			#sidebar-dicewrapper {display: none;}
			#sidebar-tweetwrapper {display: none;}
			#home-from-links {display: none;}
			.date {display: none;}
			h2.posttitle{margin-top: 0; margin-bottom: 1px;}
			.postcontent {margin-top: 3px; padding-top: 0;}
			.postcontentBR {padding-top: 1px; padding-left: 1%; padding-right: 1%;}

		}

@media screen and (max-width: 320px){

			.postcontent img {max-width: 240px;}
			#sidebarright {display: none;}
			#sidebarleft {display: none;}
			#logos-top {display: none;}
			#logos-wrapper {display: none;}
			#logos-bottom {display: none;}
			#home-from-links {display: none;}
			.date {display: none;}
			h2.posttitle{margin-top: 0; margin-bottom: 1px;}
			.postcontent {margin-top: 3px; padding-top: 0;}
			.postcontentBR {padding-top: 1px; padding-left: 1%; padding-right: 1%;}
		}

@media screen and (max-width: 240px){

			.postcontent img {max-width: 160px;}
			#sidebarright {display: none;}
			#sidebarleft {display: none;}
			#logos-top {display: none;}
			#logos-wrapper {display: none;}
			#logos-bottom {display: none;}
			#home-from-links {display: none;}
			.date {display: none;}
			h2.posttitle{margin-top: 0; margin-bottom: 1px;}
			.postcontent {margin-top: 3px; padding-top: 0;}
			.postcontentBR {padding-top: 1px; padding-left: 1%; padding-right: 1%;}
		}

@media screen and (min-width: 1000px) { /* targeting 1024px desktop screens */

			#sidebarright {width: 320px;} /* four pixels extra */
		}


@media screen and (min-width: 640px) { 	/* screens 640px and larger */
					/* suppress links that are in sidebar */

			#navbar-dropdown-blog-links {display: none;} 
			#navbar-dropdown-archive-links {display: none;} 
			#navbar-dropdown-search {display: none;} 
	
		}



@media screen and (min-width: 801px) { /* screens bigger than 800px */

			#navbar {display: none;}
			#navbar-dropdown {display: none;}	
		}

@media screen and (min-width: 1112px) { /* targeting 1152px desktop screens */

			#sidebarright {width: 356px;} 
			#sidebarleft  {width: 202px;}
		}

@media screen and (min-width: 1240px) { /* targeting 1280px desktop screens */

			#sidebarright {width: 396px;}
			#sidebarleft  {width: 225px;}
		}

@media screen and (min-width: 1400px) { /* targeting 1440px desktop screens */

			#sidebarright {width: 446px;}
			#sidebarleft  {width: 252px;}
		}

@media screen and (min-width: 1560px) { /* targeting 1600px desktop screens */

			#sidebarright {width: 498px;}
			#sidebarleft  {width: 280px;}
		}


