/*  
Theme Name: 100 Poems
Theme URI: http://100-poems.com/
Author: Ron Carnell

Update 8-7-2014 get rid of responsive code & add bigger billboard at end of some pages
Update Dec 2013 to responsive code

*/

body {
	font: 100% "Trebuchet MS", "Lucida Sans Unicode", Arial, sans-serif;
	color: #036;
	color: #555;
	background-color: #eee;
	text-align: center;
	margin: 0;
	padding: 0; 
}

a:link {
	color: #369;
}
a:visited {
	color: #333;
}
a:hover, 
a:active {
	color: #036;
	text-decoration: none;
}

/* page includes EVERYTHING in a single container */
#old-page {
	position: relative;
	width: 760px;
	width: 980px;
	margin: 20px auto 50px auto;
	padding: 0;
	background: #fff url(http://cdn.100-poems.com/logoback.jpg) no-repeat;
/*	background: #fff url(http://fav.pip98.com/logoback.jpg) no-repeat;*/
	border: 1px solid #0f0;
	text-align: left;
}

#universe 		{ width: 100%;padding:0; }
#site-wrapper {
	width: 980px;
	width: 1020px;
	margin: 20px auto 50px auto;
	background: #fff url(http://cdn.100-poems.com/logoback.jpg) no-repeat;
	border: 1px solid #555;
	text-align: left;
}
	#head-wrapper 	{}
	#page {
		position: relative;
		width: 960px;
		width: 1000px;
		margin: 0 auto;
		padding: 0;
	}
	#primary 		{float: left;margin: 0 -300px 0 0;width: 100%;}
/*	#content 		{margin: 0 180px 0 10px;width: 760px;}*/
	#secondary		{float: right;overflow: hidden;width: 160px;margin-right: 5px;clear: right;}
	#footer 		{clear: both;width: 100%;}

#content {
/*	padding: 0 0 0 20px;*/
/*	margin: 0;*/
	width: 760px;
	margin: 0 0 0 20px;
/*	border:1px dashed #eee;*/
	font-size: 1.2em;
	line-height: 130%;
/*	text-align: justify;*/
}
#secondary {
/*	border:1px dashed #eee;*/
}


/* logo and header at top of page */
/*#header {*/
#head-wrapper {
	text-align: right;
	height: 280px;
	padding: 0;
}
	#head-wrapper a {
		display: block;
		margin: 0;
		height: 160px;
		padding: 4px 4px 0 0;
		font: .7em "Trebuchet MS", "Lucida Sans Unicode", Arial, sans-serif;
		color: #369;
		text-decoration: none;
	}

#banner728 {
	text-align: center;
	height: 90px;
	margin: 30px 0 0 0;
}
/* 10/23/2011 new class for leaderboard in comments */
/*
#bannercmt {
	text-align: center;
	height: 92px;
	padding: 15px 0;

		width: 970px;
		height: 90px;
	margin: 20px auto;
	border:1px solid #f00;
}
*/
#banner468 {
	text-align: right;
	height: 60px;
	margin: 20px 0;
}
/*
#skyscraper {
	margin: 40px auto;
}
*/
.endad728x90 {
		width: 970px;
		height: 90px;
	margin: 20px auto;
	border:1px solid #f00;
}
#GoogleLinks {
	margin: 0 auto 18px auto;
	background-color: #fff;
	border-color: #101020 #808090 #808090 #101020;
	border-style: solid;
	border-width: 3px;
	padding: 12px;
	text-align: center;
}

#pagehead {
	padding: 0 0 0 20px;
	margin: 0;
}
	#pagehead h1 {
		font-size: 1.8em;
	}
		/* page numbers in header */
		#pagehead h1 sup {
			font-size: 60%;
			color: #779;
		}
	#pagehead h2 {
		font-size: 1.6em;
	}
	#pagehead a:link,
	#pagehead a:visited {
		color: #036;
		text-decoration: none;
	}
	#pagehead a:hover,
	#pagehead a:active {
		color: #369;
		text-decoration: underline;
	}


/* breadcrumbs on poems pages */
div.breadcrumb {
	clear: both;
	width: 560px;
	width: 100%;
	margin: 0 0 5px 0;
	text-align: right;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 75%;
	color: #4e4f80;
}
	div.breadcrumb a {
		margin: 0 20px;
		color: #4e4f80;
		text-decoration: underline;
	}
	div.breadcrumb a:visited {
		color: #4e4f80;
		text-decoration: underline;
	}
	div.breadcrumb a:hover,
	div.breadcrumb a:active {
		color: #4e4f80;
		text-decoration: none;
	}

