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

   reset.css
   * Resets default browser CSS.

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

html {
    margin:0;
    padding:0;
    border:0;
}

body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}

/* This helps to make newer HTML5 elements behave like DIVs in older browers */
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
    display:block;
}

/* Line-height should always be unitless! */
body {
    line-height: 1.5;
    background: white;
}

/* Tables still need 'cellspacing="0"' in the markup. */
table {
    border-collapse: separate;
    border-spacing: 0;
}
/* float:none prevents the span-x classes from breaking table-cell display */
caption, th, td {
    text-align: left;
    font-weight: normal;
    float:none !important;
}
table, th, td {
    vertical-align: middle;
}

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ''; }
blockquote, q { quotes: "" ""; }

/* Remove annoying border on linked images. */
a img { border: none; }

/* Remember to define your own focus styles! */
:focus { outline: 0; }


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

   typography.css
   * Sets up some sensible default typography.

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

html { font-size: 100%; /* IE hack */ }

body {
    font-size:62.5%;
    font-family: Arial, Helvetica, sans-serif;
    color: #555;
}

/* Headings
-------------------------------------------------------------- */

/*h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #111; }*/
h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #555; }

h1 { font-size: 2em; line-height: 1; margin-bottom: 0.5em; }
h2 { font-size: 1.8em; margin-bottom: 0.75em; }
h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
h6 { font-size: 1em; font-weight: bold; }

h1.byline { font-size: 1.5em; }

h1 img, h2 img, h3 img,
h4 img, h5 img, h6 img {
    margin: 0;
}


/* Text elements
-------------------------------------------------------------- */

p           { margin: 0 0 1.5em; }
/*
	These can be used to pull an image at the start of a paragraph, so
	that the text flows around it (usage: <p><img class="left">Text</p>)
 */
.left  			{ float: left !important; }
p .left			{ margin: 1.5em 1.5em 1.5em 0; padding: 0; }
.right 			{ float: right !important; }
p .right 		{ margin: 1.5em 0 1.5em 1.5em; padding: 0; }

