<!--

/*
In development: Early version -> Not optimized.
*/

/*
Reset:
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td { 

	border: 0;
	vertical-align: baseline;
}

/*
General:
*/

@media screen and (-webkit-min-device-pixel-ratio:0) {

	#Logo {

	position: absolute;
	top: 28px;
	left: 15px;
	
	}

}

@-moz-document url-prefix() { 

	#Logo {
	position: absolute;
	top: 28px;
	left: 22px;
	}

}

html {
    -webkit-font-smoothing: subpixel-antialiased;
}

body {
	background-color: rgb(255,255,255);
	font-size: 100%;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: 200;
	letter-spacing: 0.0em;
	color: rgb(150,150,150);
	margin: 0;
	overflow-y: scroll;
	overflow-x: hidden;     
}
@media only screen and (min-device-width:480px) {

	body {
		position: absolute;
		top: 0px;
		bottom: 0px;
		left: 0px;
		right: 0px;
	}
	
}

h1, h2, h3 {
	font-size: 1.0em;
	color: rgb(255,255,255);
}
h3 {
	padding-top: 15px;
	padding-left: 5px;
}
.tG {
	color: rgb(150,150,150);
	font-size: 0.75em;
	font-weight: normal;
}
.tG:hover {
	color: rgb(80,80,80);
}
.tGn {
	color: rgb(150,150,150);
	font-size: 0.75em;
	font-weight: normal;
}
.tB {
	color: rgb(80,80,80);
	font-size: 0.75em;
	font-weight: normal;
}
.tB:hover {
	color: rgb(20,20,20);
}
p {
	color: rgb(150,150,150);
	font-size: 0.75em;
	font-weight: normal;
}

.read_more {
}

ol,ul,li {
	list-style-type: none;
	padding-bottom: 10px;
	padding-left: 10px
}

/*
Index / Base:
*/

#tumblr_controls {
	padding-top: 0px;
	padding-right: 20px;
}

#SiteMain {
	position: relative;
	padding-top: 0px;
}
#SiteO {
	position: absolute;
	top: 35px;
	left: 50%;
	width: 900px;
	height: 490px;
	margin-left: -490px;
	z-index: 0;
}

#Logo, #Logo:hover, #Logo:active, #twB, #instB, #archive, #ask, #disB, .reblogP {
	background-image: url("http://www.hcts.info/hcts/Images/Site/SiteSprite_hcts.png");
}
#Logo {

	width: 45px;
	height: 30px;
	margin-left: -3px;
	margin-top: -35px; 
	z-index: 1;
}
#Logo:hover {
	background-position: 0px -30px;
	cursor: pointer;
}
#LogoT:active {
	background-position: 0px -30px;
	cursor: pointer;
}
#SideBar {
	position: absolute;
	top: 17px;
	left: 0%;
	width: 140px;
	height: 400px;
	padding: 0px;
	margin-left: -15px;
	z-index: 2;	
	text-align: right;
	
	border: 0px solid rgb(230,230,230);
}
.SideBarL {
	margin-top: 25px;
	padding-right: +45px;
}
#sbL {
}
#sbT {
	position: absolute;
	top: 100px;
	left: 0%;
	width: 140px;
	height: 200px;
	z-index: 4;
	text-align: right;
}
#SideBarR {
	position: absolute;
	top: 15px;
	left: 100%;
	width: 130px;
	height: 400px;
	margin-left: -120px;
	z-index: 2;
	text-align: left;	
}
#twB {
	position: absolute;
	top: 15px;
	left: 7px;
	width: 20px;
	height: 16px;
	background-position: -26px -95px;
	z-index: 3;
}
#twB:hover {
	cursor: pointer;
	background-position: -26px -111px;
}
#instB {
	position: absolute;
	top: 40px;
	left: 9px;
	width: 14px;
	height: 16px;
	background-position: -44px -95px;
	z-index: 3;
}
#instB:hover {
	cursor: pointer;
	background-position: -44px -111px;
}
#archive {
	position: absolute;
	top: 64px;
	left: 7px;
	width: 20px;
	height: 16px;
	background-position: -21px -77px;
	z-index: 3;
}
#archive:hover {
	cursor: pointer;
	background-position: -0px -77px;
}
#ask {
	position: absolute;
	top: 88px;
	left: 7px;
	width: 20px;
	height: 16px;
	background-position: 37px -29px;
	z-index: 3;
}
#ask:hover {
	background-position: 37px -13px;
}
#disB {
	position: absolute;
	top: 109px;
	left: 7px;
	width: 20px;
	height: 16px;
	background-position: 58px -29px;
	z-index: 3;
	
	border: 0px solid gray;
}
#disB:hover {
	background-position: 58px -13px;
}
#site {
	position: absolute;
	top: 48px;
	left: 50%;
	width: 800px;
	height: auto;
	margin-left: -496px;
	z-index: 0;
}

#content {
	position: absolute;
	top: 6px;
	left: 140px;
	width: 520px;
	height: auto;
	margin-top: -49px; 
	z-index: 1;
	padding-bottom: 30px;
}

