* { margin:0; padding:0; }

body { color:#111; font:80%/1.3 helvetica, arial, sans-serif; background-color:#000; }

body#home { min-width: 980px; margin:12px 0 0 0; }

#home h1 a { color:#f86f6f; }
#home h1 a:hover { text-decoration:none; color:#f43939; }

#home #container { width: 98.8%; margin-left: 1.2%; }

#home .tile { float:left; position:relative; width:15.45%; height:130px; overflow:visible; background-color: #000; margin:0 1.2% 12px 0; z-index: 0; }
	.tile img { float:left; width:100%; height:100%; border:0; }

#home #site-id { width: 32.1%; background: url(../images/fatebook-logo.gif) no-repeat 0 0; position: relative; z-index: 999; }
#character #site-id { width: 350px; background: url(../images/fatebook-logo.gif) no-repeat 0 0; height:130px; position: fixed; top: 24px; z-index: 999; }
#about #site-id { width: 350px; background: url(../images/fatebook-logo.gif) no-repeat 0 0; height:130px; position: absolute; top: 24px; z-index: 999; }
#theme #site-id { width: 350px; background: url(../images/fatebook-logo.gif) no-repeat 0 0; height:130px; position: relative; float: right; clear: both; z-index: 999; }

	#site-id h1 { background: url(../images/fatebook-logo.gif) no-repeat 0 0; height: 70px; width: 266px; }
		#site-id h1 a { display: block; text-indent: -5000px; height: 70px; width: 266px; }
	#site-id h3 { text-indent: -5000px; height: 15px; }
	#site-id h4.npl a { display: block; text-indent: -5000px; height: 45px; width: 240px; }
	#site-id img { width: auto; height: auto; float: none; }
	#site-id #menu { background-color: #267ed7; padding-bottom: 6px; }
		#site-id #menu div { padding-top: 6px;  }
			#menu .column { float: left; width: 50%; }
			#menu .column h4 { margin: 0 12px; color: #fff; font-weight: normal; text-transform: uppercase; letter-spacing: .1em; }
			#menu .column ul { margin: 6px 12px 24px 12px; }
			#menu .column ul li { list-style: none; font-size: .9em; line-height: 1.4em; padding-left: 10px; background: url(../images/menu-bullet.gif) no-repeat 0 50%; }
			#menu .column ul li a { color: #fff; }
			#menu .column ul li a:hover { text-decoration: none; }
		#site-id #menu div a#close { position: absolute; right: 6px; bottom: 6px; display: block; height: 15px; width: 15px; background: url(../images/close-button.gif) no-repeat top left; text-indent: -5000px; }
	
	#site-id a#show-menu { width: 86px; height: 20px; display: block; background: url(../images/more-button.gif) no-repeat 0 0; margin: 0; text-indent: -5000px; position: absolute; right: 8px; bottom: 8px; }
	#site-id a#show-menu:hover { background: url(../images/more-button.gif) no-repeat 0 -20px; }

#home .text { border: 1px solid #cc0000; height: 100%; width: 100%; overflow: hidden; background-color: #000; background-image: none; }
	#home .text p { font-size: 1em; line-height: 1.4em; margin:8px; color: #dadada; }
	#home .text p a { color: #dadada; text-decoration: none; }
	#home .text p a:hover { text-decoration: underline; }

#home #footer { padding:5px 0; font:.9em/1.3 helvetica,arial,sans-serif; color:#999; background-color:#000; clear:both; margin-right: 1.2%; }
#character #footer, #about #footer { padding:10px; font:.9em/1.3 helvetica,arial,sans-serif; color:#999; clear:both; }
#theme #footer { position: relative; bottom: 0; padding:10px; font:.9em/1.3 helvetica,arial,sans-serif; color:#999; clear:both; margin-top: 100px; }

	#footer a { color: #999; }
	#footer a:hover { text-decoration: none; }

.jsclass body .randomordercontent { display: none; }

/* About Page */
#about #content { float:none; margin-top: 0; margin-left: 24px; width: 500px; background-color: transparent; }
	#about #content .wrapper { padding: 177px 12px 24px 12px; }
	#about #content .indent { padding-right: 100px; }
	#about 	#content h2 { color: #267ed7; font-size: 1.4em; }
	#about 	#content h3 { font-size: 1em; color: #333; margin: 1em 0; }	
	#about 	#content a { color: #000; }
	#about 	#content a:hover { text-decoration: none; }
	#about 	#content p { color: #555; margin-bottom: 1em; font-size: .95em; line-height: 1.4em; }


/* Character Pages */

#character #imagewrap, #about #imagewrap { position: absolute; top: 0px; left: 0px; z-index: 0; width: 100%; height: 100%; }
#character #container, #about #container { position: relative; z-index: 1; min-width: 980px; width: 100%; }
#character #uber-container, #about #uber-container { position: absolute; text-align: left; width: 100%; height: 100%; margin:auto; left: 0px; top: 0px; z-index: 1; overflow: auto; }

#content { float:right; margin-top: 24px; width: 354px; background-color: #CFE5FF; line-height: 1.3; }
	#content .wrapper { padding: 12px; }
	#content h2 { color: #336699; font-size: 1.4em; }
	#content a { color: #000; }
	#content a:hover { text-decoration: none; }
	#content p { color: #555; margin-bottom: .6em; font-size: .95em; line-height: 1.4em; }
	#content p.facebook-link { padding-left: 20px; background: url(../images/icon_share_facebook.gif) no-repeat 0 1px; }
	#content p.twitter-link { padding-left: 20px; background: url(../images/icon_share_twitter.gif) no-repeat 0 1px; }
	#content .mov-wrapper { margin: 1em 0; }
	
#twitter_div ul li { color: #555; list-style: none; margin-bottom: .5em; font-size: .95em; line-height: 1.4em; }
	#twitter_div ul li a { color: #999; text-decoration: none; font-style: italic; }

/* Theme Pages */

#theme #container { position: relative; min-width: 980px; padding-top: 24px; }
#video-content { position: relative; clear: both; padding-top: 48px; padding-bottom: 20px; }
#theme .mov-wrapper { position: relative; z-index: -99; width: 100%; height: 320px; }

#theme a#remix-button { width: 93px; height: 20px; display: block; background: url(../images/remix-button.gif) no-repeat 0 0; margin: 0 auto; text-indent: -5000px; position: relative; }
#theme a#remix-button:hover { background: url(../images/remix-button.gif) no-repeat 0 -20px; }

#theme-nav { position: absolute; height: 50px; top: 104px; left: 0; width: 469px; }
#theme-nav ul li { list-style: none; display: block; float: left; height: 50px; width: 67px; }
#theme-nav ul li a { display: block; height: 50px; width: 67px; text-indent: -5000px; }
	#theme-nav ul li#crying a { background: url(../images/theme-crying.jpg) no-repeat 0 0; }
	#theme-nav ul li#crying a:hover { background: url(../images/theme-crying.jpg) no-repeat 0 -50px; }
	#theme-nav ul li#passout a { background: url(../images/theme-passout.jpg) no-repeat 0 0; }
	#theme-nav ul li#passout a:hover { background: url(../images/theme-passout.jpg) no-repeat 0 -50px; }
	#theme-nav ul li#transit a { background: url(../images/theme-transit.jpg) no-repeat 0 0; }
	#theme-nav ul li#transit a:hover { background: url(../images/theme-transit.jpg) no-repeat 0 -50px; }
	#theme-nav ul li#portrait a { background: url(../images/theme-portrait.jpg) no-repeat 0 0; }
	#theme-nav ul li#portrait a:hover { background: url(../images/theme-portrait.jpg) no-repeat 0 -50px; }
	#theme-nav ul li#gazing a { background: url(../images/theme-gazing.jpg) no-repeat 0 0; }
	#theme-nav ul li#gazing a:hover { background: url(../images/theme-gazing.jpg) no-repeat 0 -50px; }
	#theme-nav ul li#kissing a { background: url(../images/theme-kissing.jpg) no-repeat 0 0; }
	#theme-nav ul li#kissing a:hover { background: url(../images/theme-kissing.jpg) no-repeat 0 -50px; }
	#theme-nav ul li#running a { background: url(../images/theme-running.jpg) no-repeat 0 0; }
	#theme-nav ul li#running a:hover { background: url(../images/theme-running.jpg) no-repeat 0 -50px; }