a:focus,
a:hover     { color: #09f; }
a           { color: #444; text-decoration: underline; }

a.samepage  { text-decoration: none; }

blockquote  { margin: 1.5em; color: #666; font-style: italic; }
strong,dfn	{ font-weight: bold; }
em,dfn      { font-style: italic; }
sup, sub    { line-height: 0; }

abbr,
acronym     { border-bottom: 1px dotted #666; }
address     { margin: 0 0 1.5em; font-style: italic; }
del         { color:#666; }

pre         { margin: 1.5em 0; white-space: pre; }
pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; }


/* Lists
-------------------------------------------------------------- */

li ul,
li ol       { margin: 0; }
ul, ol      { margin: 0 1.5em 1.5em 0; padding-left: 1.5em; }

ul          { list-style-type: disc; }
ol          { list-style-type: decimal; }

dl          { margin: 0 0 1.5em 0; }
dl dt       { font-weight: bold; }
dd          { margin-left: 1.5em;}


/* Tables
-------------------------------------------------------------- */

/*
	Because of the need for padding on TH and TD, the vertical rhythm
	on table cells has to be 27px, instead of the standard 18px or 36px
	of other elements.
 */
table       { margin-bottom: 1.4em; }
th          { font-weight: bold; }
thead th    { background: #c3d9ff; }
th,td,caption { padding: 4px 10px 4px 5px; }

/* Misc classes
-------------------------------------------------------------- */

.small      { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
.large      { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }
.hide       { display: none; }

.quiet      { color: #666; }
.loud       { color: #000; }
.highlight  { background:#ff0; }
.added      { background:#060; color: #fff; }
.removed    { background:#900; color: #fff; }

.first      { margin-left:0; padding-left:0; }
.last       { margin-right:0; padding-right:0; }
.top        { margin-top:0; padding-top:0; }
.bottom     { margin-bottom:0; padding-bottom:0; }

span.dropcap {
    float:left;
    color:#333;
    font-size:5em;
    font-size:6em;
    line-height:.7em;
    padding: .05em .0em 0 0;
    padding: 0;
    font-family: "Times New Roman", Times, serif;
}


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

   forms.css
   * Sets up some default styling for forms
   * Gives you classes to enhance your forms

   Usage:
   * For text fields, use class .title or .text
   * For inline forms, use .inline (even when using columns)

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

/*
	A special hack is included for IE8 since it does not apply padding
	correctly on fieldsets
 */
label       { font-weight: bold; }
fieldset    { padding:0 1.4em 1.4em 1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; }
legend      { font-weight: bold; font-size:1.2em; margin-top:-0.2em; margin-bottom:1em; }

fieldset, #IE8#HACK { padding-top:1.4em; }
legend, #IE8#HACK { margin-top:0; margin-bottom:0; }

/* Form fields
-------------------------------------------------------------- */

/*
  Attribute selectors are used to differentiate the different types
  of input elements, but to support old browsers, you will have to
  add classes for each one. ".title" simply creates a large text
  field, this is purely for looks.
 */

input[type=text], input[type=password],
input.text, input.title,
textarea {
    background-color:#fff;
    border:1px solid #bbb;
}
input[type=text]:focus, input[type=password]:focus,
input.text:focus, input.title:focus,
textarea:focus {
    border-color:#666;
}
select { background-color:#fff; border-width:1px; border-style:solid; }

/*
  This is to be used on forms where a variety of elements are
  placed side-by-side. Use the p tag to denote a line.
 */
form.inline { line-height:3; }
form.inline p { margin-bottom:0; }


/* Success, info, notice and error/alert boxes
-------------------------------------------------------------- */

.error,
.alert,
.notice,
.success,
.info 			{ padding: 0.8em; margin-bottom: 1em; border: 2px solid #ddd; }

.error, .alert { background: #fbe3e4; color: #8a1f11; border-color: #fbc2c4; }
.notice     { background: #fff6bf; color: #514721; border-color: #ffd324; }
.success    { background: #e6efc2; color: #264409; border-color: #c6d880; }
.info 			{ background: #d5edf8; color: #205791; border-color: #92cae4; }
.error a, .alert a { color: #8a1f11; }
.notice a   { color: #514721; }
.success a  { color: #264409; }
.info a			{ color: #205791; }


/* Structure - December 2013 - new Responsive structure
-------------------------------------------------------------- */

body {
    background-color: #6288ac;
}

/* this contains #site so we don't lose the box shadow at #site shrinks */
#universe {
    width: 1040px;
    margin: 30px auto;
    padding: 0 40px;
}

/* visible portion of web page */
#site {
    margin: 0 auto;
    background-color: #fbfbfb;
    border:1px solid #555;
    -webkit-box-shadow: 10px 10px 33px 0px rgba(0,0,0,1);
    -moz-box-shadow: 10px 10px 33px 0px rgba(0,0,0,1);
    box-shadow: 10px 10px 33px 0px rgba(0,0,0,1);

}
/* entire masthead area */
#site-masthead {
}
/* everything between site-masthead and site-footer */
#main {
    clear: both;
    margin: 50px 20px 0;
}
/* right column (menu) is floated */
#main-sidebar {
    width: 168px;
    margin: 0 0px;
    float: right;
}
/* left column */
#main-content {
    margin-right: 180px;
    font-size: 1.6em;	/* 16px */
}
/*
			.ad336x280 {
				float: right;
				margin: 0 0 .5em 1em;
			}
*/
/* first line of site - inside site-masthead */
#topline {
    width: 100%;
    padding: 8px 0 0;
    background: url(/images/cdn/wavey.gif) no-repeat 99% 0px;
    font-family: Verdana, Arial, sans-serif;
    font-size: .9em;
}
#topline a:link,
#topline a:visited {
    color: #4E4F6F;
    text-decoration: underline;
}
#topline a:active,
#topline a:hover {
    color: #006;
}
#topline div.login {
    float: right;
    width: 180px;
    text-align: right;
    padding-right: 32px;	/* leave room for icon */
    visibility: hidden;		/* keep it hidden until the code is ready */
}
#topline div.leadin {
    width: auto;
    margin: 0 190px 0 0;
    text-align: left;
    text-indent: 20px;
    font-style: italic;
    color: #4E4F6F;
}

/* immediately follow topline in site-masthead area */

/* small logo to the left of leaderboard ad */
#smLogo {
    margin: -5px 760px 0 20px;
    text-align: center;
}

/* #header holds leaderboard ad and our search box */
#masthead-header {
    width: 756px;
    float: right;
    margin: 10px 0 0 0;
    text-align: center;
}
#masthead-header div.adBanner {
    width: 738px;
    text-align: center;
    margin: 0 auto;
    padding: 3px 0;
}
#masthead-header div.tagbox {
    width: 738px;
    margin: 0 auto;
}
#masthead-header div.tag {
    width:560px;
    text-align: center;
    font: bold italic 2em "Comic Sans MS", Arial, sans-serif;
    color: #701010;
}
#masthead-header div.quicksearch {
    text-align: right;
    float:right;
    width:170px;
    white-space: nowrap;
}
#masthead-header div.quicksearch form {
    margin: 4px 0 0 0;
    text-align: right;
}
#masthead-header div.quicksearch input.searchterms {
    width: 120px;
    font: 1.4em Arial, sans-serif;
    color: #000;
    background: #fff url(/images/cdn/poetry-search.gif) no-repeat;
}
#masthead-header div.quicksearch input.searchbutton {
    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;
    width: 30px;
}

/* inside #sidebar */
#menu {
    width: 160px;
    height: 368px;
    padding: 0;
    margin: 0;
    background: transparent url(/images/cdn/menu.png) no-repeat;
    position: relative;
}
#menu a:link,
#menu a:visited {
    color: #ddd;
    text-decoration: none;
}
#menu a:active,
#menu a:hover {
    color: #fff;
    text-decoration: underline;
}
#menu #menu0 {
    text-align: left;
    height: 100px;
}
#menu #menu0 a {
    width: 120px;
    height: 92px;
    display: block;		/* the whole logo has to be clickable */
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    padding: 7px 0 0 14px;
}
#menu #menu0 a:link,
#menu #menu0 a:visited {
    color: #000;
    text-decoration: none;
}
#menu #menu0 a:active,
#menu #menu0 a:hover {
    color: #00a;
    text-decoration: underline;
}