.BadgeContainer {
	float: right;
	width: 100px;
	height: 15px;
	margin-right: +4px;
	margin-top: -32px;
	z-index: 5;
	overflow: hidden;
}
.BadgeContainerT {
	float: right;
	width: 100px;
	height: 15px;
	margin-right: +4px;
	margin-top: +14px;
	z-index: 5;
	overflow: hidden;
}
.BadgeContainerTS {
	float: right;
	width: 100px;
	height: 15px;
	margin-right: +5px;
	margin-top: -32px;
	z-index: 5;
	overflow: hidden;
}

.reblog {
	float: none;
	width: auto;
	height: auto;
	padding-top: 5px;
	z-index: 6;
}
.reblogP {
	float: right;
	margin-top: 4px;
	margin-right: 0px;
	width: 40px;
	height: 15px;
	background-position: -0px -61px;
	z-index: 6;
}

.noteCb {
	float: right;
	width: auto;
	min-width: 15px;
	height: 17px;
	margin-top: -2px;
	background: rgb(237,71,30);
	z-index: 6;
}
#posts {
	margin-bottom: 0px;
	padding: 0px;
	text-align: justify;
}
#posts img  {
	margin-left: -0px;
	border: 0px solid rgb(220,220,220);
}
#posts object  {
	margin-left: -0px;
}
#posts p  {
	padding-left: 5px;
	padding-right: 20px;
}
.postL {
	width: 520px;
	height: auto;
	border: 0px solid gray;
}
.img {
	margin-left: +5px;
}

.caption {
	margin-left: 0px;
}
blockquote {
	margin-left: +5px;
}

.read_more_container {
	position: relative;
	left: 0px;
	border-top: 0px dashed rgb(220,220,220);
}

#quote {
	width: 480px;
	height: auto;
	margin-left: +10px;
	padding-top: 15px;
	padding-bottom: 10px;	
	color: rgb(70,70,70);
	z-index: 3;
}
#quote a {
	color: rgb(80,80,80);
	z-index: 3;
}
#quoteBg {
	width: 500px;
	height: auto;
	background: rgb(247,155,29);
	border: 1px solid rgb(242,150,24);
	padding-bottom: 10px;
	
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-bottomright: 10px;
	
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	
	border-radius: 10px;
	z-index: 2;
}
#quoteInd {
	width: 40px;
	height: 17px;
	margin-top: -1px;
	margin-left: +30px;
	margin-bottom: +10px;
	background-image: url("Images/tumblr/quoteInd.png");
	z-index: 1;
}
.source {
    margin-left: +20px;
	padding-top: 10px;
	color: rgb(50,50,50);
	text-shadow: 2px 3px 2px rgb(232,140,14);
}
#video {
	width: 500px;
	margin-left: +5px;
	border: 0px solid rgb(220,220,220);
}

#footer {
	position: absolute;
	top: 100%;
	left: 100%;
	width: 500px;
	height: 85px;
	margin-left: -495px;
	margin-top: +30px; 
	border-top: 0px solid rgb(220,220,220);
	z-index: 2;
	padding-top: 0px;
}
#footer a {
	color: rgb(150,150,150);
}
#footerTb {
	position: absolute;
	top: 100%;
	left: 100%;
	width: 400px;
	height: 20px;
	margin-left: -400px;
	margin-top: -250px; 
	z-index: 3;
	text-align: right;
}
#ltb {
	position: absolute;
	top: 100%;
	left: 100%;
	width: 500px;
	height: 60px;
	margin-left: -500px;
	margin-top: +40px; 
	border-top: 1px solid rgb(220,220,220);
	z-index: 2;
	text-align: right;
}

#btT {
	float: right;
	width: 30px;
	height: 25px;
	margin-top: -25px;
	margin-left: 200px;
	background: rgb(237,71,30);
	background-image: url("Images/Buttons/topA.png");
	z-index: 5;	
}
#btT:hover {
	background: rgb(200,51,20);
	background-image: url("Images/Buttons/topA.png");
}

.NotesC {
	float: left;
	margin-left: -15px;
	margin-top: 20px;
}
ol.notes li.note img.avatar {  
    vertical-align: -5px;
    margin-right: 15px;  
}
ol.notes {
	float: left;
	margin-left: -20px;
}

.PostFooter {
	width: 500px;
	height: 30px;
	margin-left: +25px;
	margin-top: -20px;
	padding-bottom: 0px;
	z-index: 0;
}

.nContainer {
	float: left;
	width: 500px;
	margin-top: +20px;
	padding-top: 10px;
	border-top: 1px dashed rgb(220,220,220);
	padding-bottom: 0px;
	z-index: 0;
}
#lindex {
	position: absolute;
	left: 0%;
	top: 173px;
}
.notesP {
	float: left;
	padding-left: 15px;
	padding-top: 3px;
	color: rgb(180,180,180);
	font-size: 0.75em;
}
.time {
	float: left;
	padding-top: 3px;
	color: rgb(180,180,180);
	font-size: 0.75em;
}
#tags {
	position: absolute;
	top: 30px;
	left: 0%;
	width: 140px;
	height: 200px;
	margin-left: -30px;
	z-index: 4;	
	text-align: right;
}