/* displaying the poetry */
#poemborder {
	width: 550px;
	width: 92%;
	background-color: #069;
	border-color: #808090 #101020 #101020 #808090;
	border-style: solid;
	border-width: 3px;
	text-align: center;
	vertical-align: top;
	margin: 0;
	padding: 8px;
}
#poembox {
	padding: 0 5px 40px 5px;
	margin: 0 0 12px 0;
	background-color: #efeff4;
	border-color: #101020 #808090 #808090 #101020;
	border-style: solid;
	border-width: 3px;
	text-align: center;
	font-family: Verdana,Arial, Helvetica, sans-serif;
	font-size: 1em; 
	font-weight: normal; 
	text-align: center;
	color: #101040;
}
	#poembox .poemtitle {
		margin: 20px 0 4px 0;
		padding: 0 20px;
		font-size: 1.5em;
		font-weight: bold; 
	}
	#poembox .byline {
		margin: 0 0 30px 0;
		font-size: .8em;
	}
	#poembox table.poemtext {
		margin: 0 auto;
	}
		.PoemTextLeft {
			text-align: left;
		}
		.PoemTextCenter {
			text-align: center;
		}
		.PoemTextSmall {
			font-size: .85em;
		}

#rpanel {
	background-color: #6388AD;
	border-color: #cacada #101020 #101020 #cacada;
	border-style: solid;
	border-width: 2px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: .9em; 
	color: #efeff4; 
	text-align: center;
	padding: 5px 5px 6px 5px;
}
	#rpanel h1 {
		font-size: 1.2em;
	}
	#rpanel ul {
		margin: 20px 0;
		padding: 0;
	}
		#rpanel ul li {
			clear: both;
			list-style-type: none;
			margin: 0;
			padding: 5px 0;
			text-align: left;
		}
	#rpanel .rbutton {
		float: left;
		width: 120px;
	}
	/* response panel buttons */
	#rpanel .rbutton a {
		display: block;
		width: 90px;
		margin: 0 0 0 10px;
		text-align: center;
		white-space: nowrap;
		padding: 6px 3px 2px 3px;
		border-top: 1px solid #fff;
		border-right: 2px solid #000;
		border-bottom: 2px solid #000;
		border-left: 1px solid #fff;
		font-family: "Comic Sans MS",arial, helvetica, sans-serif;
	}
		#rpanel .rbutton a:link,
		#rpanel .rbutton a:visited {
			color: #003;
			background-color: #ccc;
			text-decoration: none;
		}
		#rpanel .rbutton a:hover {
			color: #ff8c00;
			background-color: #eeeef0;
			text-decoration: underline;
		}
		#rpanel .rbutton a:active {
			color:#fff;
			background-color: #ff8c00;
		}

	#rpanel .copyright {
		width: 96%;
		margin: 0 auto;
		background-color: #efeff4;
		border-color: #101020 #808090 #808090 #101020;
		border-style: solid;
		border-width: 3px;
		text-align: left;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: .7em;
		color: #4E4F80; 
		padding: 5px;
		line-height: 1.2em;
	}


/* comments from visitors */
#visitpage,
#visitors {
	width: 735px;
	width: 100%;
	margin: 30px 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 90%;
}
#visitpage .vHead,
#visitors .vHead {
	width: 96%;
	margin: 0;
	padding: 4px 4px 4px 12px;
	font-size: 110%; 
	font-weight: bold;
	color: #efeff4; 
	background-color: #069;
	border-color: #808090 #101020 #101020 #808090;
	border-style: solid;
	border-width: 3px;
}
	#visitpage ul,
	#visitors ul {
		width: 100%;
		margin: 10px 0;
		padding: 0;
	}
		#visitpage ul li,
		#visitors ul li {
			clear: both;
			list-style-type: none;
			margin: 0;
			padding: 5px 0;
			font-size: .9em;
		}
		#visitpage .alt,
		#visitors .alt {
			background-color: #eee;
		}
#visitpage .name,
#visitors .name {
	float: left;
	width: 150px;
	width: 14%;
	padding: 5px 0px 0 0;
	text-align: right;
	font-weight: bold;
}
#visitpage .comment,
#visitors .comment {
	width: 540px;
	width: 80%;
	margin: 0 0 0 16%;
	padding: 5px 0 0 0;
}
#visitpage .vNote,
#visitors .vNote {
	width: 690px;
	width: 100%;
	margin: 0 0 20px 0;
	padding: 0 0 0 20px;
}