/* poetry categories - big and bold */
#menu #menu1 {
    height: 135px;
}
#menu #menu1 a {
    font-weight: bold;
    font-size: 14px;
}
#menu #menu1 a:link,
#menu #menu1 a:visited {
    color: #eef;
    text-decoration: none;
}
#menu #menu1 a:active,
#menu #menu1 a:hover {
    color: #fff;
    text-decoration: underline;
}

#menu #menu1 a.m1 { position:absolute; top:105px; left:34px; }
#menu #menu1 a.m2 { position:absolute; top:125px; left:39px; }
#menu #menu1 a.m3 { position:absolute; top:145px; left:17px; }
#menu #menu1 a.m4 { position:absolute; top:165px; left:32px; }
#menu #menu1 a.m5 { position:absolute; top:185px; left:35px; }

/* misc links - little and in two columns */
#menu #menu2 {
    height: 100px;
}
#menu #menu2 a {
    font-size: 11px;
    border: none;
}
#menu #menu2 a.m1 { position:absolute; top:222px; left:33px; }
#menu #menu2 a.m2 { position:absolute; top:242px; left:34px; }
#menu #menu2 a.m3 { position:absolute; top:262px; left:30px; }

#menu #menu2 a.m5 { position:absolute; top:222px; left:98px; }
#menu #menu2 a.m6 { position:absolute; top:242px; left:96px; }
#menu #menu2 a.m7 { position:absolute; top:262px; left:96px; }

/* secondary links - little bigger and bold */
#menu #menu3 {
    height: 40px;
}
#menu #menu3 a {
    font-size: 12px;
    font-weight: bold;
}
#menu #menu3 a:link,
#menu #menu3 a:visited {
    color: #eef;
    text-decoration: none;
}
#menu #menu3 a:active,
#menu #menu3 a:hover {
    color: #fff;
    text-decoration: underline;
}

#menu #menu3 a.m1 { position:absolute; top:294px; left:38px; }
#menu #menu3 a.m2 { position:absolute; top:308px; left:18px; }

/* sits below our right floated main menu */
.menuextra {
    width: 160px;
    text-align: center;
    margin: 0 auto;
    font-size: 1.2em;
}

#site-footer {
    clear: both;
    margin: 30px 0 0;
    padding: 0;
    font-size: 1em;
    color: #888;
}
#site-footer p,
#site-footer div {
    padding: 0;
    text-align: center;
}
#site-footer div {
    margin-bottom: 20px;
}
#site-footer a:link,
#site-footer a:visited {
    color: #aaa;
    text-decoration: none;
}
#site-footer a:hover,
#site-footer a:active {
    color: #333;
    text-decoration: underline;
}
#sitemeter {
    padding: 0;
    margin: 20px 0;
}

/****************************************************
 *
 *  Advertising
 *
 ***************************************************/

/* Large rectange ad embedded in content - primarily used for AdSense */
.mainRecTop {
    float: right;
    width: 336px;
    height: 280px;
    /*	margin: 7px 0 4px 10px;*/
    margin: 0 0 .5em 1em;
    padding: 6px;
}
/* when there is no mainRecTop we'll have a category pic instead */
#catpic {
    float: right;
    margin: 0 20px 8px 12px;
}
#catpic img {
    border: 1px solid #aaa;
}
/* small ad block in subcategory menu - currently used to promote 100-poems.com */
.CategoryAd2015 {
    background: #fff;
    margin: 20px auto;
    width: 602px;
    max-width: 96%;
    border:1px solid #000;
}
.CategoryAd2015 h3 {
    text-align: center;
    margin: -80px auto 6px;
}
.CategoryAd2015 p {
    margin: 0 18px 20px;
    /*		padding: 0 12px;*/
}
.CategoryAd2015 img {
    max-width: 100%;
}
.CategoryAd {
    /*	clear: both;*/
    margin: 20px 50px 20px 100px;
    padding: 10px;
    border: 1px solid #000;
    background: #fff;
    font-size: .8em;
}
.CategoryAd h3 {
    text-align: center;
    margin: 0px auto 6px;
}
.CategoryAd p {
    margin: 0;
}
.CategoryAd img {
    float: right;
    margin: 0 10px 0 15px;
}

