/* Some definitions used everywhere */




BODY 
{ 
        
background-image: url('https://fiction.tokiohotelfiction.com/skins/burntGold/images/square_bg.png');
    background-repeat: repeat;
                
        
color: #090626;
        
margin: 0;
        
padding: 0;
        
text-align: center;
        
font-family: arial;
        
font-size: 13px;


}



.tblborder {
    padding: 6px;
    border: dotted 1px white;

}

#containMySoul
{
        
position: relative;


margin: 10px auto;


height: auto;


width: 936px;


background: transparent;




}






#container 
{
        
width: 756px;
        
position: relative;
        
background: #dfd8cf; 
float: left;

border-radius: 20px 0px 0px 0px;

bbox-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}






/* side menu at right of page*/






#sidebar 
{
        
width: 175px;
        
float: right;
        
        
text-align: center;
         
background: #c5b1a5; /* For browsers that do not support gradients */    
    background: -webkit-linear-gradient( #c5b1a5, #5e809e, #292b47  ); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient( #c5b1a5, #5e809e, #292b47); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient( #c5b1a5, #5e809e, #292b47); /* For Firefox 3.6 to 15 */
    background: linear-gradient( #c5b1a5, #5e809e, #292b47); /* Standard syntax (must be last) */ 

border-radius: 0px 0px 20px 0px;

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}






#sidemenu 
{
        
line-height: 1em;

        
}






#sidemenu ul 
{
        
list-style: none;
        
margin: 0;
        
padding: 1px;

}






#sidemenu li 
{
        
text-align: left;
        
margin:0px;
font-weight: normal;
        
}






#sidemenu li a 
{
        
display: block;
        
padding: .4em;
        
text-decoration: none;
        
color: #fff; 
        
border-left: 0px solid #6093a8;
font-weight: normal;
        

        
}






#sidemenu li a:hover 
{
        
color: #090626; 
        
border-left: 10px solid #ffffff;
        
}
        




/* the box at the top of the page */




#banner 
{
        
height: 249px;
         
background: url('https://fiction.tokiohotelfiction.com/skins/jellyGold/images/jellyban.png') no-repeat;

border-radius: 20px 0px 0px 0px;
}








/* the following defines your menu above the banner div */
/* the box around the menu and aligning the text to center */




#menu 
{ 
        
padding: 2px 4px 5px 4px;
        

background: #292b47; /* For browsers that do not support gradients */    
    background: -webkit-linear-gradient(left, #292b47 , #5e809e, #c5b1a5); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, #292b47 , #5e809e, #c5b1a5); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #292b47 , #5e809e, #c5b1a5); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #292b47 , #5e809e, #c5b1a5); /* Standard syntax (must be last) */ 
text-align:right;
        
border-top: 1px solid #fefeff;
        
border-bottom: 1px solid grey;


}






#menulist 
{
         
padding: 0px;
         
margin: 0px;



}






#menulist ul 
{
         
margin-left: 0;
         
padding-left: 0;
         
white-space: nowrap;


}






#menulist li 
{
        
display: inline;
         
list-style-type: none;


}






#menulist a 
{ 
        
padding: 1px 5px;
         
margin-right: 3px;
        
}






#menulist a:link, #menulist a:visited 
{
         
color: #fff;
         
text-decoration: none;
         
font-weight: bold;


}






#menulist a:hover
{
         
color: #d6dce1;
        
text-decoration: none;
        
font-weight: bold;


}








/* Main page surrounds the text between the header and the footer.  
For IE, height is set to 650 to force the footer down to the bottom of the page where the content is short.  
And the second declaration is for everyone else so that it will scroll if longer but be a minimum of 650px
*/

#story{

padding: 10px;
font-size: 120%;
}


#mainpage 
{
        
height: 550px;
        
padding: 5px;
        
text-align: left;


}




html>body #mainpage 
{ 
        
height: auto;
        
min-height: 550px;


}






#middleindex 
{
        
        
text-align: left;
        
margin: 10px 0px;


}






#leftindex 
{ 
        
position: relative;
        
width: 200px;
        
margin: 0;


float: left;


}






#rightindex 
{
        
position:relative;
        
width: 535px;


margin-left: 10px;


float: left;


clear: none;


}








/* the footer box at the bottom of the page */
#footer


{
         
color: #fff;

        
padding: 5px;
        
clear: both;


}








/* End universal page setup */


IMG 


{ 
        
border: 0;
        
padding: 0;
        
margin: 0;


}






/* Header cells in tables throughout the site */
TH 


{ 
        

        
background: #fff;
        
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

font-weight: bold;


}




/* links */
A 


{ 
        
color: #000000;
        
font-weight: bold;
        
text-decoration: none;


}




/* hovering links */




A:hover 
{
        
color: #622a2a;
        
        
text-decoration: none;


}






/* this is a carryover from 1.1.  Generally it is used around tables and table cells. */




.tblborder 
{ 
        
padding: 6px;
        
border-collapse: collapse;


}






/* This makes the actual story text appear in a 750px box, which prevents those at 800x600 from having to scroll sideways to view the story. To remove it, just delete this css and the "div id=skinny" tag (and the closing tag) from viewstory.tpl
*/




/* Most pages use pagetitle to format the page's title */




#pagetitle 
{ 
        
text-align: center;
        
font-size: 14px;
        
color: #fff;
        
font-weight: bold;
        
margin: 1em 0;


}






/* 
Where there's a list of alphabet links #alphabet controls their look. 
Just to make things simpler #pagelinks controls the look of the links at the bottom of multi-page results
and will be set here too. Generally, they look alike.
*/
/* the box around the links */




#alphabet, #pagelinks 
{
        
text-align: center;
        
word-spacing: .1em;
        
margin: 1em;


}




/* each link */




#alphabet A, #pagelinks A 
{
        
color: #FFF;
        
text-decoration: none;
        
font-weight: bold;
        
background: #4f4f67;
        
border: 1px solid #fff;
        
border-collapse: collapse;
        
padding: 0 2px;


}




/* each link when hovered over */




#alphabet A:hover, #pagelinks A:hover 
{
        
background: #aeaec1;
        
color: #fff;


}




/* the currently selected letter and currently selected page */




#alphabet #current_letter, #pagelinks #currentpage 


{
        
background: #aeaec1;
        
color: #fff;
        
font-weight: bold;
        
border: 1px solid white;
        
padding: 0 2px;


}




/* End alphabet and page link declarations */


/* labels throughout the site in forms and in other places */




.label, .classification 
{
        
font-weight: bold;


}


/* Reviews */

.contenteven
{
padding: 5px;
border: 5px outset #EFE8E8;

}

.contentodd
{
padding: 5px;
border: 5px outset #EFE8E8;

}

/* Admin options in various places.  */




.adminoptions 
{ 
        
color: #0f5372;
        
font-weight: bold;
padding: 10px;

}








/* The listings of stories etc. */
/* .sectionheader styles the headings "Stories" and "Series" */




.sectionheader 
{
        
text-align: center;
        
font: 14px bold;
        
color: #fff;
font-family: arial;
padding: 10px;


}






/* The box around each individual story */




.listbox 
{
        
margin: 1em 5%;
     
border: 0px solid #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}






/* The title bar for each story box. */




.listbox .title 
{

background: #7598bb;   
    
        
color: #1a3549;  
        
font-weight: bold;
        
padding: 10px 10px 10px 15px;

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}






/* The content of the box...summary, categories, etc. */




.listbox .content 
{
        
padding: 10px;
        
padding-top: 15px;
        
border-top: 1px ridge grey;
        
background: #ffffff;



}






/* The tail info published date etc. on the last line */




.listbox .tail 
{
        
border-bottom:1px solid #fff;
        
background-color: #7598bb;        
        
padding: 10px; 

color: #fff;
}






.listbox .title a {color:#fff;
}




.listbox a:hover 
{
color:#f0efef;
}






/*End story/series listings */


/* titleblock is used for the title information in series and challenges */




#titleblock 
{
        
margin: 0 10%;



}






/* The pulldown jump menus on several pages. */




.jumpmenu 
{
        
text-align: right;
        
margin-right: 1em;


}








/* This is used on series and challenges and other places where a response is solicited */




.respond 
{ 
        
text-align: center;
        
padding: 5px;


}






/* The sort menu on the categories page */




#sort 
{ 
text-align: center; 
}








/* On pages that don't use listings, the content is surrounded by a div labeled output to */




#output 
{
        

        
padding: 10px;


}






/* User Profile stuff */
/* The top list of information */




#profile 
{
        
margin: 1em 2%;


}




/* The sort menu in the profile */




#profile #sort 
{
        
text-align: right;
        
font-weight: bold;
        
color: #fff;
 
}




/* The following declarations control the tabs */
/* The outer tab box */




#tabs 
{
        
margin: 0;
        
padding: 0;


}




/* The individual tabs. */




#tabs span 
{
        
border: 1px dotted #c5b1a5;
        
padding: 2px;


}




/* Links in the tabs */






#tabs #active 
{
        
color: #fff;
        
border: 1px dotted #c5b1a5;


}






/* This controls the look of the blocks on the index page.   */


/* The box around the block */






.headerblock 
{ 
        
margin-bottom: 1em;


}








/* The sidebar block's title */




.headerblock .title 
{
        
color: #fff;
        
background: #4f5169; 
    

font-weight: bold;
        
padding: 4px;
        
padding-left: 8px;

border-bottom: 1px ridge white;

border-top: 1px ridge white;


}








/* The side block's content */




.headerblock .content 
{
        
padding: 5px;
        


        
text-align: left;

border-top: 1px ridge grey;
}






.block 
{ 
        
margin-bottom: 2em;


}






/* The block's title */




.block .title 
{
        
color: #4f5169;
        
background: #dfe3ed; /* For browsers that do not support gradients */    
    

        
        
font-weight: bold;
        
padding: 4px 0px 4px 8px;





}








/* The block's content */




.block .content 
{
        
padding: 15px 5px 5px 5px;
        
background-color: #fefeff;
border-top: 1px ridge white;

text-align: left;
color: #9585555;



box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}






/* The block's end */




.block .end 
{
        
padding: 5px;
        
border-bottom: 1px solid #fff;
        
background: #fff;
        
text-align: left;


}








/* The next link at the bottom of a multi-chapter story */




#next 
{ 
float: right; 
}




/* The previous link at the bottom of a multi-chapter story */




#prev 
{ 
float: left; 
}






#browse #category_content 
{ 
width: 95% !important; margin: 1em auto; 
}






#loginblock 
{ 
        
margin: 2px;
        
text-align: left;


}






#loginblock .textbox, #loginblock .checkbox 
{ 


}






#loginblock .button 
{ 
        
padding: 0; 
        
margin: 0; 
        
font-weight: bold; 
        
font-family: "Arial"; 


}
#loginlinks 


{
        
display: inline;


}




#loginlinks A 
{
        
color: #999;


}