@charset "windows-1252";
/* CSS Document */
/* 
	body.unsword
	body.chronology
	body.layercake
		 + ophone variety
		 + workshop variety
		 + unsword variety
	body.klossrymd
*/


/* CHRONOLOGY STRUCTURE */
div.chronology {
	float:left;
	width:900px;
	margin:0 0 0 0px;
	padding:0 0 0 0;
	color:white;
	font:12px/16px Georgia, "Times New Roman", Times, serif;
}
	
	div.chronology ul {
		margin:10px 0 10px 0;
		padding:0 10px 0 10px;
		list-style-type:none;
	}
	
		div.chronology ul li {
			padding:0 0 10px 0;
		}
		
		div.chronology ul li span.date {
			font:10px/16px "Courier New", Courier, mono;
			font-weight:bold;
			background:white;
			color:black;
			margin-left:-10px;
			padding:0px 2px 0 2px;
		}


	div.chronology div.future, 
	div.chronology div.now, 
	div.chronology div.past {
		width:300px;
		float:left;
	}

	div.chronology div.now {
		padding-top:250px;
	}
	div.chronology div.past{
		padding-top:400px;
	}
	div.chronology div.future {
		padding-top:100px;
	}
	
	div.chronology a {
		text-decoration:none;
		color: #FF9933;
	}
	div.chronology a:hover {
		text-decoration:underline;
	}




/* * * * * * * * * * * * */
/* Layercake Structure  */
/* * * * * * * * * * * */

div.header {
	width:750px;
	height:250px;
	background:black;
	color:white;
	padding:0;
	margin:0;
	overflow:hidden;
}

	div.header div.logo {
		float:left;
		width:450px;
		height:250px;
	}
	
	div.header div.pithyblurb {
		float:left;
		width:300px;
		height:125px;
	}
	
	div.header div.pithyblurb h1 {
		font:15px/20px Arial, Helvetica, sans-serif;
		padding:0 10px 0 10px;
		margin:10px 0 10px 0;
		font-weight:bold;
	}
	
	div.header div.pithyblurb p {
		padding:0 10px 0 10px;
		margin:10px 0 10px 0;
	}
	
	div.header div.pithyblurb a {
		color:#00adef;
		font-weight:bold;
		text-decoration:none;
	}

	div.header div.pithyblurb a:hover {
		/** border-bottom:1px dotted #00adef;	**/
	}
	
	div.header div.sections {
		float:left;
		width:300px;
		height:125px;
	}
	
		div.header div.sections ul {
				padding:0;
				margin:0;
				list-style:none;
		}	
		
		div.header div.sections ul li {
			float:left;
			width:300px;
			height:25px;
			display:block;
			padding:0;margin:0;
		}	

		div.header div.sections ul li a {
			float:left;
			width:300px;
			height:25px;
			font:12px/25px Arial, Helvetica, sans-serif;
			display:block;
			font-weight:bold;
			padding:0;margin:0;
			background:black;
			text-decoration:none;
			color:#8dc63f;
			color:white;
		}	
		div.header div.sections ul li a:hover {
			background:url(stripeanim40x20_dotted2.gif) top left repeat;
			color:white;
		}
		div.header div.sections ul li a span {
			padding:0 10px 0 10px;
		}
		div.header div.sections ul li.selected a {
			background:white;
			color:black;
		}


div.contentcake {
	width:450px;
	margin:0 0 0 300px;
	background:white;
	padding:5px 0 0 0;
	clear:both;
}
div.contentcake h1,
div.contentcake h2,
div.contentcake h3,
div.contentcake h4 {
	margin:10px 0 10px 0;
	padding:0 10px 0 10px;
}

div.contentcake p {
	margin:10px 0 10px 0;
	padding:0 10px 0 10px;
	font:12px/15px Georgia, "Times New Roman", Times, serif;
}
div.contentcake h4 {
	font:12px/15px Georgia, "Times New Roman", Times, serif;
	font-weight:bold;
	margin-top:-5px;
	margin-bottom:-10px;
}

div.contentcake h3 {
	font:12px/15px Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-transform:uppercase;
	letter-spacing:0.05em;
	margin-bottom:-10px;
}

div.contentcake h2 {
	font:15px/15px Georgia, "Times New Roman", Times, serif;
	font-weight:normal;
	font-weight:bold;
	font-weight:normal;
}