/* advertisement after subcat menu - currently bluehost ad */
.adInsert {
    text-align:center;
}

/*      the following advertising blocks will be found in their respective sections

	#iconlegend .adPages {

	#AdBottom {

*/
/****************************************************
 *
 *  Poetry Category pages
 *
 ***************************************************/

.sharing {
    height: 25px;
    margin: 18px auto;
    text-align: center;
}
.sharing .shareicons {
    max-width: 420px;			/* width = sum of button widths */
    margin: 0 auto;
}

h1.headr {
    color: #6288ac;
    font-size: 2.6em;
    margin: 0.25em;
    border-bottom: 2px solid #6288ac;
}
h1.headr sup {
    font-size: .5em;
}

.poemlist {
    font-size: 1.2em;
    margin: 0 0 22px 0;
    padding: 0;
    background: transparent url(/images/cdn/quill.png) no-repeat 80% 60px;
}
.poemlist a {
    font-size: 1.2em;
}
.poemlist a:link {
    color: #555;
    text-decoration: none;
}
.poemlist a:visited {
    color: #99a;
    text-decoration: underline;
}
.poemlist a:hover,
.poemlist a:active {
    color: #000;
    text-decoration: underline;
}
.poemlist li {
    list-style-type: none;
    margin: 0;
    padding: 8px 0;
    margin: 2em 0;
    padding: 0;
}
.poemlist li.morelink {
    padding-left: 40px;
    background: transparent url(/images/cdn/downarrow.png) no-repeat left 50%;
}
.poemlist .ptitle {
    width: auto;
    margin: 0 155px 0 0;
}
.poemlist .pauthor,
.poemlist .submitted {
    float: right;
    text-align: right;
    width: 150px;
    padding: 0;
    font-size: .9em;
    font-style: italic;
    white-space: nowrap;
}
.poemlist .pdesc {
    padding: 0 0 0 10px;
    font-size: .8em;
    line-height: 1em;
}
.poemlist-top {
    margin-top: 30px;
}

#subcategories {
    width: auto;
    margin: 0 0 30px 20px;
    padding: 20px;
    border: 2px solid #888;
    background: #f5f5f5 url(/images/cdn/menuword.gif) no-repeat 8px 40px;
}
#subcategories h1 {
    font-size: 2em;
    text-align: center;
    margin: 0 auto;
}

.menulist {
    width: auto;
    padding: 0;
    text-align: left;
    margin: 0 0 0 58px;
}
.menulist li {
    list-style-type: none;
    margin: 12px 0;
    padding: 0;
}
.menulist li.ad {
    padding: 25px 10px 10px;
    border: 1px solid #000;
}
.menulist li.ad img {
    float: left;
}
.menulist .mitem {
}
.menulist .mitem a {
    font-size: 1.5em;
}
.menulist .mitem a:link {
    color: #036;
    text-decoration: none;
}
.menulist .mitem a:visited {
    color: #99a;
    text-decoration: underline;
}
.menulist .mitem a:hover,
.menulist .mitem a:active {
    color: #a99;
    text-decoration: underline;
}
.menulist .mtitle {
    width: auto;
    margin: 0 72px 0 0;
}
.menulist .mtitle small {
    font-size: .7em;
    color: #888;
}
.menulist .mcount {
    float: right;
    text-align: right;
    width: 70px;
    font-size: .8em;
    color: #555;
    white-space: nowrap;
}
.menulist .mdesc {
    padding: 0 0 0 10px;
    font-size: .9em;
    line-height: 1.3em;
    font-style:italic;
}

/* display additional page numbers for poetry index pages */
#poempages {
    color: #111;
    text-align: center;
}
#poempages .pagesheader {
    width: 80%;
    font-size: 1.2em;
    color: #efeff4;
    text-align: center;
    padding: 5px 5px 6px 5px;
    margin: 20px auto;
    background-color: #6388AD;
    border-color: #cacada #101020 #101020 #cacada;
    border-style: solid;
    border-width: 2px;
}
#poempages p.ltgt {
    font-size: 2em;
    line-height: .9em;
    margin: 0 auto 10px;
}
#poempages p.pagelinks {
    font-size: 1.3em;
    line-height: 2em;
    margin: 0 auto 10px;
}
#poempages a {
    padding: 0 5px;
}
#poempages a:link {
    color: #036;
    text-decoration: none;
}
#poempages a:visited {
    color: #99a;
    text-decoration: underline;
}
#poempages a:hover,
#poempages a:active {
    color: #a99;
    text-decoration: underline;
}
#poempages p.pagelinks a {
    text-decoration: underline;
}

