/*****************/
/** Winter 2009 **/
/*****************/

/* ---------------------------------------- */
/* Reset to clean styling */
@import url("reset.css");

/* ---------------------------------------- */
/* Overall styles for whole site */

body { background-color: #fdd;
color: #700;
font-family: Arial, Helvetica, sans-serif;
}

em {
font-style: italic;
}

strong {
font-weight: bold;
}

/* Some pages will have this h1 not displayed and use a graphic instead */
h1 {
font-size: 150%;
font-weight: bold;
text-align: center;
padding: 0.7em 0;
}

/* General structural */
#container { 
margin: 0 10% 0 10%;
border: 4px solid #990000;
border-width: 0 4px;
background: url("images/crosshatch.gif");
padding: 0 8% 0 8%;
}

/* Links */
a { color: #d00;
text-decoration: none;
}
a:visited { color: #777;
}
a:hover { color: #ff7777;
font-weight: inherit;
background-color: #770000;
}

/* Text markup styles */
.date { font-weight: bold;
}

.title { font-style: italic;
}

#content {
position: relative;
}

#primary {
padding-top: 1.45em;
}

#secondary { border: 4px solid #900;
background-color: #fff;
}

#secondary p { font-size: 90%;
}

/* Because .history is default inside of #secondary
.history { background-color: #fff;
border: 4px solid #900;
border-width: 0 4px 0 4px;
}
*/

.history p { display: inline;
padding-left: 0.56em;
}

/* ---------------------------------------- */
/* Site navigation -- make it a horizontal button menu this time */

.site-navigation {
background-color: #fff;
height: 1.6em;
border: 4px solid #900;
font-size: 90%;
}

.site-navigation .navigation li {
display: block;
padding: 0.3em 0.6em;
margin-left: 0.55em; margin-right: 0.55em;
background-color: #fee;
border: 2px solid #900;
border-width: 0 2px;
float: left;
}

.site-navigation .navigation li a {
display: block;
}

.site-navigation .navigation li:hover {
background-color: #700;
}

.site-navigation li.current, .site-navigation li.current a {
color: #f77;
}

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

.breadcrumb-navigation {
/*background-color: #fff;*/
/*height: 1.6em;*/
/*border: 4px solid #900;*/
font-size: 80%;
}

.breadcrumb-navigation .navigation li {
display: block;
padding: 0 0.4em;
margin-left: 0;
background-color: transparent;
border: 1px solid #900;
border-width: 0 1px 0 0;
float: left;
}
.breadcrumb-navigation .navigation li.last {
border: none;
}

.breadcrumb-navigation .navigation li a {
display: block;
}

.breadcrumb-navigation .navigation li:hover, .breadcrumb-navigation .navigation a:hover {
background-color: transparent;
}

.breadcrumb-navigation li.current, .breadcrumb-navigation li.current a {
color: #f77;
}

/* ---------------------------------------- */
.story-navigation {
}

.story-navigation .navigation li {
display: block;
padding: 0 0.4em;
margin-left: 0;
background-color: transparent;
border: 1px solid #900;
border-width: 0 1px 0 0;
float: left;
}
.story-navigation .navigation li.last {
border: none;
}

/* ---------------------------------------- */
/* Special stuff for front page */

.ss-main #container { border-width: 4px;
margin-top: 1em;
position: relative; /* so we can move the nav menu around inside */
}

.ss-main p { padding: 0.5em;
}

.ss-main .site-header { background-color: #fff;
height: 180px; /* iris graphic is 209px x 181px */
padding-right: 209px;
border: 4px solid #990000;
border-width: 0 4px 4px 4px;
background-image: url("images/irises.gif");
background-position: 100% 0;
background-repeat: no-repeat;
}

/* The sum of heights of h1 and h2 should equal the graphic height above. */
.ss-main .site-header h1 { background-color: #fff;
padding: 0;
background-image: url(images/site-title.gif); /* 304 x 45 */
background-position: 50px 55px;
background-repeat: no-repeat;
border-right: 2px solid #900;
height: 100px;
}
.ss-main .site-header h1 span { display: none;
}