/* comments are more narrow on the separate comment page */
#visitpage {
	width: 585px;
	width: 90%;
}
#visitpage .vHead,
#visitpage .vNote {
	width: 540px;
	width: 100%;
}
	#visitpage ul {
		width: 560px;
		width: 100%;
	}
#visitpage .comment {
	width: 390px;
	width: 80%;
	margin: 0 0 0 18%;
	padding: 5px 0 0 0;
}

/* page numbers at the bottom of category index pages */
#pages {
	margin: -20px 0 40px 60px;
	padding: 0;
	width: 650px;
	max-width:100%;
}
	#pages div.logo {
		width: 98px;
		height: 68px;
		float: left;
		padding: 0;
	}
	#pages h1.title {
		font-size: 1.5em;
		padding: 0;
		margin: 0 0 0 110px;
	}
		#pages h1.title sup {
			font-size: 60%;
			color: #779;
		}
		#pages h1.title a:link,
		#pages h1.title a:visited {
			color: #036;
			text-decoration: none;
		}
		#pages h1.title a:hover,
		#pages h1.title a:active {
			color: #369;
			text-decoration: underline;
		}
	#pages div.links {
		font-size: 1.1em;
		margin: 0 0 0 120px;
	}	
		#pages div.links a {
			color: #036;
			padding: 0 26px;
		}
			#pages div.links a:link {
				text-decoration: underline;
			}
			#pages div.links a:visited {
				color: #667;
			}
			#pages div.links a:hover,
			#pages div.links a:active {
				text-decoration: none;
			}

#poemlist {
	width: 565px;
	width: 100%;
	margin: 20px 0 0;
	padding: 0;
	background: #fff url(http://cdn.100-poems.com/quill.jpg) no-repeat 200px 60px;
}
	#poemlist li {
		clear: both;
		list-style-type: none;
		margin: 0;
		padding: 15px 0;
	}
	#poemlist li.ad {
		padding: 25px 0 10px 80px;
	}
	#poemlist .count {
		float: left;
		width: 36px;
		font-size: .9em;
		text-align: right;
		padding: 0 2px 0 0;
		font-weight: bold;
		color: #800;
	}
	#poemlist .pitem {
		float: right;
		width: 520px;
		width: 100%;
	}
		#poemlist .pitem a {
			font-size: 1.4em;
			color: #036;
		}	
			#poemlist .pitem a:link {
				text-decoration: none;
			}
			#poemlist .pitem a:visited {
				text-decoration: underline;
				color: #99a;
			}
			#poemlist .pitem a:hover, 
			#poemlist .pitem a:active {
				text-decoration: underline;
			}
	#poemlist .pauthor {
		float: right;
		text-align: right;
		width: 150px;
		padding: 0 0 0 6px;
		font-size: .9em;
	}
	#poemlist .pdesc {
		padding: 0;
		font-size: .8em;
		clear: both;
	}
/* actual content, in left hand column */

/*
#content {
	padding: 0 0 0 20px;
	margin: 0;
	width: 565px;
	width: 100%;
	line-height: 130%;
	text-align: justify;
}
*/

/* new add units for responsive design 06/13/2014 */
/* changed to non-responsive on 8/7/2014 */

	#content .ad336x280 {
		float: right;
		width: 336px;
		height: 280px;
		margin: 0 0 4px 15px;
	}
	/* replace endad728x90 at bottom of page */
	#content .ad970x90 {
		width: 970px;
		height: 90px;
		margin: 20px auto;
	}
	#content .ad970x250 {
		width: 970px;
		height: 250px;
		margin: 20px auto;
	}
	/* replace skyscrapter */
	#skyscraper {
		width: 160px;
		height: 600px;
		margin: 40px auto;
	}
	#bannercmt {
		width: 970px;
		height: 90px;
		margin: 20px auto;
	}
	#billboardcmt {
		width: 970px;
		height: 250px;
		margin: 20px auto;
	}

/* end new add codes */