#iconlegend {
    color: #555;
    min-height: 270px;	 /* leave room for 300x250 advertisement */
    margin: 40px 0 0;
    font-size: .9em;
}
#iconlegend .adPages {
    float: right;
    width: 300px;
}
#iconlegend .icons {
    width: auto;
    margin: 0 320px 0 0;
    padding: 10px;
    border-color: #cacada #101020 #101020 #cacada;
    border-style: solid;
    border-width: 2px;
    /* 6/17/2014 */
    padding: 0;
    border: none;
}

/****************************************************
 *
 *  Poetry pages
 *
 ***************************************************/


/* breadcrumbs on poems pages */
div.breadcrumb {
    margin: 0 0 3px;
    text-align: right;
    font-size: 1em;
    color: #4e4f80;
}
div.breadcrumb a:link,
div.breadcrumb a:visited {
    color: #4e4f80;
    text-decoration: none;
}
div.breadcrumb a:hover,
div.breadcrumb a:active {
    color: #036;
    text-decoration: underline;
}
div.breadbottom {
    margin-bottom: 20px;
}

/* 2021 0219 Added code for responsive video - RonC */

#zoom {
    width: 100%;
    font-size: 1.9em;
    line-height: 1.0em;
    margin:.8em 0 0 0 !important;
}

.video-container {
    position:relative;
    padding-bottom:56.25%;
    padding-top:30px;
    height:0;
    overflow:hidden;
    text-align: center;
    border:2px solid #fff;
}

.video-container iframe, .video-container object, .video-container embed {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border: 5px solid #000;
}

div#poem {
    margin: 0 auto;
    text-align: center;
    vertical-align: top;
    background: #fff url(/images/cdn/quill.jpg) no-repeat center 60px;
    border-color: #101020 #808090 #808090 #101020;
    border-style: solid;
    border-width: 1px;
    padding: 0 0 10px 0;
    cursor: default;	/* make copy/paste a little harder */
}
table#poemtable {
    margin: 0 auto;
    color: #000;
    font-family: Georgia,
    "New Century Schoolbook",
    "Nimbus Roman No9 L",
    serif;
}
table#poemtable td.title h1 {
    margin: 0 auto;
    padding: 20px 0 0 0;
    text-align: center;
    font-size: 2em;
    color: #000;
}
table#poemtable td.subtitle {
    margin: 0 auto;
    text-align: center;
    font-size: 1em;
    padding: 0;
}
table#poemtable td.byline {
    margin: 0 auto;
    text-align: center;
    font-size: 1em;
    font-style: italic;
    padding: 0 0 18px 0;
}
table#poemtable td.dedication {
    margin: 0;
    text-align: left;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: .8em;
    font-weight: bold;
    padding: 28px 0 0;
}
table#poemtable td.PoemText,
table#poemtable td.PoemTextSmall,
table#poemtable td.PoemTextCenter {
    text-align: left;
    font-size: 1.4em;
    line-height: 140%;
}
table#poemtable td.PoemTextCenter {
    text-align: center;
}

div#poem #social,
div#main-content #social {
    max-width: 420px;			/* width = sum of button widths */
    height: 25px;
    margin: 18px auto;
}

#rpanel {
    margin: 10px auto;
    text-align: center;
    cursor: default;
}
#rpanel h2 {
    /*		clear: both;*/
    margin: 0 auto;
}
#rpanel h2.author {
    margin: 22px auto 0;
}
#rpanel div.notyet {
    display: none;
}
#rpanel div.rpline {
    /*		clear: both;*/
    margin: 1em 0 0 0;
}
#rpanel div.desc {
    font-size: .9em;
    margin: 0 0 0 120px;
    text-align: left;
    line-height: 1.3em;
}
#rpanel span.friend {
    color: #a00;
    font-weight: bold;
}
#rpanel div.button {
    float: left;
    width: 110px;
}
#rpanel div.button a {
    display: block;
    width: 90px;
    margin: 0 10px 0 0;
    text-align: center;
    white-space: nowrap;
    padding: 6px 3px 2px 3px;
    border-top: 1px solid #777;
    border-right: 2px solid #222;
    border-bottom: 2px solid #222;
    border-left: 1px solid #777;
    font-size: 1.2em;
    font-size: 1.0em;
    font-weight: bold;
    letter-spacing: .15em;
}
#rpanel div.button a:link,
#rpanel div.button a:visited {
    color: #444;
    background-color: #ccc;
    text-decoration: none;
}
#rpanel div.button a:hover,
#rpanel div.button a:active {
    color: #000;
    background-color: #ccc;
    text-decoration: underline;
}

