/* Generic declarations used for many or all pages.*/

/* The body of the page */
BODY {  
/*The background will be Rose.jpg with the color white behind that.  It's fixed so it doesn't scroll */
   background: #FFF url('images/Rose.jpg') no-repeat fixed top right;  
   margin: 0; /* no margin */
   padding: 0; /* no padding */
   color: #000
}

/* The labels in all our forms will be styled using this rule. */
LABEL, .label { font-weight: bold; margin-right: 3px; }


TH { border: 1px solid #000; background: #900; color: #FFF; }
TD { padding: 5px; }

/* If you allow horizontal rules style those */
HR { background: #900; height: 3px; color: #900; margin: 0 5%; }

/* A div surrounding banner, skin, menu, and menu2 */
#header {
 background: #FFF url('images/Rose2.jpg') top right;
}

/* The top banner where your site's title/logo go */
#banner {
 height: 150px;
 text-align: right;
 font-family: Verdana, Verdana, Geneva, sans-serif;
 color: #FFF;
 font-style: italic;
}

#skin { position: absolute; top: 155px; right: 10px; }
/* End banner declarations */

.tblborder { border: 2px solid #900; background: #FFF; color: #000;}
#user .tblborder A { color: #900; }

#menu_container { 
 border-top: 2px solid #FFF;
 border-bottom: 2px solid #FFF;
 margin: 0;
 padding: 4px 10px;
 background: #000;
 color: #FCC;
 font-weight: bold;
 font-size: 11pt;
}
#footermenu { background: #000; font-size: 11pt; text-align: center; clear: both; padding-bottom: 1ex;}
#menu, #menu2 { display: inline; }
#menu a, #menu2 a, #footermenu a {
 color: #FFF;
 background: url('images/bullet.jpg') no-repeat -2px -3px;
 padding-left: 18px;
 padding-right: 5px;
 text-decoration: none;
 font-weight: bold 
}
#menu #current, #menu2 #current, #footermenu #current {
 background: url('images/bullet2.jpg') no-repeat -2px -3px; 
 text-decoration: underline
}
#menu a:hover, #menu2 a:hover, #menu #current:hover, #menu2 #current:hover, #footermenu a:hover, #footermenu #current a:hover {
 color: #FCC;
 background: url('images/bullet3.jpg') no-repeat -2px -3px;
 padding-left: 18px;
 padding-right: 5px;
 text-decoration: none;
 font-weight:bold
}

/* The main content area for our pages.  The height declaration pushes the main page to be a minimum height of 400px in IE. */
#mainpage { 
 height: 400px;
 padding: 1em;
}
#viewuser #mainpage { 
   padding: 0;
   padding-bottom: 1em;
}
/* For non-IE browsers reset the height to auto (otherwise they'll be exactly 400px and anything over 400px scrolls under the footer. 
Then set the min-height to 400.  IE ignores min-height. */
html>body #mainpage {
 height: auto;
 min-height: 400px; 
}

#footer { border-top: 2px solid #FFF; background: #000; color: #FFF; text-align: left; padding: 7px; }

/* The title of the pages */
#pagetitle { font-size: 1.2em; text-align: center; padding: 1ex;}

/* The links at the bottom of the page for any page that needs pagination */
#pagelinks, #alphabet { text-align: center; margin: 1em; }
#pagelinks A, #alphabet A { padding: 2px 4px; }
#pagelinks #currentpage, #alphabet #currentletter { border: 1px solid #900; background: #FFF; }

/* This controls the look of divs surrounding the "Issue a Challenge!" "Respond to the Challenge!" etc links */
.respond { text-align: center; }

/* The labels for our stories and series listings */
.label { font-weight: bold; }

/* When an admin is logged in this controls the appearance of the admin options links throughout the site */
.adminoptions { font-weight: bold; }

/* The jump lists in the viewstory page and a couple other places */
.jumpmenu { text-align: right; }

