/* Base style for instapoem.com         */
/* Phil Glatz 7 Dec 2005                */

body {
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  margin: 5px auto 5px auto;
  background-color: white;
  text-align: left;
  width: 770px;
  padding: 0;
}
li, dd {
  margin-left: 1em;
}

div#enclose {
  text-align: left;
  border: 1px solid #777;
  width: 770px;
}

/* general visibility */
.hide {
  visibility: hidden;
  display: none;
  line-height: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: none;
}
.show {
  visibility: visible;
  display: inherit;
}

/* main page nav */
div#main-left {
  float: left;
  width: 140px;
  color: white;
}
div#main-left {
  background-color: #0099FF;
}
div#main-left div#ml-wrapper {
  padding: 5px;
}
div#main-left div#ml-wrapper p {
  margin: 0 0.5em 0 0.5em;
}
/* links in left sidebar */
div#main-left div#leftlinks {
  margin: 1em 0 0.5em 0;
  padding: 0.25em;
}
div#main-left div#leftlinks ul {
  margin-left: 6px;
}
div#main-left div#leftlinks li {
  list-style: disc;
}
div#main-left div#leftlinks A {
  color: white;
  font-size: 90%;
  padding-left: 0;
  cursor: pointer;
  text-decoration: none;
}

div#main-left div#pagelinks {
  margin: 1em 0 0.5em 0;
  padding: 0.25em;
}
div#main-left div#pagelinks ul {
  margin-left: 6px;
}
div#main-left div#pagelinks li {
  list-style: disc;
}
div#main-left div#pagelinks A {
  color: white;
  font-size: 90%;
  padding-left: 0;
  cursor: pointer;
  text-decoration: none;
}


div#main-right {
  float: right;
  width: 600px;
  padding-bottom: 0.5em;
  margin-right: 0;
  padding-right: 10px;
}
div#main-right h1 {
  text-align: center;
  padding: 0.5em 0 0.5em 0;
}

.left {
  text-align: left;
}
.center {
  text-align: center;
}
.right {
  text-align: right;
}
.bigger {
  font-size: 120%;
}
.biggest {
  font-size: 140%;
}
.bold {
  font-weight: bold;
}

/* login box on home page */
div#login {
  width: 130px;
  margin-top: 12px;
}
div#login h1 {
  background: url(/images/leftcol-head.gif) no-repeat top;
  color: black;
  text-align: center;
  padding: 0.2em;
  font-size: 100%;
}
div#login div#login-inner {
  border-left: 1px solid white;
  border-right: 1px solid white;
  border-bottom: 1px solid white;
}
div#login input {
  padding: 0 0.2em 0.1em 0.2em;
  margin: 0 0.5em 0 0.5em;
}
div#login p.logo {
  padding: 0 0 0 12px;
}
div#login p.user {
  padding-top: 0.25em;
  margin-bottom: 0.25em
}
div#login label {
  margin: 0 0.5em 0 0.5em;
}
div#login p.hide {
  visibility: hidden;
  line-height: 0;
  height: 0;
}
div#login p.show {
  visibility: visible;
  line-height: 110%;
  height: auto;
  color: red;
  background-color: #FFE1E6;
  margin: 0.25em !important;
  padding: 0.25em;
}
div#login input.err {
  border: 1px solid red;
}
div#login hr {
  margin: 0.5em 0 0.15em 0;
  color: #ddd;
  background-color: #ddd;
  height: 1px;
  border: none;
}
div#login p.not {
  padding: 0;
  text-align: left;
  font-size: 90%;
  font-style: italic;
  margin-bottom: 0.2em !important;
}
div#login input.login_button {
  color: #005F9B;
  margin-top: 0.25em;
  margin-bottom: 0;
}
div#login input.btn-join {
  color: #005F9B;
  margin: 0 0.5em 0.5em 0.5em;
}