/* response panel copyright (small) */
div .authorcopyright {
    clear: both;
    width: 92%;
    margin: 46px auto 0;
    background-color: #fafafa;
    border: 1px solid #333;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: .8em;
    line-height: 1.2em;
    padding: 6px;
    text-align: left;
}
div .authorcopyright p {
    margin: 10px 0 0 0;
    color: #000;
}
div .authorcopyright p strong {
    background-color: #ffa;
}

/* link to poetry card */
div.pCard {
    margin: 20px auto ;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1em;
    font-style: italic;
    color: #4e4f80;
    text-align: justify;
}
div.pCard img {
    border: 0;
    padding: 0 0 0 20px;
    float: right;
}

/* related searches immediately follow poem */
div.related {
    margin: 8px auto 20px;
    font-size: 1.2em;
    color: #333;
}
div.related a:link,
div.related a:visited {
    color: #555;
    text-decoration: underline;
}
div.related a:hover,
div.related a:active {
    color: #4e4f80;
    text-decoration: underline;
}
div.related div.pushleft {
    float: left;
    width: 360px;
    text-align: right;
}
div.related div.pushright {
    margin: 0 0 0 365px;
    text-align: left;
    width: 200px;
}

/* comments from visitors */
#visitors {
    margin: 0;
    padding: 0;
    cursor: default;
}
#visitors a:link,
#visitors a:visited {
    color: #777;
    text-decoration: underline;
}
#visitors a:hover,
#visitors a:active {
    color: #fff;
    background-color: #777;
    text-decoration: underline;
}
#visitors .vHeadr {
    padding: 4px 0 0;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin-bottom: .5em;
    text-indent: 1em;
}
.vHeadr sup {
    font-size: .5em;
    font-weight: normal;
    color: #aaa;
}

#visitors div.lineitem {
    margin: 0;
    padding: 5px 0;
    font-size: .9em;
}
#visitors .alt {
    background-color: #f5f5f5;
}

#visitors .name {
    float: left;
    width: 150px;
    padding: 5px 0px 0 0;
    text-align: right;
    font-weight: bold;
}
#visitors .comment {
    margin: 0 0 0 165px;
    padding: 5px 0 0 0;
}
#visitors .vMore,
#visitors .vNote {
    width: 90%;
    margin: 0 auto;
}
#visitors .vMore {
    margin-top: 20px;
    font-size: 1.2em;
    font-weight: bold;
}
/* <!-- LoveRecBottom336x280 --> */
#AdBottom {
    width: 352px;
    padding: 8px 0 4px 8px;
    text-align: right;
    float: right;
}
.footertag {
    width: 740px;
    font-family: "Comic Sans MS", Arial, Helvetica, sans-serif;
    font-size: 2em;
    font-style: italic;
    text-align: center;
    margin: 20px 0 14px 0;
    color: #b2c4d7;
}

.returnLink {
    text-align: center;
    font-size: 1.2em;
    margin-bottom: 2em;
}

/* experimental comments at top of page 4/11/2011 */
#visitorexcerpt {
    width: 80%;
    margin: 10px auto;
    text-align: left;
    font-size: .8em;
}
#visitorexcerpt a:link,
#visitorexcerpt a:visited {
    color: #777;
    text-decoration: underline;
}
#visitorexcerpt a:hover,
#visitorexcerpt a:active {
    color: #fff;
    background-color: #777;
    text-decoration: underline;
}
#visitorexcerpt .vHeadr,
#visitorexcerpt .vClose {
    padding: 3px 0;
    border-top: 1px solid #555;
    border-bottom: 1px solid #555;
    margin-bottom: .5em;
    text-indent: 6px;
    font-size: 1em;
}
#visitorexcerpt .vClose {
    border-bottom: none;
    margin-top: 1.5em;
}
#visitorexcerpt div.lineitem {
    margin: 4px 0 0;
    font-size: .9em;
}
#visitors .alt {
    background-color: #f5f5f5;
}
#visitorexcerpt .name {
    float: left;
    width: 60px;
    text-align: right;
    font-weight: bold;
}
#visitorexcerpt .comment {
    margin: 0 0 0 66px;
}

/****************************************************
 *
 *  Author pages
 *
 ***************************************************/

.authorlinks {
    font-size: 1.6em;
    text-align: center;
    margin-bottom: 1em;
}
h1.authorheadr {
    color: #6288ac;
    font-family: "Times New Roman", Times, serif;
    font-size: 2em;
    font-weight: bold;
    margin: 1.5em 0 10px 0;
    border-bottom: 1px solid #6288ac;
}
div.breadauthor {
    text-align: left;
    text-indent: 10px;
    margin-top: -10px;
}
.poemlist-author {
    /* do not load quill.png */
    background: transparent;
}