.ss-main .site-header h2 { background-color: #fff;
color: #900;
border-right: 2px solid #900;
padding-left: 10em;
padding-top: 5px;
height: 75px;
}
.ss-main .site-header h2 span { font-size: 85%;
}

.ss-main .page-header { display: none; 
}

/* ---------------------------------------- */
/* News--changing announcements for the site */
.ss-main .news { background-color: #fff;
border: 4px solid #990000;
border-width: 0 4px 0 4px;
padding-top: 1em; /* use padding, so borders are retained */
}

.ss-main #secondary {
border-width: 0;
}

.ss-main .site-navigation { 
position: absolute;
/*top: 184px;*/ /* put it right below the header */
top: 0; left: 0;
border-width: 0 4px 2px 4px;
/*width: 79.5%;*/ /* Just under 80%, so doesn't overshoot the right border */
width: 98.85%;
/*background-color: transparent;*/ /* laying on top of #news div */ 
}

.ss-main .site-navigation .navigation {
margin: 0 5%;
position: relative;
}

/* With the big site header right there, don't need the "Suncat Studio" link to be visible */
.ss-main .site-navigation li.current {
display: none;
}

.ss-main .history {
border: 4px solid #900;
border-width: 0 4px 0 4px;
}

.ss-main .legal { /*background-color: #fff;*/
font-size: 80%;
border: 4px solid #900;
border-width: 0 4px 0 4px;
}

.ss-main .legal p {
padding-left: 0.7em;
}

/********************************************************/
/*** Styles for Library pages ***/

/* Allow less outside space, for two columns */
.library #container { 
margin: 0 8% 0 8%;
padding: 0 6% 0 6%; 
position: absolute;
}

.library #content {
position: relative;
}

/*.library*/ .page-header {
border: 4px solid #900;
border-width: 4px 4px 0 4px;
background-color: #fff;
margin-top: 1em;
padding-top: 0.5em;
padding-bottom: 0.5em;
background-color: #fee;
}

.library h1.page-title span { display: none; 
                         }
.library h1.page-title { background-image: url(images/library-page-title.gif); 
             background-repeat: no-repeat;
height: 52px;
background-position: center center;
padding: 0;
}

/* Still need to pull this out and stick it up top */
.library .site-navigation {
/*border: 4px solid #900;*/
/*background-color: #fff;*/
/*height: 1.6em;*/
position: absolute;
top: 4px;
border-width: 0;
}

/* Push #primary down a bit to allow for moved .site-navigation */
.library #primary { 
background-color: #fff;
border: 4px solid #900;

}


/* Using standard ul for site nav, styled above */
/*
.library .site-navigation p {
background-color: #fee;
border: 2px solid #900;
border-width: 0 2px;
float: left;
margin-left: 0.5em;
margin-right: 0.5em;
padding: 0.3em 0.6em;
}
.library .site-navigation p:hover {
background-color: #700;
}
*/

.library .library-section { width: 48%;
                           margin-bottom: 50px;
background-color: #fff;
border: 4px solid #900;
border-width: 0px 4px 4px 4px;
margin-top: 4px;
                         }

.library .library-section h2 { 
height: 50px;
border-bottom: 2px solid #900;
background-color: #fee;
                   background-repeat: no-repeat;
                   background-position: center center;
                   /*text-align: center;*/
                   height: 27px; /* both section header images are 27px tall */
padding: 0.5em 0;
}
.library h2 span { display: none; /* Both section headers get graphic images */
                      }

.library .library-section p {
padding: 0.5em 0.5em 0.8em 0.5em;
line-height: 1.1em;
}

.library .genre-section {
border-bottom: 2px solid #900;
}

.library h3 {
text-align: center;
font-weight: bold;
padding-top: 0.2em;
padding-bottom: 0.3em;
}