/*
	#content .ad336x280 {
		float: right;
		width: 336px;
		height: 280px;
		margin: 0px 0 4px 12px;
		padding: 6px;
	}
*/
	#content .ad300x250 {
		float: right;
		width: 300px;
		height: 250px;
		margin: 0px 0 4px 12px;
		padding: 6px;
	}

	#content p.origcat {
		font-size: .9em;
		font-style: italic;
		text-align: left;
		color: #555;
	}
		#content p.origcat a:link, 
		#content p.origcat a:visited {
			color: #555;
			text-decoration: none;
		}
		#content p.origcat a:hover, 
		#content p.origcat a:active {
			color: #005;
			text-decoration: underline;
		}
	.dropcap {
		float:left;
		color:#555;
		font-size:5em;
		line-height:.7em;
		padding: .05em .05em 0 0;
		font-family: "Times New Roman", Times, serif;
	} 


#secondary {
/*
	position: absolute;
	top: 150px;
	right: 5px;
	float:right;
	width: 160px;
*/
	text-align: center;
	margin: 0;
	margin-top: -140px;
	padding: 0;
	font-family: verdana, aria, helvetica, sans-serif;
	font-size: 70%;
}
	#secondary h1, #secondary h2, #secondary h3 {
		width: 100px;
		margin: 0px auto 10px;
	    font: 180% "Comic Sans MS", Arial, Sans-Serif;
	}

	#secondary h1 {
		font-size: 180%;
	}
	#secondary h2 {
		font-size: 140%;
		background: #fff url(http://cdn.100-poems.com/countdown.jpg) no-repeat;
/*		background: #fff url(http://fav.pip98.com/countdown.jpg) no-repeat;*/
		width: 136px;
		height: 130px;
		text-indent: -5000px;
	}
	#secondary h3 {
		font-size: 110%;
	}

	.mainmenu {
		border-color: #FFFADD #000 #000 #FFFADD ;
		border-style: solid;
		border-width: 2px;
		background: #fff url("http://cdn.100-poems.com/menuback.jpg") repeat-y;
/*		background: #fff url("http://fav.pip98.com/menuback.jpg") repeat-y;*/
	}

	#secondary ul {
		margin: 0 auto;
		padding: 12px 3px 5px 12px;
		width: 136px;
		text-align: left;
	}
		#secondary ul li {
			list-style-type: none;
			list-style-image: none;
			margin-bottom: 15px;
			margin-bottom: 25px;
		}
		#secondary ul li.title {
			font-weight: bold;
			color: #008;
		}
			#secondary ul li a {
				color: #000;
				text-decoration: underline;
			}
				#secondary ul li a:link {
					color: #000;
				}
				#secondary ul li a:visited {
					color: #333;
				}
				#secondary ul li a:hover,
				#secondary ul li a:active {
					color: #008;
					text-decoration: none;
				}

#footer {
	clear: both;
	margin: 0 auto;
	padding: 8px;
	font-size: .7em;
	color: #888;
}
	#footer p {
		padding: 0;
		text-align: center;
	}
	#footer a:link, 
	#footer a:visited {
		color: #aaa;
		text-decoration: none;
		background: transparent;
	}
	#footer a:hover, 
	#footer a:active {
		background: #fff url("http://cdn.100-poems.com/top.gif") no-repeat center center;
	}

#sitemeter {
	padding: 0;
	margin: 20px 0;
}

.alt {
	border: 1px solid #ddd;
	padding: 12px;
}




.highlight {
	background-color: #ffa;
}

form {
	background: #fff url("http://cdn.100-poems.com/formback.jpg") no-repeat center top;
	border-color: #ccc #000 #000 #ccc ;
	border-style: solid;
	border-width: 2px;
	padding: 10px 10px 10px 10px;
	font-family: arial, verdana, helvetica, sans-serif;
	color: #036;
	font-size: .9em;
	width: 520px;
	margin: 0 auto;
}
	form p {
		clear: both;
		line-height: 1.1em;
		font-size: .9em;
		padding: 0px 20px 0 60px;
	}
fieldset {
	border: none;
}
legend {
	font-size: 1.4em;
	padding: 0 36px 2em 0;
	margin: 0;
	background: url("http://cdn.100-poems.com/rainbow.gif") no-repeat right top;
	color: #005;
}

div.row {
	clear: both;
	margin: 0 0 12px 0;
}

div.row span.label {
	float: left;
	width: 140px;
	text-align: right;
	font-weight: bold;
}

div.row span.formw {
	margin: 0 0 0 6px;
	text-align: left;
}

.explain {
	width: 490px;
	font-size: .9em;
	padding: 10px 40px 0 55px;
}