#authorBio {
    width: 90%;
    border: 1px solid #ccc;
    margin: 0 auto;
    padding: 12px 12px 0 12px;
    font-size: 1em;
    color: #555;
    text-align: left;
    font-style: italic;
}
#authorBio h1 {
    color: #555;
    font-size: 2em;
    margin: 0 0 10px 20px;
}
#authorBio a:link, #authorBio a:visited {
    color: #4e4f80;
    text-decoration: underline;
}
#authorBio a:hover, #authorBio a:active {
    color: #f00;
    text-decoration: none;
}
#authorBio img {
    float: left;
    padding: 0 14px 0 0;
    max-width: 100%;
}

/* ********  Author Index Pages ************ */

.pbox {
    width: 80%;
    margin: 20px auto;
    padding: 20px;
    font-size: 1.0em;
    text-align: left;
    border: 1px solid #333;
    background-color: #fff;
}
.authorLinkline {
    margin: 10px 0 8px;
    padding: 0;
    font-size: 2em;
    font-weight: bold;
    text-align: center;
}
.authorLinkline span {
    font-size: .5em;
    font-weight: normal;
}
.authorLinkline a {
    font-family: "Courier New", Courier, monospace;
    text-decoration: underline;
    margin:0 .4em 0 0;
}
.authorLinkline a:link {
    color: #4e4f80;
}
.authorLinkline a:visited {
    color: #aaa;
}
.authorLinkline a:hover,
.authorLinkline a:active {
    background-color: #333;
    color: #fff;
}
.authorLinklineLeft {
    float: left;
    width: 190px;
    text-align: right;
}
.authorLinklineRight {
    margin: 0 40px 0 200px;
    text-align: left;
}
div.formBox {
    width: 80%;
    margin: 20px auto 35px;
    padding: 20px;
    text-align: center;
    background-color: #efefef;
    border-color: #808090 #101020 #101020 #808090;
    border-style: solid;
    border-width: 2px;
}
div.formBox form {
    margin: 0;
}
div.formWarn {
    width: 86%;
    margin: 10px 0 0 0;
    text-align: left;
    font-size: .9em;
}
h1.authorHead {
    text-indent: 1em;
}
#authorList {
    font-size: 1.2em;
    margin: 0 0 2em 0;
    padding: 0;
}
#authorList .authorItem {
    margin-bottom: .2em;
    border:1px solid #fff;
}
#authorList .authorItem:hover {
    background-color: #ffc;
    border:1px solid #555;
}

#authorList div {
}
#authorList .colHead {
    font-size: .7em;
    background: #ddd;
    border-bottom:1px solid #333;
    margin-bottom: 1.2em;
}
#authorList .poet {
    float: left;
    width: 58%;
}
#authorList .joined {
    float: left;
    width: 20%;
    text-align: center;
}
#authorList .poems {
    margin-left: 78%;
    text-align: center;
}

/****************************************************
 *
 *  Non-poetry pages
 *
 ***************************************************/

/* main index page */

div.mantra {
    font-size: .9em;
    font-style: italic;
    color: #888;
    text-align: justify;
    line-height: 1.2em;
    margin: 0 4em 2em 2em;
    margin: 3em;
}

.tag {
    text-align: center;
    font: bold italic 1.5em "Comic Sans MS", Arial, sans-serif;
    color: #4e4f80;
}

.column {
    float: left;
}
.withborder,
.noborder {
    border:1px solid #555;
    margin-top: 2em;
    padding: 1em;
}
.withborder h2,
.noborder h2 {
    font-size: 1.3em;
    text-align: center;
    margin: 0 auto .3em;
}
.noborder {
    border:1px solid #fff;
}
.badges {
    text-align: center;
    font-size: .7em;
    line-height: .5em;
}
.clear_column {
    clear:both;
    margin-top: 2em;
}
.one_half  {
    width: 46%;
    margin-right: 2%;
}
.one_half_last {
    margin-left: 52%;
}

/*  poems - site map page */

.poemspage {
    font-size: .8em;
    background-color: #fff;
    border:1px solid #aaa;
}
.poemspage div {
    width: 60%;
    margin: 40px auto;
}
.poemspage strong {
    font-size: 1.5em;
}

/* Advanced Search page */

#advSearch {
    width: 90%;
    margin: 0 auto;
    text-align: center;
    border:1px solid #555;
    background-color: #eee;
}
#advSearch h2 {
    border-bottom: 1px groove #000;
    margin:10px auto .8em auto;
}
#advSearch div.searchLine {
    margin: 0 0 1em;
    text-align: left;
}
#advSearch div.prompt {
    width: 120px;
    text-align:right;
    float: left;
    font-weight: bold;
}
#advSearch div.control {
    margin-left: 130px;
}

/* Learning page */