.library .fiction-location {
font-weight: bold;
display: block;
}

.library .fanfic-source, .library .update-info {
color: #f00;
display: block;
font-size: 80%;
text-align: right;
}

/* Main sections */
.library #on-the-shelves { float: left; 
                         left: 0px;
                         /*margin: 0px 0px 0px 1%;*/
                         padding: 0px;
clear: left;
margin-left: -4px;
              }

.library #on-the-shelves h2 { background-image: url(images/library-on-the-shelves.gif); /* 168 x 27 */
                 }

.library #other-locations { float: right;
                           /*margin: 0px 1% 0px 0px;*/
                           padding: 0px;
border-width: 0 4px 3px 4px; /* allow for last-most genreSection */
margin-right: -4px;
                }

.library #other-locations h2 { background-image: url(images/library-other-authors.gif); /* 174 x 27 */
}

/* On the library page, #secondary is outlined, and site-nav is pulled out to up top */
.library #secondary {
width: 47%;
float: left;
                  }

.library #secondary p {
/*.library .history p { */
padding: 0.2em 0.6em;
/*font-size: 90%;*/
}

/*
.library .history { border: none;
}
*/

/********************************************************/
/*** Formatting for the fiction pages ***/

/* The text area should be 22em, with 2em clear left and right. */

.prose #container { text-align: left;
                    width: 30em;
                    margin-top: 1.5em; margin-bottom: 1.5em;
                    margin-left: auto;
                    margin-right: auto;
                    padding: 2em 2em 2em 2em;
border-top: 4px solid #900;
border-bottom: 4px solid #900;
position: relative;
}

.prose #header {
border: 2px solid #900;
border-width: 2px 0 0 0;
}

.prose #content {

}

.prose #primary {
padding: 0;
}

.prose h1 { text-align: left;
            font-size: 140%; 
background-color: #fff;
border: 2px solid #900;
border-width: 0 2px 0 2px;
padding-left: 1.4em;
padding-top: 1.5em;
}

.prose h2 { text-align: left; 
background-color: #fff;
border: 2px solid #900;
border-width: 0 2px 0 2px;
}

.prose h3 { text-align: left; 
font-size: 110%;
background-color: #fff;
border: 2px solid #900;
border-width: 0 2px 0 2px;
padding-left: 1.8em;
padding-top: 0.2em;
padding-bottom: 0.5em;
} 


.prose p { padding: 0.3em 2em 0.3em 2em;
background-color: #fff;
border: 2px solid #900;
border-width: 0 2px 0 2px;
line-height: 1.2em;
}

p.prose { text-indent: 2em;
        }

p.prose-navigation { padding: 1.0em 0em 1.0em 2em;
}

p.prose-quote { padding-left: 2em;
                font-style: italic;
}

p.prose-salutation { text-indent: 0em;
}

p.prose-centered { text-align: center;
                 } 

p.prose-right { text-align: right;
              }

p.prose-closing { text-indent: 0em;
                  padding-left: 13em;
                }

p.prose-small { font-size: 80%; 
padding: 0.5em 2.5em;
border-top: 2px solid #900;
} 

div.prose-copyright { padding: 0.8em 0em 0.8em 0em;
                     border-color: #900;
                     border-style: solid;
                     border-width: 2px;
background-color: #fff;
                   }

.prose-copyright ol{ font-size: 80%;
               list-style-type: lower-roman; 
background-color: #fff;
padding: 0.5em 2.5em;
}

.prose-copyright p { border-width: 0;
}

.prose-credits {
border-bottom: 2px solid #900;
}

.prose .breadcrumb-navigation {
position: absolute;
top: -7.5em; left: 0;
}

.prose #secondary {
border: none;
}


/********************************************************/
/*** Styles for Art/Showcase pages ***/

body.gallery { margin: 0px;
               padding: 0px;
             }

.gallery #container { position: absolute;
           }

