@import url(//fonts.googleapis.com/css?family=Noto+Sans+JP:300,700);
@import url(//fonts.googleapis.com/css?family=Noto+Sans+HK:400,700);
@import url("../main.css");
/* Some definitions used everywhere */
.icon-facebook {padding: 2px;font-size:110%;color: #293C6A}
.icon-facebook:hover {color: #002}
.icon-facebooktop{background-color: #293C6A;border-radius: 25%;padding: 5px;font-size:110%;vertical-align: middle;color: #97a5b0}
.icon-facebooktop:hover {color: #002;}
.icon-tumblr {background-color: #97a5b0;border-radius: 50%;padding: 5px;font-size:110%;vertical-align: middle;color: #293C6A}
.icon-tumblr:hover {color: #002}
.icon-users{background-color: #97a5b0;border-radius: 50%;padding: 5px;font-size:110%;vertical-align: middle;color: #293C6A}
.icon-users:hover {color: #002}
.icon-insta{padding: 2px;font-size:110%;color: #293C6A}
.icon-insta:hover {color: #002}
.icon-instatop{background-color: #293C6A;border-radius: 25%;padding: 5px;font-size:110%;vertical-align: middle;color: #97a5b0}
.icon-instatop:hover {color: #002}
.icon-twittertop{background-color: #293C6A;border-radius: 25%;padding: 5px;font-size:110%;vertical-align: middle;color: #97a5b0}
.icon-twittertop:hover {color: #002}
.icon-mail{background-color: #97a5b0;border-radius: 50%;padding: 5px;font-size:110%;vertical-align: middle;color: #293C6A}
.icon-mail:hover {color: #002}
.icon-twitter{padding: 2px;font-size:110%;color: #293C6A}
.icon-twitter:hover {color: #002}
BODY {background: #000 url("//nsync-fiction.com/archive/skins/default/images/Background.png") repeat scroll 0% 0%;color: #000;margin: 0;padding: 0;text-align: center;font-family: 'Noto Sans HK', sans-serif; font-size:13.5px;line-height:150%}
textarea, select, option {font: inherit;padding: 0.3em;}
select, textarea {border: 1px solid #293C6A;margin: 1px;max-width: 100%;padding: 3px;}
/* cells in tables throughout the site */
TH {background: #293C6A;color: #293C6A;font-weight: 700;}
.tblborderline {border: 1px solid #293C6A;}
/* links */
A { color: #000;font-weight: 700;text-decoration: none;transition: all 0.8s ease 0s;}
/* hovering links */
A:hover {color: #293C6A;font-weight: 700;text-decoration: none;}
/* Overall Container */
#container {background: #d4d8e1 none repeat-x scroll left top;border: 1px solid #002;max-width: 1190px;margin: auto;padding-bottom:10px;}
#banner {background:#01010d none repeat-x scroll left top;}
/* the box at the top of the page */
#header {background: #666;padding-bottom: 3px;border-bottom: 1px solid #000;}
#submenulist {margin: 0;padding: 0;text-align: center;}
#menu {background: none repeat scroll 0 0 #293C6A;padding: 5px 5px;Border-top:1px solid #002; border-bottom:1px solid #002;}
#menulist {padding: 0;margin: 0;text-align: center;}
#menulist ul {margin-left: 0;padding-left: 0;white-space: nowrap;width: 100%}
#menulist li {display: inline;list-style-type: none;}
#menulist a {padding-top: 5px;padding-bottom: 5px;padding-left: 9px;padding-right: 9px;margin-right: 3px;}
#menulist a:link, #menulist a:visited {color: #97a5b0;font-family: 'Noto Sans JP', cursive;font-size: 16pt;font-weight: normal;}
#menulist a:hover{color: #002;border-radius: 3px;}
#submenu {background-color: #293C6A;padding-top: 5px;padding-bottom: 5px;padding-left: 4px;padding-right: 4px;border-bottom: 1px solid #293C6A;border-right: 1px solid #293C6A;border-left: 1px solid #293C6A;color: #293C6A;font-family: 'Noto Sans JP', cursive;font-size: 16pt;font-weight: normal;}
#submenulist li {display: inline;list-style-type: none;color: #BF8D48}
#submenulist {margin: 0;padding: 0;text-align: center;}
#submenulist a:link, #submenulist a:visited {color: #293C6A;font-family: 'Noto Sans JP', cursive;font-size:16pt;font-weight: normal;}
#submenulist a {padding-top: 5px;padding-bottom: 5px;padding-left: 9px;padding-right: 9px;margin-right: 3px;}	
#submenulist a:hover{color: #97a5b0;border-radius: 3px;}
.icon-arrow-down {font-size:15px !important}
.icon-arrow-down:hover{background:none !important}
/* Site  Footer */
#footer {border-top: 2px solid #293C6A;padding:  10px 10px 0px;text-align: left;
clear: both;}
/* Line below notes */
.notes {border-bottom: 1px solid #293C6A;border-top: 1px solid #293C6A;padding-top: 5px;padding-bottom: 5px;}
.storyinfo {border-bottom: 1px solid #293C6A;}
/* Most pages use pagetitle to format the page's title */
#pagetitle {text-align: center;font: 22px 'Noto Sans JP', sans-serif;font-weight:300;margin-top: 1em;margin-bottom: 1em;color:#293C6A;}
#pagetitle a{font-weight:400;}
/* 
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 {text-decoration: none;font-weight: 700;border: 0px solid #000;border-collapse: collapse;padding: 0 2px;}
/* the currently selected letter and currently selected page */
#alphabet #currentletter, #pagelinks #currentpage {font-weight: 700;color: #293C6A;padding: 0 2px;border: 1px solid #293C6A}
#alphabet #currentletter:hover, #pagelinks #currentpage:hover {color: #293C6A;border: 1px solid #293C6A;}
/* labels throughout the site in forms and in other places */
.label, .classification {font-weight: 700;}
/* Admin options in various places.  */
.adminoptions {font-weight: 700;}
/* The listings of stories etc. */
/* .sectionheader styles the headings "Stories" and "Series" */
.sectionheader {text-align: center;font-size: 14px;font-weight: 700;margin-top: 1em;padding-bottom: 5px;}
/* The box around each individual review */
.listbox {padding: .75em;border-top: 1px solid #293C6A;}
/* The box around each individual review in reviewsby*/
.listboxby {margin: 1em 6%;padding-bottom: 10px;padding-top: 10px;border-top: 1px solid #293C6A;}
/* The color of the dashed border before review responses*/
.revresponse{border-top-color: #293C6A;}
/* The title bar for each story box. */
.listbox .title {color: #000;font-weight: 700;padding: 4px;padding-left: 8px;}
.listbox .title a{color:#000;}
.listbox .title a:hover {color:#293C6A;}
/* The content of the box...summary, categories, etc. */
.listbox .content {padding: 6px;background-position: top left;background-repeat: repeat-x;}
/* The tail info published date etc. on the last line */
.listbox .tail {padding: 4px; }
.listboxa {border-top: 1px solid #293C6A;margin-top: -1px;padding-top: 5px;padding-bottom: 5px;}
/*End story/series listings */
/* User Profile stuff */
/* The sort menu in the profile */
#profile #sort {text-align: right;font-weight: 700;color: #000;}
/* The following declarations control the tabs */
/* The outer tab box */
#tabs {text-align: center;margin: 0;padding: 0;}
/* The individual tabs. */
#tabs span {font-size: 13px;padding: 3px;border: 1px solid #293C6A;line-height: 2.2em;white-space: nowrap;color:#293C6A;}
#tabs a {color:#293C6A;}
#tabs a:hover {color:#000022;}
/* Links in the tabs */
#tabs #active {color: #293C6A;border: 1px solid #000022;background:#000022;}
#tabs #active a {color:#293C6A;}
#tabs #active a:hover {color:#97a5b0;}
/* This controls the look of the blocks on the index page.   */
/* The box around the block */
.block {margin-bottom: 1em;border: 0px solid #000;}
/* The block's title */
.block .title  {color: #293C6A;border-bottom: 1px solid #293C6A;font-family: 'Noto Sans JP', sans-serif;font-size: 22px;padding-top: 10px;}
.block .title a {font-weight: 400; color:#293C6A;}
.block .title a:hover {color:#293C6A;}

/* The block's content */
.block .content {padding-top: 6px;padding-bottom: 6px;}
.block .content .topicons{padding-top: .5em;padding-bottom: .7em;}
.block .recentbox, .block .featuredbox {padding-top: 6px;padding-bottom: 6px;}
.block .title:empty  {border: none;padding-top: 0px;}
.block .content:empty  {padding-top: 0px;padding-bottom: 0px;}
.block .recentbox:empty , .block .featuredbox:empty {padding-top: 0px;padding-bottom: 0px;}
/* Neater News */
.newsbox {margin-bottom: 20px; border-bottom: 0px solid #000;padding-top: 5px;padding-bottom: 5px;}
.newstitle {font-weight: 700; font-size: 1.1em;text-decoration:underline; }
.commentsig {font-weight: 700; margin-top: .2em; margin-bottom: 1em;}
.newsarchive {text-align: center;}
/* these define the comments used in some tables and the listings of the stories, series, and challenges */
.commentodd { padding-bottom: 5px; }
.commenteven { padding-bottom: 5px; }
/*Style of the new and updated notices in the storylist*/
.new {font-style: italic;font-weight: 700;color: #293C6A;}
/*Style of the tracker notices*/
.tracker{color: #293C6A;}
.tracker a{font-weight: 700;color: #293C6A;}    
.tracker a:hover{color: #293C6A;}   
/*Style of user preferences*/
.useroptsleft {border: 2px solid #293C6A;  float: left; width: 48.7% !important;}
.useroptsright {border: 2px solid #293C6A;float: right;width: 48.7% !important;}
.useroptsleft .title  {border-bottom: 1px solid #293C6A;font-family:'Noto Sans JP',cursive;font-size:20px;font-weight:300;margin: 0 0 5px;padding-bottom: 5px;
}   
.useroptsright .title  {
    border-bottom: 1px solid #293C6A;
font-family:'Noto Sans JP',cursive;font-size:20px;font-weight:300;margin: 0 0 5px;
    padding-bottom: 5px;
}   
    
/*Style of top 10 list*/    
#top10list {border: 2px solid #293C6A;  
    margin: 0 auto !important;  
    padding: 10px !important;
    width: 300px !important;}
    
.row  {margin: 10px;}

fieldset {
    border: 2px solid #293C6A;
    margin-bottom: 10px;
}

.betaprofile {
padding-top: 5px;
border-top: 1px solid #293C6A;}

.betainactive {
    border-top: 1px solid #293C6A;
    font-style: italic;
    padding-top: 15px;
    text-align: center;
}

.betafields {
padding-bottom: 3px;}

.profileimg IMG{border: 1px solid #293C6A; width:100px; height:100px; }
.forms input.textbox, input.userSelect, select.multiSelect {
    width: 99% !important;
    margin: 1px;
    padding: 3px;
    border: 1px solid #293C6A!important;
}
.forms select.multiSelect {
    width: 100% !important;
    margin: 1px;
    border: 1px solid #293C6A!important;
}
.pmtop, .pmmessage {
    border-bottom: 1px solid #293C6A;
}
/* Tim Pietrusky advanced checkbox hack (Android <= 4.1.2) */
body{ -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }
.header { position: relative; }
#toggle, .toggle { display: none; }
.menu > li { list-style: none;}
.menu { display: none;}
.listtitle {border-bottom: 1px solid #293C6A; font-family:'Noto Sans JP',sans-serif;font-size:20px;font-weight:300; margin: 0 0 5px; padding-bottom: 5px;}   
#nominations {width: 80%; margin: 0 auto;}
/* Nicolas Gallagher micro clearfix */
.clearfix:before, .clearfix:after { display: table; content: ""; }
.clearfix:after { clear: both; }
@media screen and (max-width: 590px) {
#leftindex {width: 100%; margin-bottom: 0px; padding-bottom: 0px;}
#rightindex {width:100%; padding-top: 0px; }
.useroptsleft {width: 100%!important; float: none; margin-bottom: 1.5em;}
.useroptsright {width: 100% !important; float: none;}
html > body .column {width: 70%;}
.column {margin-left: 30%; text-align: left;}
#tabs span {line-height: 250%;}
#output {padding: 0px;}
#mainpage {padding: 5px 10px 10px}
#footer {padding:10px;}
.wrapper {display: table; max-width: 100%; overflow: hidden;table-layout: fixed;width: 100%;}
.searchblock {display: none;}
.one {display:table-footer-group;}
.two{display:table-header-group;}
#menu {display: none;}
#submenu {display: none;}
.tblborderline {width: 100%!important; table-layout: fixed; word-wrap:break-word;}
#settingsform LABEL {margin-top: 0 !important;text-align: left;width: 100%;}
#settingsform input.textbox, #settingsform select.textbox,#settingsform textarea.textbox {width: 90%;margin: 0 !important;}
#settingsform textarea.mceNoEditor {width: 90% !important;}
#settingsform DIV {clear: both;}
.tblborder { max-width: 100%; padding: 0; table-layout: fixed; word-wrap:break-word;}
#login {width: 100% !important;}
.revresponse {margin: 0.5em 1em;}
.reviewformc {width: 100% !important;}
#profile {margin-top: 1em;}
.favs {width: 100% !important;}
.biomce {width: 100% !important;}
BODY {font-size:14.5px;word-wrap:break-word;}
.sectionheader {font-size: 15px;}
.newstitle {font-size: 15px;}
#nominations {width: 90%;}
#top10list {width: 93% !important;}
.shoutbox textarea{width:96% !important;}
.jumpmenustory{text-align:left;float:none;display:table-footer-group;}
.storyorder{display:table-header-group;}
.nowrap{white-space:nowrap;}
#hidebanner A:hover img  {display:block;position:relative;max-width:70%;}
#container {padding: 0px; border: none;}
.icon-arrow-up::before {padding-right: 10px;}
.icon-arrow-up::before {padding-right: 10px;font-size: 16px;}
.icon-arrow-down, .icon-arrow-down:hover {font-size: 17px; color:#293C6A}
.icon-arrow-down:before {padding: 0 5px 15px 20px;position: absolute;right: 0;z-index: 99;line-height: 33px;}
.toggle {cursor:pointer;position:relative;width:100%;left:0;display:block;cursor: pointer;background:#293C6A;height: 33px;border-bottom:1px solid #002; border-top:1px solid #002;}
#toggle {display:none;}
.toggle .spinner2 {display: block;position: absolute;top: 10px;width: 19px;height: 2px;background: #97a5b0;-webkit-transition: 350ms;-moz-transition: 350ms;-o-transition: 350ms;-ms-transition: 350ms;transition: 350ms;}
.toggle .diagonal.part-1 {float:left;}
.toggle .horizontal {float:left;top: 15px;}
.toggle .diagonal.part-2 {float:left;top:20px;}
#toggle:checked ~ .toggle > .spinnerwidth .horizontal {background:rgba(0, 0, 0, 0) none repeat scroll 0 0;}
#toggle:checked ~ .toggle >  .spinnerwidth .diagonal.part-1 {-webkit-transform: rotate(-45deg) translateY(7px);-moz-transform: rotate(-45deg) translateY(7px);-ms-transform: rotate(-45deg) translateY(7px);=-o-transform: rotate(-45deg) translateY(7px);transform:rotate(-45deg) translateY(7px);}
#toggle:checked ~ .toggle >  .spinnerwidth .diagonal.part-2 {-webkit-transform: rotate(45deg) translateY(-7px);
-moz-transform:rotate(45deg) translateY(-7px);-ms-transform:rotate(45deg) translateY(-7px);-o-transform:rotate(45deg) translateY(-7px);transform:rotate(45deg) translateY(-7px);}
.toggle .spinnerwidth {display: block;-webkit-transition: 350ms;-moz-transition: 350ms;-o-transition: 350ms;-ms-transition: 350ms;transition: 350ms;  width: 61px;margin: 0 auto;position: absolute;left: 41%;left: calc(50% - 2.7em)}
.toggle .spinnerwidth:after {font: 25px "Noto Sans JP",sans-serif;text-transform: none;position: absolute;content: "Menu";display:block;margin-left: 25px;color:#97a5b0;line-height: 29px;}
#toggle:checked ~ .menu {max-height: 1000px;}
.menu {max-height:0;-webkit-transition:all 0.25s ease-in-out 0s;-moz-transition:all 0.25s ease-in-out 0s;-o-transition:all 0.25s ease-in-out 0s;transition:all 0.25s ease-in-out 0s;overflow: hidden;margin: 0;padding: 0;position: relative;width: 100%;background:#293C6A;overflow:hidden;display:block;opacity:1}
#menusearch, .menusearch{ display: none; }
.icon-search{display: block; position: absolute; cursor: pointer;-webkit-user-select: none;left:0;z-index: 100;color: #293C6A;}
.icon-search:hover {color:#293C6A}
.icon-search:before{display: block;padding: 0.2px 20px 15px 5px;z-index:99;line-height: 33px;margin-top:-.5px;font-size: 19px;}
.searchmenu{ display: block;width: 100%;max-height: 0px; position: relative; margin: 0;background:#293C6A;overflow: hidden;x-webkit-transition:all 0.25s ease-in-out 0s;-moz-transition:all 0.25s ease-in-out 0s;-o-transition:all 0.25s ease-in-out 0s;transition:all 0.25s ease-in-out 0s;}
.searchmenu #searchterm {width: 90%;}
.searchmenu button, .searchmenu input[type="reset"], .searchmenu input[type="button"], .searchmenu input[type="submit"]  {display: none;}
.searchmenu input {color: #000;font-size: 17px;text-align: center;}
#menusearch:checked ~ .searchmenu{max-height:45px; padding: 3px 0;opacity:1;border-bottom: 1px solid #97a5b0}
.toggle:after {background: none;content:"";display: block;width: 100%; position: relative; z-index: -1;}
.menu > li > a {box-sizing: border-box;color: #97a5b0;display: block;font: 25px "Noto Sans JP",sans-serif;text-decoration: none;text-transform: none;width: 100%; border-bottom: 1px solid #002;padding-left:10px;text-align:left;line-height:33px}
#toggle:checked ~ .toggle {border-bottom:1px solid #002}
#browsenav, .browsenav{ display: none; }
.icon-circdown, .icon-circdown1{display: block;float: right;position: relative; cursor: pointer;-webkit-user-select: none;z-index: 100;color: #293C6A;}
.icon-circdown:hover {color:#293C6A}
.icon-circdown:before, .icon-circdown1:before {display: block;padding: 0 20px;z-index:99;font-size: 19px;line-height:31px}
#browsenav:checked ~ .menu .icon-circdown:before{content: "\ea41";}
#memnav:checked ~ .menu .icon-circdown1:before{content: "\ea41";}
#browsenav:checked ~ .menu .browsemenu{max-height: 600px;}
.menu .browsemenu > li > a, .menu .memmenu > li > a {box-sizing: border-box;color: #293C6A;display: block;font: 25px "Noto Sans JP",sans-serif;text-decoration: none;text-transform: none;width: 100%; border-bottom: 1px solid;padding-left:30px;text-align:left;line-height: 33px;}
.menu .browsemenu, .menu .memmenu{max-height:0;-webkit-transition:all 0.25s ease-in-out 0s;-moz-transition:all 0.25s ease-in-out 0s;-o-transition:all 0.25s ease-in-out 0s;transition:all 0.25s ease-in-out 0s;overflow: hidden;margin: 0;padding: 0;position: relative;width: 100%;background:#293C6A;overflow:hidden;display:block;opacity:1}
#memnav:checked ~ .menu .memmenu{max-height: 600px;}
.menu .memmenu > li, .menu .browsemenu > li {list-style: outside none none;}
.pmnotice {width: 31px}
#footer {text-align: center;}
#footer .jumpmenustory {text-align: center;}
#footer select {margin-top:4px;}
}