.headr {
    width: 92%;
    margin: 20px 0 0 8px;
    padding: 12px;
    color: #fff;
    background-color: #00324C;
    border: 3px solid #808090;
    border-color: #808090 #101020 #101020 #808090;
}
div.headr h1 {
    color: #fff;
    text-align: center;
    margin-top: 0;
}
.learntools {
    margin: 2em 0 0 3em;
}
.linktable {
    /*	clear:both;*/
    margin: 1em 0;
}
.linktable .linkline {
    /*		clear: both;*/
    margin: 1em 0;
}
.linktable .link {
    width: 33%;
    float: left;
    font-weight: bold;
}
.linktable .bookdiv {
    margin: 1em 0;
    font-weight: normal;
    font-size: .9em;
}
.linktable .desc {
    margin-left: 35%;
}
h2.booktitle {
    margin-bottom: 0;
}
p.bookbyline {
    text-indent: 2em;
    margin-top: 0;
}

/* About and Bio pages */

h1.boxheadr {
    width: 72%;
    margin: 0 auto 1em auto;
    text-align: center;
    padding: 1em;
    font-size: 1.2em;
    color: #efeff4;
    background-color: #006699;
    border-color: #808090 #101020 #101020 #808090;
    border-style: solid;
    border-top-width: 3px;
    border-right-width: 3px;
    border-bottom-width: 3px;
    border-left-width: 3px;
}

/* FAQ page */

ul.faqbox {
    margin: 20px;
    text-align: left;
    font-size: 1.2em;
    line-height: 1.5em;
}
.faqq {
    background: transparent url(/images/cdn/faq-q.png) no-repeat left top;
    padding-left: 34px;
}
div.faq {
    background: transparent url(/images/cdn/faq-a.png) no-repeat left top;
    padding: 0 20px 0 60px;
}

/****************************************************
 *
 *  Responsive media queries follow
 *
 ***************************************************/


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

    #universe {
        width: auto;
        max-width: 1040px;
    }

    /* visible portion of web page */
    #site {
    }
    /* entire masthead area */
    #site-masthead {
        width: 100%;
    }
    #smLogo img {
        max-width: 100%;
    }
    /* everything between site-masthead and site-footer */
    #main {
    }
    /* right column (menu) is floated */
    #main-sidebar {
    }
    /* left column */
    #main-content {
    }
}

@media (max-width: 960px) {

    /* collapse the masthead */
    #smLogo {
        display: none;
    }
    #masthead-header {
        float: none;
        width: 100%;
        text-align: center;
    }
    #topline div.leadin {
        /*		background-color: #008;
                color: #fff;*/
    }
}

@media (max-width: 900px) {
    #AdBottom {
        float: none;
        margin: 1em auto;
        text-align: center;
    }
}

@media (max-width: 860px) {

    /* we lose our box shadow */
    #site {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        width: auto;
    }
    #universe {
        overflow:hidden;
        padding: 0 6px;
    }

}

/* added 5/25/2014 after testing front page in Chrome */
@media (max-width: 800px) {
    .column {
        background-color: #f8f8f8;
        float: none;
    }
    .one_half  {
        width: 92%;
        margin-right: 0;
    }
    .one_half_last {
        width: 92%;
        margin-left: 0;
    }
}

@media (max-width: 780px) {

    #masthead-header div.adBanner,
    .adInsert {
        /*		display: none;*/
    }
    #masthead-header div.tagbox {
        width: 98%;
    }
    #masthead-header div.tag {
        width: 100%;
        margin-right: 180px;
        font-size: 1.5em;
    }
    .ad336x280,
    .mainRecTop {
        float: none;
        margin: 1em auto;
        text-align: center;
    }
    #iconlegend .adPages {
        float: none;
    }
    #iconlegend .icons {
        margin: 0;
    }
    #topline div.leadin {
        /*		background-color: #afa;*/
    }

}

@media (max-width: 590px) {

    #masthead-header div.quicksearch {
        float: none;
        width: 96%;
    }
    #topline div.login {
        float: none;
    }
    #topline div.leadin {
        width: auto;
        margin: 0 30px 0 0;
    }
    #main-content {
        font-size: 1.6em;	/* 14px */
    }
    #topline div.leadin {
        /*		background-color: #f00;*/
    }

    /* everything between site-masthead and site-footer */
    #main {
    }
    /* right column float removed */
    #main-sidebar {
        margin: 0 0 10px 50px;
        float: none;
    }
    .menuextra {
        display: none;
    }
    /* left column */
    #main-content {
        margin-right: 0;
    }
    #topline div.leadin {
        /*		background-color: #eee;*/
    }
}

@media (max-width: 390px) {

    #universe {
        width:380px;
        overflow:auto;
        padding: 0 6px;
    }
    #topline div.leadin {
        background-color: #000;
        color: #fff;
    }
}

@media (max-width: 340px) {

    #universe {
        width:300px;
        overflow:auto;
        padding: 0 6px;
    }
    #topline div.leadin {
        background-color: #eee;
    }
}










/* =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;
    }
}