ul#faq {
	padding: 0px 3px 0px 60px;
	margin: 20px auto 50px;
}
	ul#faq li {
		margin-bottom: 20px;
		/*border: 1px solid #000;*/
	}
		ul#faq li a {
			color: #036;
			text-decoration: none;
		}
			ul#faq li a:link {
				color: #036;
			}
			ul#faq li a:visited {
				color: #333;
			}
			ul#faq li a:hover,
			ul#faq li a:active {
				color: #008;
				text-decoration: underline;
			}

h2.faq {
	font-size: 1.2em;
	width: 550px;
	padding: 5px 0 3px 15px;
	background-color: #9cf;
	border-bottom: 1px solid #008;
}


/* this is the default for most bigger screens */
@media (min-device-width: 320px){
	/* hidding from IE8 and under */

	#site-wrapper 	{width: 100%;max-width: 1020px;}
	#page 			{width: 100%;max-width: 1000px;margin:0 auto;}
	#content		{width: 76%;max-width: 760px;}
	#secondary		{width: 17%;max-width: 160px;margin-right: 2%;}
}

@media (max-width: 980px) {
	#site-wrapper 	{
		width:96%;
		margin: 20px auto 50px;
	}
/*	#secondary		{border:1px dashed #f00;}*/
	#content		{width: 73%;max-width: 760px;}
	#secondary		{width: 20%;max-width: 160px;}

/* removed 8/7/14
	#content .ad970x90,
	#bannercmt {
		width: 728px;
		height: 90px;
	}
*/
}

@media (max-width: 820px) {
/*	#secondary		{border:1px solid #f00;}*/
	#content {
		font-size: 1em;
	}
	#content		{width: 70%;max-width: 640px;}
	#secondary		{width: 23%;max-width: 160px;margin-top:-80px;}
	#poemlist {
		background: #fff url(http://cdn.100-poems.com/quill.jpg) no-repeat 100px 60px;
	}
}


@media (max-width: 720px) {
/*	#secondary		{border:1px solid #0f0;}*/
	body, input, textarea {font-size: .9em;}
	#site-wrapper {
		background: #fff url(http://cdn.100-poems.com/logoback-small.jpg) no-repeat;
	}
	#content		{width: 68%;max-width: 540px;}
	#secondary		{width: 25%;max-width: 160px;}
	#content .ad336x280 {
		float: none;
	}
	#poemlist {
		background: #fff url(http://cdn.100-poems.com/quill.jpg) no-repeat 10px 60px;
	}
}

@media (max-width: 580px) {
/*	#secondary		{border:1px solid #0f0;}*/
	#content		{width: 94%;max-width: 560px;text-align: left;}
	#primary 		{float: none;margin: 0;width: 100%;}
	#secondary {
		font-size: 1.2em;
		margin: 0 auto;
		width: 80%;
		max-width: 80%;
		padding-right: 5px; 
	}
/*
	#content .ad336x280 {
		float: right;
	}
*/
	#secondary h2 {
		display: none;
	}
	#secondary ul {
		margin: 0;
		width: 90%;
	}
/* removed 8/7/14
	#skyscraper {
		width: 300px;
		height: 600px;
		margin: 20px auto;
	}
	#content .ad970x90,
	#bannercmt {
		width: 468px;
		height: 60px;
	}
*/
}

@media (max-width: 540px) {
/*
	#content .ad336x280 {
		float: none;
	}
*/
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
	#page, div.menu, #footer-html, #footer-info, #site-info {width:310px;}
	#content {margin: 0 2.2%;width: 300px;}
	#secondary		{margin: 0 1%;width: 100%}

/*  removed 8/7/2014
	#content .ad336x280 {
		width: 300px;
		height: 250px;
	}
	#content .ad970x90,
	#bannercmt {
		width: 320px;
		height: 100px;
	}
*/
}

/* =Print
----------------------------------------------- */
@media print {
	body {background: none !important;font-size: 10pt;}
	
	footer.entry-meta a[rel=bookmark]:link:after,
	footer.entry-meta a[rel=bookmark]:visited:after {
		content: " [" attr(href) "] "; /* Show URLs */
	}
	#page {
		clear: both !important;
		display: block !important;
		float: none !important;
		max-width: 100%;
		position: relative !important;
	}
	#primary {
		float: left;
		margin: 0;
		width: 100%;
	}
	#content {
		margin: 0;
		width: auto;
	}
}