.fs.gallery #container {
border-bottom-width: 4px;
}

.ss-showcase #container, .utena #container {
/*position: absolute;*/
}

.gallery #content {
position: relative;
border: 4px solid #900;
margin-bottom: 1em;
}

/*
.ss-showcase .page-header, .utena .page-header {
border: 4px solid #900;
border-width: 4px 4px 0 4px;
background-color: #fff;
margin-top: 1em;
padding-top: 0.5em;
padding-bottom: 0.5em;
background-color: #fee;
}
*/

.gallery h1, .gallery h2, .gallery h3 {
clear: both;
}


.gallery h2 {
font-size: 130%;
font-weight: bold;
border-bottom: 2px solid #900;
padding: 0.3em 0.4em;
margin-bottom: 0.3em;
background-color: #fdd;
}

.gallery h3 {
font-size: 100%;
font-weight: bold;
border: 2px solid #900;
border-width: 2px 0;
background-color: #fee;
padding: 0.3em 0.5em;
margin-top: 0.3em; margin-bottom: 0.3em;
text-align: right;
}

.ss-showcase .page-title span, .utena .page-title span { 
display: none; /*<-- turn off when image is available */
                         }

.ss-showcase h1.page-title { background-image: url(images/showcase-title.gif);
             background-position: top center;
             background-repeat: no-repeat;
             /*width: 328px;*/ height: 67px; /* Use dimensions of above image */
padding: 0;
           }

.utena h1.page-title { background-image: url(images/utena-title.gif);
             background-position: top center;
             background-repeat: no-repeat;
height: 72px;
padding: 0;
}

.gallery .site-navigation {
position: absolute;
top: 0;
width: 100%;
left: 0;
border: none;
}

.fs.gallery .site-navigation {
border: 4px solid #900;
border-width: 0 0 4px 0;
}

.gallery .page-navigation {
background-color: #fff;
border: 4px solid #900;
border-width: 4px 0;
position: absolute; /* contain the floats? */
top: 1.4em;
left: 0;
width: 100%;
}

.gallery .page-navigation .navigation {
padding-top: 0.5em;
padding-bottom: 0.5em;
border: 2px solid #900;
border-width: 0 2px;
margin-left: 0.5em; margin-right: 0.5em;
}

.gallery .page-navigation .navigation li {
display: block;
/*padding: 0.3em 0.6em;*/
/*background-color: #fee;*/
/*float: left;*/
text-align: right;
font-size: 80%;
/*float: right; clear: right;*/
margin: 0.6em 0 0.6em 0;
}
.gallery .page-navigation .navigation li span {
font-weight: bold;
padding: 0.1em 0.5em;
border: 2px solid #900;
border-width: 2px 0px 2px 2px;
}

.gallery .page-navigation .navigation li a {
border: 2px solid #900;
border-width: 2px 0 2px 2px;
padding: 0.1em 0.5em;
background-color: #fee;
}

.gallery .page-navigation .navigation li a:hover {
background-color: #700;
}

.ss-showcase.gallery #primary, .utena.gallery #primary {
padding-top: 8.4em;

}

.gallery .hall {
border: 4px solid #900;
border-width: 0 0 4px 0;
clear: both;
background-color: #fff;
}

.gallery .art-description {
/*margin: 0.5em 0;*/
/*padding: 0.2em 0.5em 0.3em 0.5em;*/
padding: 0.5em;
}

.gallery #secondary {
/*.gallery .history {*/
/*margin-bottom: 1em;*/
padding: 0.3em 0;
border: none;
}

.gallery #secondary p {
padding: 0.2em 0.6em;
font-size: 90%;
}

.gallery .history { border: none;
}


.gallery .sub-gallery {
}

.gallery .art-item {
border: 2px solid #900;
background-color: #fee;
margin: 0.5em 5%;
padding: 0.3em;
}

/* This is for the formatting and arranging of the images */