/* login box on login page */
div#login div#login-inner {
  margin: 0 auto 0 auto;
  border-left: 1px solid white;
  border-right: 1px solid white;
  border-bottom: 1px solid white;
}
div#login div#login-inner h1 {
  color: black;
  text-align: center;
  padding: 0.2em;
  font-size: 100%;
}
div#login div#login-inner input {
  padding: 0 0.2em 0.1em 0.2em;
  margin: 0 0.5em 0 0.5em;
}
div#login div#login-inner input.sub {
  font-size: 90%;
  color: #004A79;
  background-color: #33ccff;
  border: 1px solid #0099ff;
  margin-top: 0.25em;
}
div#login div#login-inner p.logo {
  padding: 0 0 0 12px;
}
div#login div#login-inner p.user {
  padding-top: 0.25em;
  margin-bottom: 0.25em
}
div#login div#login-inner label {
  margin: 0 0.5em 0 0.5em;
}
div#login div#login-inner hr {
  margin: 0.5em 0 0.15em 0;
  color: #ddd;
  background-color: #ddd;
  height: 1px;
  border: none;
}
div#login div#login-inner p.not {
  padding: 0;
  text-align: left;
  font-size: 85%;
  font-style: italic;
  margin-bottom: 0.1em !important;
}
div#login div#login-inner input.login_button {
  color: #005F9B;
  margin-top: 0.25em;
  margin-bottom: 0;
}
div#login div#login-inner input.btn-join {
  color: #005F9B;
  margin: 0 0.5em 0.5em 0.5em;
}

div#login div#login-inner img.button {
  cursor: pointer;
  margin: 0 0.25em 0.25em 0.25em;
}

/* footers */
div#footer {
  text-align: center;
  color: #444;
  width: 100%;
  font-size: 85%;
  font-style: italic;
  padding: .25em 0 .25em 0;
  clear: both;
  border-top: 1px solid #ccc;
}

div#footer class.home {
  border-top: 1px solid white;
  width: 140px;
  position: relative;
  bottom: 0;
  left: 0;
  color: white;
}
div#footer div.nav {
  text-align: center;
  color: #336699;
  font-style: normal;
  padding: 0 0 .25em 0;
  font-weight: bold;
}
div#footer div.nav A {
  padding: 0 1em 0 1em;
  text-decoration: none;
  color: #336699;
}

div#footer hr {
  text-align: center;
  color: #0099FF;
  background-color: #0099FF;
  height: 0.5px;
  margin: 2.5em 35px 0.5em 35px;
}

img.highlite {
  border: 2px solid black;
}

legend {
  border-color: black;
  background-color: transparent;
  font-weight: bold;
  padding: 0 0.25em 0 0.25em;
}

p {      
  margin-top: 0px;
  margin-bottom: 0.5em;	
}
p.nospace {
  margin-bottom: 0;	
}
p.pagenote {
  margin-top: 1em;
  font-style: italic;
}
/* common page styles */
div#main-right div#content {
  margin-top: 0.5em;
}
div#main-right div#content h1 {
  margin: 0;
  padding: 0.25em 0 0 0;
  font-size: 200%;
}



span.active {
  color: green;
}
span.inactive {
  color: red;
}

/* general info and error display */
div.showInfo {
  color: green;
  margin: 0.5em 0;
}
div.showError {
  color: red;
  margin: 0.5em 0;
}


/* on the home page */
div#main-right div#homepage {
  margin-top: 0.5em;
}
div#main-right div#homepage h1 {
  margin: 0;
  padding: 0;
}
div#main-right div#homepage h1.major {
  margin: 1em 0 0.5em 0;
  font-size: 200%;
}
div#main-right div#homepage h2 {
  margin: 0;
  padding: 0;
  font-size: 110%;
}
div#main-right div#homepage h3 {
  margin: 0.5em 0 0 0;
  padding: 0;
  font-size: 105%;
}
div#main-right div#homepage li {
  list-style-type: none;
  margin-left: 1em;
}
div#main-right div#homepage ul {
  width: 290px;
}
div#main-right div#homepage div#example {
  margin: 0.5em 1em 0 1em;
  float: right;
  width: 300px;
  padding: 0.5em;
  background-color: #FFFFCC;
  border: 1px solid orange;
}
span.instant {
  font-style: italic;
  font-weight: bold;
}