div.contentcake ul,
div.contentcake ol {
	margin:10px 10px 10px 25px;
	padding:0 10px 0 10px;
	font:12px/15px Georgia, "Times New Roman", Times, serif;
}
div.contentcake ul li,
div.contentcake ol li {
	margin:0.5em 5px 0.5em 5px;
	padding:0 10px 0 10px;
}
div.contentcake a {
	color:#00adef;
	font-weight:bold;
	text-decoration:none;
	border-bottom:1px dotted white;
}
div.contentcake a.nohover, div.contentcake a.nohover:hover {
	border:0;
}
div.contentcake a.nohover img {
	border:0;
}

div.contentcake div.youtube {
	margin-top:6px;
}

div.contentcake img {
	float:left;
	margin:5px 10px 10px 0;
}

div.contentcake img.righteous {
	float:right;
	margin:5px 0 10px 10px;
}

div.contentcake span.date {
	font:10px/16px "Courier New", Courier, mono;
	font-weight:bold;
	background:black;
	color:#FAFAFA;

	padding:0px 2px 0 2px;
}

div.contentcake img.icon {
	margin-bottom:0;
	margin-top:0; 
	margin-left:0;
	margin-right:6px;
}

div.contentcake strong.superstrong {
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	text-transform:uppercase;
}
div.triptyche {
	clear:both;
	width:450px;
	margin:0 0 0 300px;
	padding:0;
}
	div.triptyche div {
		width:150px;
		overflow:hidden;
		float:left;
	}

div.superflesh {
	clear:both;
	background:red;
	padding:0;
	margin:0;
}
div.superflesh div {
	width:auto;
	float:left;
}

div.splashcake {
	width:750px;
	text-align:right;
	padding:0;
	margin:0;
}
/* FLOATUNIT IS A TRANSITIONAL ENITITY! IT SHOULD BE PHASED OUT SOON! AND REPLACED WITH STANDARD KLOSSES!! */

div.floatunit { 
	float:right;
	width:150px;
	height:125px;
	overflow:hidden;
}
div.floatunit a { 
	display:block;
	text-align:left;
	color:#00adef;
	text-decoration:none;
}

div.floatunit a img {
	border:none;
}	

		/* OPHONE VARIETY */
		body.ophone_style div.header {
			background:url(ophone_style_header.gif) top left no-repeat;
			background:none; /*MAGNUS EXPERIMENTING after a RECTANGULAR OVERDOSIS */
			color:black;
		}

		body.ophone_style div.header div.sections ul li a {
			background:none;
			color:black;
		}	

		body.ophone_style div.header div.sections ul li a:hover {
			background:url(stripeanim40x20_dotted2.gif) top left repeat;
			color:black;
		}

		body.ophone_style div.header div.sections ul li a span {
			padding:0 10px 0 10px;
		}

		body.ophone_style div.header div.sections ul li.selected a {
			background:black;
			color:white;
		}
		
		/* WORKSHOP VARIETY */
		body.workshop_style div.header {
			background-position:0 -250px;
			background-image:url(../flippers/ws_header_750x250.jpg);
			color:white;
		}
		
		body.workshop_style div.header div.pithyblurb, body.workshop_style div.header div.sections {
			background:url(black75.png) top left repeat;
			/**margin-left:450px;*/
		}

		body.workshop_style div.header div.sections ul li a {
			background:none;
			color:white;
		}	
				
		body.workshop_style div.header div.sections ul li a:hover {
			background:url(stripeanim40x20_dotted2.gif) top left repeat;
			color:white;
		}

		body.workshop_style div.header div.sections ul li a span {
			padding:0 10px 0 10px;
		}

		body.workshop_style div.header div.sections ul li.selected a {
			background:url(black75.png) top left repeat;
			color:white;
		}
		body.workshop_style div.contentcake {
			background:none;
		}
		
		/* UNSWORD VARIETY */
		body.unsword_style div.header {
			background:url(../word/images/unsword_title.gif) top left no-repeat;
			float:left;
		}
		body.unsword_style div.contentcake {
			background:none;
		}
		body.unsword_style div.contentcake p{
			font:13px/20px Georgia, "Times New Roman", Times, serif;
		}
		
		


/* * * * * * * * * * * * */
/* Footer               */
/* * * * * * * * * * * */