.gallery .images { width: 90%;
                   font-size: 90%;
                   /*margin-right: 5%;*/
                   /*margin-left: 5%;*/
                   /*float: left;*/
                   /*margin-bottom: 1em;*/
padding: 1em 5%;
background-color: #fff;
border: 4px solid #900;
border-width: 0 4px 0 0;
                 }

.gallery .image-entry { width: 10em;
                       float: left;
                       margin-right: 4px;
                       margin-left: 4px;
                       margin-bottom: 5px;
border: 2px solid #b00;
            }

.gallery .image-description { height: /*120px;*/ 100px;
                             overflow: auto;
                             text-align: left;
padding: 0 0.5em;
                           }

.gallery .image-media, .image-format { display: block;
                                    font-size: 80%;
                                  }

.gallery .image-feedback { display: block;
                          font-size: 80%;
                          margin-top: 0.7em;
                        }
						
.gallery  .image-download { font-weight: bold;
}						

.gallery .clear { clear: both; 
border-width: 0;
}

/* This set of rules will give us hover colors for thumbnail img borders */
.gallery .thumbnail { text-align: center;
             margin-bottom: 5px;
             margin-top: 3px;
           }

.gallery a img { border-style: none;
      }

.gallery .thumbnail a img { border-style: solid;
               border-color: #900;
               border-width: 3px;
             }

.gallery .thumbnail a:hover img { border-color: #f77;
background-color: transparent;
text-decoration: none;
                   }

.gallery .thumbnail a:visited img { border-color: #777;
                     }



/********************************************************/
/*** Formatting for web comic pages ***/

.web-comic #container { margin: 1em;
border-width: 4px;
padding-top: 1em;
padding-bottom: 1em;
           }

.web-comic #content {
position: relative;
border: 4px solid #900;
/*border-width: 4px 0;*/
margin-bottom: 1em;
background-color: #fff;
}

.web-comic .page-header, .web-comic .page-header h1 {
padding-top: 0.3em;
padding-bottom: 0.3em;
}

.web-comic .breadcrumb-navigation {
position: absolute;
top: 0; left: 0;
width: 100%;
background-color: #fff;
height: 1.3em;
/*border: 4px solid #900;*/
}

.web-comic .breadcrumb-navigation .navigation li {
display: block;
/*font-size: 80%;*/
margin: 0.3em 0 0 0.65em; 
float: left;
padding: 0;
border: none;
}

.web-comic .breadcrumb-navigation .navigation li span {
font-weight: bold;
}

.web-comic .breadcrumb-navigation .navigation li a {
border: 2px solid #900;
border-width: 0 2px;
padding: 0.2em 0.5em;
background-color: #fee;
display: inline;
}

.web-comic .breadcrumb-navigation .navigation li a:hover {
background-color: #700;
}

.web-comic #primary {
padding-top: 3.3em;
}

/* Maybe story-navigation needs to be moved up, not be specific to .web-comic */
.web-comic .story-navigation {
background-color: #fff;
border: 4px solid #900;
border-width: 2px 0;
position: absolute; /* contain the floats? */
top: 1.33em; left: 0;
width: 100%;
height: 1.3em;
}

.web-comic .story-navigation .navigation {
position: relative;
}

.web-comic .story-navigation .navigation li {
display: block;
font-size: 80%;
margin: 0.3em 0 0 0.65em; 
float: left;
padding: 0;
}
.web-comic .story-navigation .navigation li span {
font-weight: bold;
}

.web-comic .story-navigation .navigation li a {
border: 2px solid #900;
border-width: 0 2px;
padding: 0.2em 0.5em;
background-color: #fee;
}

.web-comic .story-navigation .navigation li a:hover {
background-color: #700;
}

.web-comic .story-navigation li.current, .web-comic .story-navigation li.current a {
color: #f77;
}

.web-comic .comic-content { padding: 1em;
text-align: center;
/*
border: 4px solid #900;
border-width: 0 0 4px 0;
*/
border: none;
background-color: #fff;
                        }