.tL {
}

.pagesN,.pagesP,.pagesNp,.pagesPp {
	margin-top: -25px;
}
.pagesN {
	float: left;
}
.pagesP {
	float: right;
	margin-right: +420px;
}
.pagesNp {
	float: right;
}
.pagesPp {
	float: left;
}

/*
CSS Animation:
*/

/*
Firefox Animation (Supported in Aurora):
*/

@-moz-keyframes reset {
	0% {
    	opacity: 0;
	}
	100% {
    	opacity: 0;
	}
}
@-moz-keyframes fade-in {
	0% {
    	opacity: 0;
	}
	60% {
    	opacity: 0.5;
	}
	100% {
    	opacity: 1;
	}
}

/*
Webkit Animation:
*/

@-webkit-keyframes reset {
	0% {
    	opacity: 0;
	}
	100% {
    	opacity: 0;
	}
}
@-webkit-keyframes fade-in {
	0% {
    	opacity: 0;
	}
	60% {
    	opacity: 0.5;
	}
	100% {
    	opacity: 1;
	}
}
.fadein {
    -webkit-animation-name: reset, fade-in;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-iteration-count: 1;
    
    -moz-animation-name: reset, fade-in;
    -moz-animation-duration: 2s;
    -moz-animation-timing-function: ease-in;
    -moz-animation-iteration-count: 1;
}

/*
TipTip CSS - Version 1.2:
*/

#tiptip_holder {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99999;
}
#tiptip_holder.tip_top {
	padding-bottom: 5px;
}
#tiptip_holder.tip_bottom {
	padding-top: 5px;
}
#tiptip_holder.tip_right {
	padding-left: 5px;
}
#tiptip_holder.tip_left {
	padding-right: 5px;
}
#tiptip_content {
	font-size: 0.6em;
	color: rgb(255,255,255);
	-webkit-font-smoothing: subpixel-antialiased;
	padding: 4px 8px;
	background-color: rgb(25,25,25);
	border-radius: 0px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
}
#tiptip_arrow, #tiptip_arrow_inner {
	position: absolute;
	border-color: transparent;
	border-style: solid;
	border-width: 6px;
	height: 0;
	width: 0;
}
#tiptip_holder.tip_top #tiptip_arrow {
	border-top-color: #fff;
	border-top-color: rgb(255,255,255);
}
#tiptip_holder.tip_bottom #tiptip_arrow {
	border-bottom-color: #fff;
	border-bottom-color: rgb(255,255,255);
}
#tiptip_holder.tip_right #tiptip_arrow {
	border-right-color: #fff;
	border-right-color: rgb(255,255,255);
}
#tiptip_holder.tip_left #tiptip_arrow {
	border-left-color: #fff;
	border-left-color: rgb(255,255,255);
}
#tiptip_holder.tip_top #tiptip_arrow_inner {
	margin-top: -7px;
	margin-left: -6px;
	border-top-color: rgb(25,25,25);
}
#tiptip_holder.tip_bottom #tiptip_arrow_inner {
	margin-top: -5px;
	margin-left: -6px;
	border-bottom-color: rgb(25,25,25);
}
#tiptip_holder.tip_right #tiptip_arrow_inner {
	margin-top: -6px;
	margin-left: -5px;
	border-right-color: rgb(25,25,25);
}
#tiptip_holder.tip_left #tiptip_arrow_inner {
	margin-top: -6px;
	margin-left: -7px;
	border-left-color: rgb(25,25,25);
}

/*
Webkit Hacks:
*/

@media screen and (-webkit-min-device-pixel-ratio:0) {	
	#tiptip_content {
		padding: 4px 8px 5px 8px;
		background-color: rgb(45,45,45);
	}
	#tiptip_holder.tip_bottom #tiptip_arrow_inner { 
		border-bottom-color: rgb(45,45,45);
	}
	#tiptip_holder.tip_top #tiptip_arrow_inner { 
		border-top-color: rgb(20,20,20);
	}
}

/*
Links:
*/

a:link {
	color: rgb(80,80,80);
	text-decoration: none;
}
a:visited {
	color: rgb(20,20,20);
	text-decoration: none;	
}
a:hover {
	color: rgb(20,20,20);	
	text-decoration: none;
}
a:active {
	color: rgb(0,0,0);
	text-decoration: none;
	outline: none;	
}
a:focus {
	-moz-outline-style: none;	
}
a.special:link {
	color: rgb(120,120,120);
	text-decoration: none;
}
a.special:visited {
	color: rgb(60,60,60);
	text-decoration: none;	
}
a.special:hover {
	color: rgb(180,180,180);	
	text-decoration: none;
}
a.special:active {
	color: rgb(180,180,180);
	text-decoration: none;
	outline: none;	
}
a.special:focus {
	-moz-outline-style: none;
}

-->