div.footer {
	clear:both;
	float:left;
	width:100%;
	background:black;
	padding-bottom:20px;
}

	div.footer div {
		float:left;
		width:300px;
		color:#555555;
	}

	div.footer div h1 {
		margin:10px 0 10px 0;
		padding:0 10px 0 10px;
		font-size:12px;
		line-height:15px;	
	}

	div.footer div p {
		margin:10px 0 10px 0;
		padding:0 10px 0 10px;
	}

	div.footer div a {
		color:white;
		border-bottom:1px dotted #555555;
		text-decoration:none;
	}
	
	div.footer div ul {
		margin:10px 0 10px 0;
		padding:0 10px 0 10px;
	}

	div.footer div ul li {
		padding:0;
		margin:0 0 0 15px;
	}

/* inverted footer used for dark (p)ages */
div.invertedfooter {
	background:white;
}

	div.invertedfooter div a {
		color:black;
	}
	
/* * * * * * * * * * * * */
/* Structure			*/
/* * * * * * * * * * * */

body {
	padding:0;
	margin:0;
	border:0;
}

/* * * * * * * * * * * *  */
/* Boxspace				 */
/* The basic KLOSS	    */
/* * * * * * * * * * * */

	ol.boxspace {
		padding:0;
		margin:0;
		display:block;
		list-style:none;
	}
	
	ol.boxspace li {
		padding:0;
		margin:0;
		display:block;
		width:150px;
		height:250px;
		overflow:hidden;
		float:left;
		position:relative;
		top:0;
		left:0;
	}

	ol.boxspace li a {
		overflow:hidden;
		display:block;
		height:250px;
		position:relative;
		top:0;
		left:0;
		background:url(empty.png) 0 0 no-repeat;
		text-decoration:none;
	}
	
	ol.boxspace li a:hover {
		background-position: 0 -250px;
	}
	
	ol.boxspace li a span {
		position:absolute;
		bottom:0;
		left:0;
		margin:0;
		color:white;
		background-color:black;
		z-index:20;
		padding:5px;
	}

	ol.boxspace li a:hover span {
		background-color:black;
		background-color:#00adef;
	}

/* Splashcake-gallery */

	div.splashcake ol.gallery {
		margin:0;
		padding:0;
		list-style:none;
	}	

	div.splashcake ol.gallery li {
		margin:0;
		padding:0;
		list-style:none;
		position:relative;
		top:0;
		left:0;
		float:right;
	}	

	div.splashcake ol.gallery li img {
	display:block;
	}

	div.splashcake ol.gallery li div.caption {
		position:absolute;
		top:10px;
		right:10px;
		width:130px;
		padding:5px 0 5px 0;
		background:url(black75.png) top left repeat;
		border:1px solid white;
		color:white;
		display:none;
		text-align:left;
	}

	div.splashcake ol.gallery li div.caption h2 {
		padding:0 10px 0 10px;
		margin-bottom:0.5em;
		margin-top:0.5em;
		text-transform:uppercase;
	} 

	div.splashcake ol.gallery li div.caption p {
		padding:0 10px 0 10px;
		margin-bottom:0.5em;
		margin-top:0.5em;
	} 

	div.splashcake ol.gallery li div.caption a {
		color:#00adef;
		text-decoration:none;
	 }

	div.splashcake ol.gallery li:hover div.caption {
		display:block;
	}
	
/* Splashcake-boxspace */
div.splashcake 	ol.boxspace li {float:right;}

/* * * * * * * * * * * *  */
/* Boxspace				 */
/* Footer			    */
/* * * * * * * * * * * */

	ol.boxspace li.clear {
		float:none;
		width:auto;
		padding-left:5px;
		line-height:2em;
		height:2em;
		clear:both;
		background:url(footfetisch.png) top left repeat;
		color:white;
	}
	
/* * * * * * * * * * * *  */
/* Boxspace				 */
/* Boombox			    */
/* * * * * * * * * * * */

	ol.boxspace li.boombox a {
		display:block;
		height:250px;
		width:150px;
		overflow:hidden;
		text-indent:-2000px;
		background-image:url(boomer2.png);
		background-position:0 0;
		background-repeat:no-repeat;
		cursor:default;
	}
	
	ol.boxspace li.boombox a:hover {
		background-position:0 -250px;
		cursor:default;
	}