/* on the registration page */
div#main-right div#registration {
}
div#main-right div#registration p {
  margin: 0 0 1em 0;
}
div#main-right div#registration p.error {
  color: red;
  font-weight: bold;
  padding-bottom: 0.5em;
  border-bottom: 1px solid red;
}


/* poem display */
div#poem {
}

/* poem sharing */

div#topline div#create{
  margin-left: 120px;
  padding-top: 0.25em;
  font-weight: bold;
  font-size: 125%;
  text-align: center;
}


/* tooltips */
a.tooltip {
  position:relative; /*this is the key*/
  z-index: 24;
  background-color:#ccc;
  color:#000;
  text-decoration: none;
  margin-left: 6px;
}
a.tooltip:hover {
  z-index: 25;
  background-color:#cff;
  color:#000;
}
a.tooltip span {
  display: none;
}
a.tooltip:hover span { /*the span will display just on :hover state*/
  display: block;
  position:absolute;
  top:2em; left:2em; width:15em;
  border:1px solid #0cf;
  background-color:#cff; color:#000;
  text-align: left;
  padding: 0.25em;
  font-size: 100%;;
}

a.tooltip img {
  border: none;
}


/* required field */
span.required {
  color: red;
  font-weight: bold;
  font-size: 150%;
  padding-left: 3px;
  padding-right: 3px;
}


/* admin links box */
div.admin-links {
  margin: 12px 0 0 0;
  width: 200px;
  padding: 0.5em;
  border: 1px solid #ccc;
}

div#admin-linkback {
  margin: 12px 0 0 0;
  padding: 0.5em;
  border: 1px solid #ccc;
}

p.indent {
  margin: 0 0 0 6em;
}
p.indent2 {
  margin: 0 0 0.5em 6em;
}
img.logo {
  cursor: pointer;
}


/* nav buttons */
div#home-logo {
  position: absolute;
  left: 6px;
  top: 7px;
  width: 169px;
  height: 64px;
  visibility: visible;
  cursor: pointer;
}
div#btn-home {
  position: absolute;
  left: 45px;
  top: 81px;
  width: 100px;
  height: 21px;
  visibility: visible;
  cursor: pointer;
}
div#btn-faq {
  position: absolute;
  left: 503px;
  top: 80px;
  width: 101px;
  height: 24px;
  visibility: visible;
  cursor: pointer;
}

div#btn-contact {
  position: absolute;
  left: 606px;
  top: 79px;
  width: 113px;
  height: 24px;
  visibility: visible;
  cursor: pointer;
}

div#btn-examples {
  position: absolute;
  left: 153px;
  top: 79px;
  width: 100px;
  height: 23px;
  visibility: visible;
  cursor: pointer;
}

div#btn-classics {
  position: absolute;
  left: 267px;
  top: 80px;
  width: 100px;
  height: 22px;
  visibility: visible;
  cursor: pointer;
}

div#btn-options {
  position: absolute;
  left: 388px;
  top: 79px;
  width: 106px;
  height: 23px;
  visibility: visible;
  cursor: pointer;
}

/* banners */
div#banner-top {
  width: 100%;
  height: 90px;
  margin: 0 auto;
}
div#banner-bottom {
  width: 100%;
  height: 90px;
  margin: 1em auto 0;
}
div#banner-side {
  width: 250px;
  height: 300px;
  margin: 1em auto 1em;
}

div.ba-teaser {
  width: 716px;
  padding: 4px 6px;
  margin: 6px 0 1em;
  border: 1px solid black;
  font-size: 110%;
  font-weight: bold;
  text-align: center;
}