/* Items between here and Generic delarations comment are things that I adjusted or changed */


/* HEADER.TPL Coding Items */

/* A div surrounding banner, skin (layout) choices, and menu */
#header {
 background: #FFFFFF
 border-top: 2px solid #000099;
}
/* End header (first part) declarations */


/* The top banner where your site's title/logo go */
#banner {
 height: 100px;
 background: url('images/header-bg.jpg');
 text-align: center;
 font-family:Bradley Hand ITC, Comic Sans MS, Times New Roman, Arial;
 color: #FFFFFF;
 font-style: italic; font-weight: bold;
}
/* End banner declarations */

/* Skin (Layout Choices) Area */
#skin { position: absolute; top: 100px; right: 5px; }

#skinchoices { 
 position: absolute; top: 80px; right: 20px; 
 font-size: 12pt;
 font-weight: bold;
}
/* End skin (layout) declarations */

/* Site Title and Site Slogan Text Adjustments */
#sitetitle { font-size: 24pt;}

#siteslogan { font-size: 16pt;}
/* End Site Title and Site Slogan Text declarations */

/* Menu Bar Container Where All Menu Links Are */
#menu_container { 
 border-bottom: 2px solid #000099;
 margin: 0;
 padding: 4px 10px;
 background: #000033;
 text-align: center;
 font-weight: bold;
 font-size: 10pt;
 font-family:Comic Sans MS, Times New Roman, Arial;
}
/* End Menu Container declarations */

/* The body of the page */
BODY {  
   background: #CCCCFF;  
   margin: 0; /* no margin */
   padding: 0; /* no padding */
   color: #000099;
   font-family:Comic Sans MS, Times New Roman, Arial;
   font-size: 10pt;
}
/* End Body Declarations */

/* 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;
}
/* End Left and Right Index Declarations */
/* End Specific Index Page Declarations */

/* The default look of the links on the site. */
A:link {color: #000066; text-decoration: none; font-weight: bold; }
A:hover { color: #000066; text-decoration: underline overline; font-weight: bold; }
A:visited { color: #000066; text-decoration: none; font-style: italic; font-weight: bold; }
A:active { color: #000066; text-decoration: none; font-weight: bold; }
/* End Default Links Declarations */

/* These three define the look of the blocks on the index page. */
.block { 
 padding: 0;
 background: #FFFFFF;
 border: 5px double #000099;
 margin-bottom: 2em;
 margin-left:0; margin-right:0; margin-top:0
}
.block .title { 
 background: url('images/blocktitle-bg.jpg');
 font-family:Bradley Hand ITC, Comic Sans MS, Times New Roman, Arial;
 color: #FFFFFF;
 margin: 0;
 font-size: 14pt;
 font-weight: bold;
 text-align: left;
 padding: 5px;
}
.block .content {
 padding: 5px;
 text-align: left;
 background: #FFFFFF;
 margin: 0;
 margin-top: 10px; 
}
/* End Block Declarations */

/* The news box has it's own little quirks. */
.newstitle { padding: 5px; color: #000099; text-align: left; margin-top: 1em; text-align: center; font-size: 14pt; color: #000099; font-weight: bold; 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 */

/* Footer Notes */
#footer { border-top: 2px solid #000099; background: #000033; color: #FFFFFF; text-align: left; padding: 7px; }

#footermenu {  background: #000033; font-size: 11pt; text-align: center; clear: both; padding-bottom: 1ex;}
/* End footer page declarations */

/* Menu commands and adjustments */
#menu, { display: inline;}
#menu 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, #footermenu #current {
 background: url('images/bullet2.jpg') no-repeat -2px -3px; 
 text-decoration: underline
}
#menu a:hover, #menu #current:hover, #footermenu a:hover, #footermenu #current a:hover {
 color: #000099;
 background: url('images/bullet3.jpg') no-repeat -2px -3px;
 padding-left: 18px;
 padding-right: 5px;
 text-decoration: none;
 font-weight:bold
}
/* End menu declarations */


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

/* 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: #000099; height: 3px; color: #000099; margin: 0 5%; }



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

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


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

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

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


/* 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-topper2a.jpg') no-repeat top left; padding-bottom: 25px; border: 2px solid #000099; padding-left: 35px; padding-right:5px; padding-top:5px}
#news .newseven { width: 850px; margin: auto; background: #FFF url('images/hearts-topper1a.jpg') no-repeat bottom right; padding-bottom: 35px; border: 2px solid #000099; padding-right: 35px; padding-left:5px; padding-top:5px}

/* 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%;
 color: #000;
 background: #FFF url('images/hearts-topper2a.jpg') no-repeat top left;
 border: 2px solid #000099;
 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 #000099;  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: #000099; text-decoration: none;}
.listbox .title a:visited { color: #000099; text-decoration: none;}
.listbox .title a:hover { color: #000099; text-decoration: underline overline; }
.listbox .content { padding: 5px; padding-top: 10px; padding-bottom: 10px;}
.listbox .tail, .listbox .respond {
 background: url('images/hearts-topper1.gif') no-repeat right -5px;
 padding-top: 20px;
 text-align: right;
 padding-right: 80px; padding-left:5px; padding-bottom:5px
}
/* 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 no-repeat top left; padding-left: 40px; border: 2px solid #000099; padding-right:5px; padding-top:5px; padding-bottom:5px }
#profile .adminoptions { font-weight: bold; text-align: center; background: #FFF; border: 2px solid #000099; border-top: 5px double #000099;}
#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 3 tabs below the user's bio information for stories, favorite stories/series, and favorite authors. */
#tabs { border-top:2px solid #000099; border-bottom:2px solid #000099; padding:0; margin:0; clear: both; border-left: 0px none; border-right: 0px none;}

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

/* 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 #000099;
  border-left: 2px solid #000099;
  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: #000099; }
#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: #FFF url('images/heart2.gif') no-repeat top left; 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 */