/* * * * * * * * * * * *  */
/* Boxspace				 */
/* Textbox			    */
/* * * * * * * * * * * */

	ol.boxspace li.textbox {
	
	}

	ol.boxspace li.textbox h2 {
		padding:5px;
	}

	ol.boxspace li.textbox p {
		padding:0 5px 10px 5px;
		margin:0;
	}
	
	ol.boxspace li.textbox a {
		display:inline;
		position:static;
		top:auto;
		left:auto;
		bottom:auto;
		right:auto;
		padding:0;
		margin:0;
		background:none;
		color:#00adef;
		background:black;
	}
	ol.boxspace li.textbox a span {
		display:inline;
		position:static;
	}
		/*  WHITE ON BLACK subclass for li.textbox */
	
		ol.boxspace li.sub_whiteonblack {
			background:black;
			color:white;
		}
	
		ol.boxspace li.sub_whiteonblack a {
			color:white;
			background:#006891;
		}
		ol.boxspace li.sub_whiteonblack a:hover {
			color:white;
			background:#00adef;
		}

		/*  BLACK ON WHITE subclass for li.textbox */
		
		ol.boxspace li.sub_blackonwhite {
			background:white;
			color:black;
		}
	
		ol.boxspace li.sub_blackonwhite a {
			color:#00adef;
			color:black;
			border-bottom:1px dotted #00adef;
			/* color:#007ab7; */
			background:white;
			font-weight:bold;
		}
		ol.boxspace li.sub_blackonwhite a:hover {
			color:#00adef;
			background:#9fe0fc;
			background:white;
			border-bottom:1px dotted #00adef;
		}

		/*  DOUBLE WIDTH subclass for li.textbox */

		ol.boxspace li.sub_doublewidth {
			width:300px;
		}

/* * * * * * * * * * * *  */
/* Boxspace				 */
/* Chronologybox        */
/* * * * * * * * * * * */

	ol.boxspace li.chronologybox {
		background:url(chronology_kloss_bg.gif) top left no-repeat;
		color:white;
	
	}
	ol.boxspace li.chronologybox h2 {
		padding:5px;
	}

	ol.boxspace li.chronologybox p {
		padding:0 5px 10px 5px;
		margin:0;
	}
	ol.boxspace li.chronologybox span.date {
		color:black;
		background:white ;
		padding:0 2px 0 2px;
		font-weight:normal;
		text-transform:uppercase;	
	}
	ol.boxspace li.chronologybox a {
		display:inline;
		position:static;
		top:auto;
		left:auto;
		bottom:auto;
		right:auto;
		padding:0;
		margin:0;
		background:none;
		text-decoration:none;
		color: #FF9933;
		background:none;
	}
	ol.boxspace li.chronologybox a:hover {
		text-decoration:underline;
	}

	ol.boxspace li.chronologybox a.miniflipper {
		display:block;
		height:88px;
		width:150px;
		overflow:hidden;
		text-indent:-2000px;
		background-image:url(boomer2.png);
		background-position:0 -88px;
		background-repeat:no-repeat;
		border-bottom:none;
	}
	
	ol.boxspace li.chronologybox a.miniflipper:hover {
		background-position:0 0;
		border-bottom:none;
	}

/* * * * * * * * * * * *  */
/* Boxspace				 */
/* Blogbox			    */
/* * * * * * * * * * * */

	ol.boxspace li.blogbox {
		background:url(unsword.png) top left no-repeat;
		color:black;
		width:300px;
		font:11px/15px Georgia, "Times New Roman", Times, serif;
	}
	ol.boxspace li.blogbox div.fringe {
		background: url(unsword_fringe.gif) top left no-repeat;
		position:absolute;
		bottom:0;
		left:0;
		width:300px;
		height:25px;
	}

	ol.boxspace li.blogbox div.blogmessagebody {
		padding-left:50px;
		padding-right:10px;
		height:234px;
		overflow:hidden;
	}

	ol.boxspace li.blogbox h2.blogtitle {
		color:#00adef;
		font-size:15px;
		line-height:15px;
		margin:0;
		padding:0;
	}

	ol.boxspace li.blogbox p.blogdate {
		color:silver;
		text-align:right;
		font:10px/11px Arial, Helvetica, sans-serif;
		text-transform:uppercase;
		padding-top:5px;
	}

	ol.boxspace li.blogbox h2 {
		padding:0;
		margin:5px 0 5px 0;
	}

	ol.boxspace li.blogbox p {
		padding:0;
		margin:5px 0 5px 0;
	}
	
	ol.boxspace li.blogbox a {
		display:inline;
		position:static;
		top:auto;
		left:auto;
		bottom:auto;
		right:auto;
		padding:0;
		margin:0;
		background:none;
		color:#00adef;
	}

	ol.boxspace li.blogbox a:hover {
		background:#00adef;
		color:white;
	}

