/* 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: url(images/Rose.jpg) #FFF no-repeat top right fixed;  
   margin: 0; /* no margin */
   padding: 0; /* no padding */
   color: #000; /* default text color is black */
}

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

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

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

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

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

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

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

#menu_container { 
 border-top: 2px solid #FFF;
 border-bottom: 2px solid #FFF;
 margin: 0;
 padding: 4px 10px;
 background: #000;
 color: #996600;
 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.png) no-repeat;
 background-position: -2px -3px;
 padding-left: 18px;
 padding-right: 5px;
 text-decoration: none;
 font-weight: bold; 
}
#menu #current, #menu2 #current, #footermenu #current {
 background: url(images/bullet2.png) no-repeat; 
 background-position: -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: #996600;
 background: url(images/bullet3.png) no-repeat;
 background-position: -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-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 { text-align: center; margin: 1em; }

/* On pages with alphabet links this will control how that list of links appears */
#alphabet { text-align: center; margin: 1em;}

/* 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 */
.classification { 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: #996600; text-align: center; width: 100%; clear: both; margin: 1em 0; }

/* The default look of the links on the site. */
A:link {color: #996600; text-decoration: none; font-weight: bold; }
A:hover { color: #996600; text-decoration: underline overline; font-weight: bold; }
A:visited { color: #996600; text-decoration: none; font-weight: bold; }
A:active { color: #996600; 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 */
#index, #tens, #search, #user, #stats, #contactus { background: url(images/Rose2.jpg) top right; color: #FFF; } 
#index, #tens, #search, #user, #stats, { 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 { 
 margin: 0;
 padding: 0;
 background: url(images/hearts-topper2.gif) no-repeat #FFF;
 background-position: 0px 15px;
 border: 5px double #996600;
 margin-bottom: 2em;
 color: #000;
}
.block .title { 
 color: #000;
 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: #996600; text-align: left; margin-top: 1em; text-align: center; font-size: 110%; color: #996600; 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 { padding: 5px; background: url(images/hearts-topper.gif) no-repeat bottom right; padding-bottom: 25px; }
.newseven { padding: 5px; background: url(images/hearts-topper2.gif) no-repeat bottom left; padding-bottom: 35px; }
#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; padding: 5px; background: url(images/hearts-left.gif) no-repeat top left #FFF; padding-bottom: 25px; border: 2px solid #996600; padding-left: 35px;}
#news .newseven { width: 850px; margin: auto; padding: 5px; background: url(images/hearts-right.gif) no-repeat bottom right #FFF; padding-bottom: 35px; border: 2px solid #996600; padding-right: 35px;}

/* Comments in the news archive */
.comment { border-top: 1px solid #000; border-bottom: 1px solid #000; margin-bottom: -1px; 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; }

/* Output on pages that can use a little extra spacing */
#help #output, #submission #output, #stories #output, #editbio #output, #userprofile #output{ padding: 10px; }

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

/* 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 { margin: 0 5%; border: 2px solid #996600;  margin-bottom: 1em;  background: url(images/hearts-topper2.gif) no-repeat #FFF; background-position: 0 10px;}
.listbox .title { font-weight: bold; padding: 4px; padding-left: 80px; color: #000; line-height: 20px; vertical-align: baseline;}
.listbox .title a:link { color: #996600; text-decoration: none;}
.listbox .title a:visited { color: #C66; text-decoration: none;}
.listbox .title a:hover { color: #996600; 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;
 background-position: right -5px;
 padding: 5px;
 padding-top: 20px;
 text-align: right;
 padding-right: 80px;
}
/* End listbox formatting. */


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

/* tabs control the 3 tabs below the user's bio information for stories, favorite stories/series, and favorite authors. */
#tabs { padding: 0; margin: 0; clear: both; border: 2px solid #996600; border-left: 0; border-right: 0;}

#tabs DIV{ 
 width: 33%;
 height: 30px; 
 float: left;
 background: #FFF;
 text-align: center;
 line-height: 30px;
 color: #C66;
 font-weight: bold;
}

/* The left and right tabs have no borders while the center tab has right and left borders shared by the other two.  
We need to set the width to 98% here otherwise it would inherit the 33% from the declaration above forcing the center tab to 33% of the 33%.
We use 98% because IE has some problems with setting anything to 100% and the difference for Firefox isn't worth 2 declarations really. */
#tabs #centertab {
  background: transparent;
  border-right: 2px solid #996600;
  border-left: 2px solid #996600;
  width: 98%;
  padding: 0;
}

/* 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: #996600; }
#tabs a:hover { text-decoration: none; color: #C66; }

/* The active tab is the one you're currently looking at.  This is the one you want to stand out from the others in some way.  
We give it 34% to round everything off to 100%.  In this case, I've left it simple with just a heart in the background and an underline on the link. */

#tabs #active { width: 34%; background: url(images/heart2.gif) no-repeat top left #FFF; height: 30px;}
#tabs #active a { text-decoration: underline; }

/* End User page declarations */

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

/* This controls the categories block on the categories page.  There are also some built in declarations in header.php which you can override that control the column
widths and a few other things. */
#categoriesblock { width: 90%; padding-left: 5%; padding-bottom: 1em; }
.column { margin: 1ex; width: 23% !important; }

/* 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 */