/* In pages with stories and series this controls the appearance of the "Stories" and "Series" section headers */
.sectionheader { font-weight: bold; font-size: 120%; color: #900; text-align: center; width: 100%; clear: both; margin: 1em 0; }

/* The default look of the links on the site. */
A:link {color: #900; text-decoration: none; font-weight: bold; }
A:hover { color: #900; text-decoration: underline overline; font-weight: bold; }
A:visited { color: #900; text-decoration: none; font-weight: bold; }
A:active { color: #900; text-decoration: none; font-weight: bold; }

/* End Generic Declarations */

/* We used {page_id} for a container tag in the header.tpl file so we can set specific behaviors for specific pages */

/* These id's override the paler Rose.jpg background for the bright one.  Darker background means we want the color of the default font changed too */
#home, #tens, #search, #user,  #contactus { background: url('images/Rose2.jpg') top right; color: #FFF } 
#home, #tens, #search, #user { color: #FFF; }
#contactus a, #user a { color: #FFF; text-decoration: underline; }
#contactus a:hover, #user a:hover { text-decoration: underline overline; }

/* stuff specific to the index page */
/* Defines the left column on the index page. IE puts a 3px gutter on things so it's defined as 197px wide */
#leftindex {
 width: 197px;
 float: left; 
 margin: 10px;
 margin-top: 0;
}
/* Now for everyone else re-define it to 200px */
html>body #leftindex { width: 200px; }

/* The right column.  We're giving it a right margin of 20px to bring it in from the left border and a left margin of 265px so it clears the left column */
#rightindex {
 margin:  0 20px 10px 265px;
}

/* These three define the look of the blocks on the index page. */
.block { 
 padding: 0;
 background: #FFF url('images/hearts-topper2.gif') no-repeat 0px 15px;
 border: 5px double #900;
 margin-bottom: 2em;
 color: #000; margin-left:0; margin-right:0; margin-top:0
}
.block .title { 
 color: #900;
 margin: 0;
 font-weight: bold;
 text-align: right;
 padding: 5px;
}
.block .content {
 padding: 5px;
 text-align: left;
 background: #FFF;
 margin: 0;
 margin-top: 25px; 
}

/* The news box has it's own little quirks. */
.newstitle { padding: 5px; color: #000; text-align: left; margin-top: 1em; text-align: center; font-size: 110%; color: #900; text-decoration: underline;}
.newstitle .adminoptions { text-align: right;}
/* These next two are examples of how you can do even and odd in your listings.  In this case it sets the heart line right on odd and left on even news stories */
.newsodd { background: url('images/hearts-topper.gif') no-repeat bottom right; padding-bottom: 25px; padding-left:5px; padding-right:5px; padding-top:5px }
.newseven { background: url('images/hearts-topper2.gif') no-repeat bottom left; padding-bottom: 35px; padding-left:5px; padding-right:5px; padding-top:5px }
#newsarchive { text-align: center;}

/* End index page declarations */

/* And the news archive needs it's own styling.  Again showing how you can use even and odd in your styles. */
#news .newsodd{ width: 850px; margin: auto; background: #FFF url('images/hearts-left.gif') no-repeat top left; padding-bottom: 25px; border: 2px solid #900; padding-left: 35px; padding-right:5px; padding-top:5px}
#news .newseven { width: 850px; margin: auto; background: #FFF url('images/hearts-right.gif') no-repeat bottom right; padding-bottom: 35px; border: 2px solid #900; padding-right: 35px; padding-left:5px; padding-top:5px}

/* Comments in the news archive */
.comment, .commentodd, .commenteven { border: 2px solid #900; margin: 1ex 10%; background: #FFF; padding: 5px; }

/* Search Results page. For the author searches in the tens pages*/
#searchresults #output { padding: 10px; } 

/* View story page */
#next { float: right; }
#prev { float: left; }
.jumpmenu { margin-right: 5px; }

/* Top Tens page */
#tens .tblborder { padding: 5px; }


/* Formatting for the title blocks in series and challenge pages */
#titleblock {
 margin: 0 10%;
 color: #000;
 background: #FFF url('images/hearts-left.gif') no-repeat top left;
 border: 2px solid #900;
 padding-left: 40px; padding-right:7px; padding-top:7px; padding-bottom:7px
}

/* Formatting for the divs for series and stories.  Note that you can set 2 different looks using .even and .odd  However, that wasn't used here. */
.listbox { border: 2px solid #900;  margin-bottom: 1em;  background: #FFF url('images/hearts-topper2.gif') no-repeat 0 10px; margin-left:5%; margin-right:5%; margin-top:0}
.listbox .title { font-weight: bold; padding: 4px; padding-left: 80px; color: #000; line-height: 20px; vertical-align: baseline;}
.listbox .title a:link { color: #900; text-decoration: none;}
.listbox .title a:visited { color: #C66; text-decoration: none;}
.listbox .title a:hover { color: #900; text-decoration: underline overline; }
.listbox .content { padding: 5px; padding-top: 10px; padding-bottom: 10px;}
.listbox .tail, .listbox .respond {
 background: url('images/hearts-topper.gif') no-repeat right -5px;
 padding-top: 20px;
 text-align: right;
 padding-right: 80px; padding-left:5px; padding-bottom:5px
}

.listbox .featured { float: right; margin: 10px 40px;}
.listbox .new { color: #FC0; font-weight: bold; font-style: italic; font-size: 130%; padding: 0 10px;}
/* End listbox formatting. */


/* User Profile (viewuser.php) declarations */
#profile { background: url('images/Rose2.jpg') no-repeat right -180px; padding-bottom: 5px; padding-left:25px; padding-right:25px; padding-top:25px}
#profile .listbox .adminoptions { margin: 0; font-weight: bold; height: auto; }
#profile .listbox .tail .adminoptions a{ color: #FFF; }
#sort { text-align: center; position: relative; margin: 1em; }
#bio { background: #FFF url('images/hearts-left.gif') no-repeat top left; padding-left: 40px; border: 2px solid #900; padding-right:5px; padding-top:5px; padding-bottom:5px }
#profile .adminoptions { font-weight: bold; text-align: center; background: #FFF; border: 2px solid #900; border-top: 5px double #900;}
#profile #sort { text-align: right; padding: 0 10px; font-weight: bold; color: #FFF;}
html>body #profile #sort { margin-top: 1em; }
#profile #output { padding: 5px; }
.jumpmenu { margin: 1ex; }

/* tabs control the tabs below the user's bio information for stories, favorite stories/series, and favorite authors. */
#tabs { 
  background: #FFF;
  padding: 0;
  margin: 0;
  text-align: right;
  border-top: 2px solid #900;
  border-bottom: 2px solid #900;
  width: 100%;
  min-height: 60px;
}

#tabs SPAN{ 
  background: url('images/hearts-left.gif') no-repeat left -10px;
  padding: 0;
  display: block;
  float: left;
  margin: 0;
  text-align: left;
  color: #C66;
  font-weight: bold;
  line-height: 30px;
  height: 60px;
  margin-left: -1px;
}

#tabs SPAN A {
  display: block;
  margin-left: 38px;
}
/* The look of links within the tabs.  Generally they're going to have to be different from the regular page links.  
I haven't bothered with the visited or active states. */
#tabs a { 
  color: #900; 
}
#tabs a:hover { 
 text-decoration: none; 
 color: #C66; 
}

#tabs #active { 
	background: url('images/hearts-left.gif') no-repeat left -37px #FFF;
	text-align: left;
}
#tabs #active a { 
  text-decoration: none; 
}

/* End User page declarations */

/* This one controls how the text of the story looks.  Just the text of the story! */
#story { padding: 5px; }

/* This class is used to clear up some bugs in IE that make text disappear for a couple different reasons.  
If text is disappearing in IE apply this class to the PARENT element of the one disappearing.*/
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline; }
/* Hides form IE-Mac \*/
* html .clearfix { height: 1%; }
.clearfix {display: block; }
/* End hiding */

/* The recent block on the index page. */
.recentbox { margin: 0; padding: 0; }
.recentbox .title { text-align: left; margin: 0; padding: 3px 7px; color: #000; font-weight: normal; }
.recentbox .content { margin: 0; padding: 3px 7px; }

/* The story information on the story index page */
#viewstory .listbox { background: url(images/hearts-right.gif) bottom right repeat-y #FFF; padding: 7px; padding-right: 40px;}
#titleinfo { text-align: center; }