/*
/// Typography
*/
body {
	font:10px/11px Georgia, "Times New Roman", Times, serif;
	font:10px/12px Arial, Helvetica, sans-serif;
}

h1 {
	font:20px/30px Arial, Helvetica, sans-serif;
	font-weight:bolder;
}

h2 {
	font:10px/15px Arial, Helvetica, sans-serif;
	font-weight:bolder;
}

h3 {
	font:10px/15px Georgia, "Times New Roman", Times, serif;
	font-weight:normal;
	font-variant:small-caps;
}
/*
/// Colours
*/
body {
	color:black;
}

/*
/// Backgrounds and Ornamentation
*/

body {
	background:#001133 url(stars/blueblur.jpg) top right repeat;
}

body.layercake {
	background:white;
}

	body.ophone_style {
		background:white url(../ophones/ophones_body_bg.jpg) top left no-repeat;
	}

	body.unsword_style {
		background:black url(unsword_bg_tile.gif) top left repeat;
	}
	
	body.workshop_style {
		background:white url(unsword_bg_tile.gif) top left repeat;
	}
		

body.chronology_style {
	background:black url(chronology_bg.gif) top left no-repeat;
}


body.oldschool {
	background:black url(../pix/unswornwebbg003m2.gif) top left no-repeat;
}

div.meaningless {
	background-image:url(stars/3smaller_black.gif);
	background-position:75% 10%;
	background-repeat:repeat;
}

div.decorative {
/*	background-image:url(stars/crowcraft.png);*/
	background-position:center left;
	background-repeat:repeat;
}

div.ornamentation {
	background-image:url(stars/cowspot.png);
	background-position:30% 42%;
	background-repeat:repeat;
}

/* * * * * * * * * * * *  */
/* LABEL				 */
/* The little fellow    */
/* * * * * * * * * * * */

body ol.boxspace div.label {
	position:absolute;
	bottom:0;
	left:0;
	z-index:1200;
	font:10px/12px Arial, Helvetica, sans-serif;
}
	
body ol.boxspace div.label a {
		position:static;
		display:block;
		height:auto;
		width:auto;
		bottom:0;
		left:0;
		color:white;
		background:black;
		padding:5px;
		border:none;
}

body ol.boxspace div.label a span {
		color:white;
		position:static;
		top:auto;
		right:auto;
		bottom:auto;
		left:auto;
		height:auto;
		width:auto;
		padding:0;
		background:none;
		border:none;	}
	
body ol.boxspace div.label a:hover {
		color:white;
		background:#00adef;
		border:none;	
}
	
body ol.boxspace div.label a:hover span {
		color:white;
		background:none;
		border:none;
}

body.viewimage {
	background:black url(viewimage_bodybg.gif) -1px -1px repeat;
}

body.viewimage div.imagecontainer a {
	border:none;
	text-decoration:none;
}

body.viewimage div.imagecontainer a img {
	border:none;
	text-decoration:none;
}


/* * * * */
/* tweets */
/* * * * */

	ol.boxspace li a b.twitterticker {
	display:block;
	position:absolute;
	top:5px;
	left:10px;
	width:130px;
	padding:0 0 10px 0;
	border-top:1px solid white;
	font-size:12px;
	background:url(twittertickerbubble_white.gif) bottom center no-repeat;
	text-decoration:none;
	color:white
	}
	
	ol.boxspace li a b.twitterticker i {
		display:block;
		font-style:normal;
		font-weight:normal;
		padding:0 5px 5px 5px;
	}
/* ---------------------------------------------- 

	kontaklosss li.mothership

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

ol.boxspace li.mothership {
	float:left;
	width:600px;
	height:250px;
	background:url(../flippers/kontaktkloss/kontaktkloss.gif);
	position:relative;
	font:12px/16px Arial, Helvetica, sans-serif;
	color:white;
}

ol.boxspace li.mothership a {
display:inline;
height:auto;
width:auto;
background:none;
	color:white;
	text-decoration:none;
}
ol.boxspace li.mothership div.blurb {
	position:absolute;
	top:75px;
	padding-top:0;
	left:310px;
	width:280px;
}

ol.boxspace li.mothership div.blurb p {
	margin:0 0 1em 0;
	padding:0;
}

ol.boxspace li.mothership div.contact {
	position:absolute;
	top:180px;
	padding-top:0;
	left:60px;
	width:230px;
}

ol.boxspace li.mothership div.contact p {
	margin:0 0 1em 0;
	padding:0;
}