.web-comic .comic-content img {
border: 1px solid #900;
}

.web-comic #secondary {
border-width: 4px 0 0 0;
}

.web-comic .history {
padding: 0.5em 0;
}

.web-comic .legal {
padding: 0.5em;
}


/**********************************************/
/* Adjustments for quirks of individual pages */

/* The one-part stories generally have an extra header line for the publication date */

.glompophilia .breadcrumb-navigation, .letter-to-anthy .breadcrumb-navigation, .precise-mousing-surface .breadcrumb-navigation, .what-color-is-your-revolution .breadcrumb-navigation {
top: -9.5em;
}

.ss-showcase .page-navigation {
min-width: 43em;
}


/*********************************************/
/* Site-info */

.admin #container {
/*padding-bottom: 1em;*/
position: absolute;
}

.admin #content {
position: relative;
border: 4px solid #900;
margin-bottom: 1em;
background-color: #fff;
}

.admin h1 {
padding: 0.2em 0;
}

.admin #primary {
padding-top: 3.3em;
}

/* Yes, the pageNavigation here looks like the site-navigation up above. */

.admin .site-navigation {
border: none;
position: absolute;
top: 0; left: 0;
width: 100%;
}

.admin .page-navigation {
background-color: #fff;
height: 1.6em;
border: 4px solid #900;
border-width: 4px 0;
/*border-top-width: 4px;*/
width: 100%;
font-size: 90%;
min-width: 46em;
position: absolute;
top: 1.6em; left: 0;
}

.admin .page-navigation .navigation li {
display: block;
padding: 0.3em 0.6em;
margin-left: 0.55em; margin-right: 0.55em;
background-color: #fee;
border: 2px solid #900;
border-width: 0 2px;
float: left;
}

.admin .page-navigation .navigation li a {
display: block;
}

.admin .page-navigation .navigation li:hover {
background-color: #700;
}

.admin h2 {
font-size: 120%;
font-weight: bold;
clear: both;
padding: 0.3em 0.5em;
border: 4px solid #900;
border-width: 2px 0;
background-color: #fee;
}

.admin #updates ul, .admin #visits ul, .admin #site-map ul {
margin: 0.7em 0.5em;
}

.admin #updates ul li {
line-height: 120%;
margin-bottom: 0.5em;
}

.admin #visits ul li {
margin-bottom: 0.3em;
}

.admin #secondary {
border: none;
}

.admin p {
margin: 0.7em 0.5em;
line-height: 110%;
}


/*************************************/
/* There's at least one "general" page on the site */
/* For this site theme, .general is styled almost identically to .admin */

.general #container {
position: absolute;
border-width: 0 4px 4px 4px;
}

.general #content {
position: relative;
border: 4px solid #900;
margin-bottom: 1em;
background-color: #fff;
}

.general h1 {
padding: 0.2em 0;
}

.general h2 {
font-size: 120%;
font-weight: bold;
clear: both;
padding: 0.3em 0.5em;
border: 4px solid #900;
border-width: 2px 0;
background-color: #fdd;
}

/* borrowed from .gallery */
.general h3 {
font-size: 100%;
font-weight: bold;
border: 2px solid #900;
border-width: 2px 0;
background-color: #fee;
padding: 0.3em 0.5em;
margin-top: 0.3em; margin-bottom: 0.3em;
text-align: right;

}

.general p {
margin: 0.7em 0.5em;
line-height: 110%;
}

.general #secondary {
padding: 0.3em 0;
border: 4px solid #900;
border-width: 4px 0 0 0;
}

.general #secondary p {
padding: 0.2em 0.6em;
font-size: 90%;
}

.generaly .history { border: none;
}

/*
.general #container>p {
background-color: #fff;
border: 4px solid #900;
border-width: 0 4px;
padding: 0.4em 0.5em;
}
*/

.general .site-navigation {
border: none;
position: absolute;
top: 0; left: 0;
width: 100%;
}