/* 
FRASHIER BLOG
CSS CODING BY HARTMUT BOESENER 2010
MADE IN GERMANY
*/ 

@font-face {
	font-family: 'HelNew';
	src: url('../fonts/typo.eot');
}

@font-face {
	font-family: 'HelNew';
	src: url('../fonts/typo.otf') format('opentype');
}


/* Global Reset
-------------------------------------------------------------------------------------- */

* {
  padding: 0;
  margin: 0;
}

html, body, div, span, hr, applet, button, 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 { 
  margin: 0; 
  padding: 0; 
  border: 0; 
  outline: 0; 
  font-size: 100%; 
  vertical-align: baseline; 
  background: transparent; 
} 

:focus { outline: 0; } 
body {  line-height: 1; } 
ol, ul { list-style: none; } 

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
}

blockquote, q {
  quotes: "" "";
}

a, a:link, a:visited, a:active { text-decoration: none; color: #333; }


/* Global
-------------------------------------------------------------------------------------------------------------------------------------- */

body {
  background: #FFF;
  font: normal 12px Arial, Helvetica, sans-serif;
  line-height: 18px;
  color: #000;
}

body, html {
  height: 100%;
  width: 100%;
}


/* CSS-Sprites
-------------------------------------------------------------------------------------------------------------------------------------- */
#rss p, .slide p, .lifetime, a.category, a.homepage, .swap, .comment_toggle, .comment_toggle_active, h2, h3,
.checkboxOff, .checkboxOn, .altCheckboxOff, .altCheckboxOn, #mynetwork a, #archives ul {
	background: transparent url(http://www.frashier.de/img/sprites.png) no-repeat 0 0;
}




/* Strandart
-------------------------------------------------------------------------------------------------------------------------------------- */

.c {
  clear: both;
  font-size: 1px;
  line-height: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  visibility: hidden;
}

.hidden { display:  none; }


/* Layout
-------------------------------------------------------------------------------------------------------------------------------------- */

#container {
  position: relative;
  min-height: 100%;
  text-align: left;
  background-color: #F6F6F6;
		border: 15px solid #FFF;
		min-width: 970px;
}

#content-container {
  width: 100%;
  height: 100%;
}

#header-top-container {
	width: 950px;
	height: 25px;
	padding-top: 25px;
	font-size: 15px;
	color: #999;
}

#header-container {
  position: relative;
 	height: 265px;
 	width: 950px;
 	padding: 20px 0 0 30px;
}


/* Footer
-------------------------------------------------------------------------------------------------------------------------------------- */

#footer-container { background: transparent url(http://www.frashier.de/img/hg_footer.png) repeat-x 0 0;}

#footer-content {
	width: 920px;
	height: 450px;
	margin-left: 30px;
}

#footer {
	height: 50px;
}

#footer a:link, #footer a:visited, #footer a:active {
	color: #555;
}

#footer a:hover { color: #9a9a9a; }

#footer p {
	width: 920px;
	text-align: right;
	line-height: 20px;
	height: 20px;
	font-size: 13px;
	color: #555;
	margin-left: 30px;
}

#footer p span { float: left; }
#border { margin: 0; }

/* RSS
-------------------------------------------------------------------------------------------------------------------------------------- */
#rss {
	float: right;
 color: #777;
 line-height: 16px;
	width: 350px;
	cursor: pointer;
 -webkit-transition: color .2s linear;

}

a#rss:hover p { background-position: -935px -39px; }
a#rss:hover { color: #BABABA; }

#rss p {
 width: 15px;
 height: 16px;
 float: right;
 background-position: -920px -39px;
}

#rss span { 
 float: right;
 padding-right: 10px;
}

#history {
	float: left;
	padding-left: 30px;
 line-height: 15px;
}

#history a { color: #777; }
#history a:hover { color: #BABABA; }


/* Header
-------------------------------------------------------------------------------------------------------------------------------------- */
.lifetime {
 text-shadow: 1px 0px 2px #3f3f3f;
 width: 542px;
 font-family: 'HelNew', Helvetica, Arial, sans-serif;
 height: 232px;
	padding: 13px 0 0 20px;
 font-size: 42px;
 line-height: 43px;
 color: #FFF;
	float: left;
	margin-left: 38px;
}

#message {
	width: 878px;
	padding: 20px;
	margin: 30px 0 0 30px;
	border: 1px solid #CCC;
	font-size: 1.3em;
	background: #E3E3E3;
}

/* Webcam
-------------------------------------------------------------------------*/
.webcam-container {
	float: left;
	position: relative;
	width: 320px;
	height: 240px;
}

.webcam-container .slide p {
	top: 210px;
	left: 0;
	position: absolute;
	color: #fff;
	z-index: 1000;
	font-size: 12px;
	background-position: -30px -100px;
	padding: 0.2em 0.8em 0.2em 1.6em;
}

.webcam-container .slides {
	position: absolute;
	width: 320px;
	height: 240px;
	top: 0;
	left: 0;
	overflow: hidden;
 height: inherit;
}



/* POSTING
-------------------------------------------------------------------------*/
.post-container {
  width: 920px;
  padding: 35px 0 15px 0;
  margin-left: 30px;
  position: relative;
}

.post-details {
  width: 320px;
  padding-top: 45px;
  padding-bottom: 40px:
  height: auto;
  position: absolute;
  left: 0px;
  top: 0px;
  right: auto;
  bottom: auto;
  font-size: 13px;
  line-height: 25px;
  color: #B0B0B0;
}

a.category, a.homepage {
  display: block;
  height: 25px;
  line-height: 25px;
  color: #777;
  width: 320px;
  cursor: default;
  background-position: 0 -476px;
}

a.category:hover, a.homepage:hover {
  color: #111;
}

a.category:hover, a.homepage:hover { cursor: pointer; }

.swap {
  cursor: pointer;
	 width: 320px;
	 color: #777;
	 height: 25px;
  background-position: 0 -476px;
}
 
.swap:hover { cursor: pointer; }
.over, .swap:hover .out, a.homepage:hover .out { display: none; }

a.homepage:hover .over {
	display: block;
}

.swap:hover .over {
	 display: block;
	 width: 320px;
	 height: 22px;
}

.swap a {
  height: 25px;
  float: left;
  color: #666;
  margin-right: 7px;
}

.swap a:hover {
  text-decoration: none;
  color: #111;
  height: 23px;
  line-height: 25px;
  border-bottom: 2px solid #9808C4;
}

h1, h1 a, h1 a:link, h1 a:visited, h1 a:active {
		font-family: "HelNew", Helvetica, Arial, sans-serif;
		font-size: 42px;
		line-height: 46px;
		color: #444;
		font-weight: normal;
		width: 320px;
		margin-bottom: 15px;
		-webkit-transition: color .2s linear;

}

h1 a:hover { color: #999;}

.post {
  width: 562px;
  min-height: 200px;
  padding-top: 15px;
  color: #111;
  font-size: 1.3em;
  line-height: 1.6em;
  font-family: Helvetica, Arial, sans-serif;
  margin-left: 358px;
}

.post a:link, .post a:active, .post a:visited { color: #111; }
.post p { padding: 4px 0 4px 0;}
.post:hover a:link, .post:hover a:active { color: #9808C4; }
.post:hover a:visited { text-decoration: line-through; color: #9808C4; }
.post:hover a:hover { text-decoration: none; color: #111; }

p.du {
	width: 519px;
	padding: 15px;
	border: 1px solid #E8E8E8;
}

.post object {
	margin-bottom: -8px;
	margin-top: 10px;
}

blockquote {
 padding-left: 20px;
 border-left: 5px solid #eee;
 margin: 0 30px 0 25px;
}

blockquote cite {
	margin: 5px 0 0;
 display: block;
}


/* COMMENT - ACCORDION 
------------------------------------------------------------------------------------- */

.comment_toggle {
	font-size: 14px;
	line-height: 29px;
 cursor: pointer;
 color: #585858; 
 background-position: 0 -255px;
 padding-left: 55px;
 height: 29px;
}

.ui-state-active, .comment_toggle_active {
  color: #9900CC;
  background-position: 0 -311px;
}

.comment_toggle:hover {
  color: #9900CC;
  background-position: 0 -283px;
}

.comment_content {
  display: none;
  padding-left: 30px;
  background: #F9F9F9 url(http://www.frashier.de/img/sprites.png) repeat-x 0 -817px;
}

div.hr {
		background: transparent url(http://www.frashier.de/img/sprites.png) repeat-x 0 -245px;
 	height: 2px;
 	border: none;
		line-height: 2px;
		font-size: 1px; 	
}

/* COMMENT
------------------------------------------------------------------- */
h2, h3 {
 background-position: -927px -60px;
 padding-left: 26px;
 margin-bottom: 10px;
 font-weight: normal;
 font-size: 14px;
 color: #585858;
 line-height: 25px;
	height: 25px;
}

h3 {
	margin-bottom: 12px;
 background-position: -927px -83px;
}

.comment-container {
	width: 920px;
 height: auto;
	margin-top: 30px;
}

.comment-details {
  float: left;
  width: 320px;
  display: inline;
  height: 100%;
}

.comment {
  width: 562px;
  min-height: 71px;
  padding-bottom: 15px;
  color: #818181;
  font-size: 14px;
  line-height: 19px;
  margin-left: 358px;
  border-bottom: 1px solid #E6E6E6;
}

.nohp { min-height: 46px; }

.comment-tool {
  height: 18px;
  margin-left: 360px;
  margin: 7px 0 10px 0;
}

a.quote, a.answer {
	float: right;
	width: 60px;
	color: #FFF;
	font-size: 11px;
	font-weight: bold;
	height: 18px;
	text-align: center;
	background: #9808C0;
	display: none;
}

a.quote:hover, a.answer:hover { background: #D0D0D0; }
.comment-container:hover a.quote { display: block; }

.comment blockquote {
  padding: 10px;
  margin: 0 0 15px 0;
  border: 1px solid #CCC;
}

.comment blockquote p {
  font-weight: bold;
  margin-bottom: 5px;
}

/* COMMENT - FORM
------------------------------------------------------------------------------------- */

.comment-post-container {
	padding: 60px 0 15px 0;
	height: 190px;
	width: 920px;
}

field.textarea {
  width: 550px;
  height: 126px;
  float: right;
}

fieldset.input {
  width: 360px;
  height: 126px;
  float: left;
}

fieldset.send {
		width: 920px;
		height: 20px;
		float: left;
		padding-top: 10px;
}

.datasave, notify {	
 float: left; 
 width: 360px;
}

.notify { width:450px; height: 20px;}

fieldset.send p { float: left; }

input:focus,textarea:focus {
	background-color: #EEE;
	color: #444;
}

.username, .useremail, .userwebpage, textarea {
  font-size: 14px;
  font-family: Helvetica, Arial;
  line-height: 13px;
  color: #999;
 	border: 1px solid #E7E7E7;
 	border-bottom: 2px solid #E7E7E7;
  background: #F6F6F6;
  padding: 5px 0px 5px 5px;
  width: 315px;
  margin-top: 4px;
  -webkit-transition: background-color 300ms ease-in;
}

textarea {
  height: 113px;
  width: 538px;
  padding: 10px;
  line-height: 19px;
  overflow: hidden;
  margin: 0;
}

input.submit {
  width: 100px;
  font: bold 11px Helvetica, Arial, sans-serif;
  color: #FFF;
  border: none;
  line-height: 20px;
  text-align: center;
  background: #9808C4;
  margin: 0;
  padding: 0;
  height: 18px;
  display: block;
  float: right;
  cursor: pointer;
}

input.submit:hover {
  background: #9808C0;
		color: #FFF;
		float: right;
}

.checkboxOff {
  display: inline;
  margin: 0px;
  padding: 2px 13px 3px 23px;
  color: #7C7C7C;
  line-height: 18px;
  font-family: "Arial", "Lucida Grande", "Tahoma", sans-serif;
  font-size: 12px;
  background-position: -932px -174px;
  border: 0px;
  cursor: pointer;
}

.checkboxOn {
  display: inline;
  margin:0;
  padding: 2px 13px 3px 23px;
  color: #7C7C7C;
  line-height: 18px;
  font-family: "Arial", "Lucida Grande", "Tahoma", sans-serif;
  font-size: 12px;
  background-position: -932px -155px;
  border: 0px;
  cursor: pointer;
}

.altCheckboxOff {
  display: inline;
  padding-left: 70px;
  color: #7C7C7C;
  line-height: 60px;
  font-family: "Arial", "Lucida Grande", "Tahoma", sans-serif;
  font-size: 12px;
  font-weight: bold;
  background-position: -932px -155px;
  border: 0px;
  cursor: pointer;
}

.altCheckboxOn {
  display: inline;
  padding-left: 70px;
  color: #7C7C7C;
  line-height: 60px;
  font-family: "Arial", "Lucida Grande", "Tahoma", sans-serif;
  font-size: 12px;
  font-weight: bold;
  background-position: -932px -174px;
  border: 0px;
  cursor: pointer;
}

/* NAVIGATION
------------------------------------------------------------------- */
#navigation-container {
  height: 60px;
  padding: 30px 0 0 0;
  width: 920px;
  margin-left: 30px;
  line-height: 20px;
}

#navigation-container a, 
#navigation-container a:link, 
#navigation-container a:visited, 
#navigation-container a:active,
#navigation-container p {
  color: #555;
  height: 20px;
  float: left;
  font-size: 14px;
  margin-right: 13px;
  border-bottom: 2px solid #E1E1E1;
}

#navigation-container p {
  border-bottom: none;
  color: #CCC;
}

#navigation-container a:hover {
  text-decoration: none;
  color: #222;
  border-bottom: 2px solid #9800C7;
}

#navigation-container p.currentpage { color: #333; border-bottom: 2px solid #9800C7; }
#navigation-container div { float: right; }
#navigation-container div p, #navigation-container div a:link, #navigation-container div a:visited { margin: 0; }
#navigation-container #navigation-container a.ontop, #navigation-container a.ontop:link, #navigation-container a.ontop.visited { margin-left: 20px; }


/* TABS
-------------------------------------------------------------------------*/
ul#tabs, ul#socialnetwork {
	width: 920px;
	height: 30px;
	padding: 30px 0 0 0;
	margin-bottom: 10px;
	border-top: 2px solid #CFCFCF;
	border-bottom: 3px solid #FFF;
}

ul#socialnetwork {
	padding: 0;
	border-top: none;
}

ul#tabs li, ul#socialnetwork li {
		display: block;
  line-height: 20px;
  margin-right: 20px;
  height: 20px;
  padding: 6px 0px 4px 0px;
  font-size: 16px;
  float: left;
  color: #000;
	 font-weight: 400;
}

ul#tabs .ui-state-active {
	border-bottom: 3px solid #9800C7;
  color: #666;
}

ul#tabs a:hover {
  color: #666;
  cursor: pointer;
}

.ui-tabs .ui-tabs-hide {
   display: none;
}

/* FOOTER CONTENT
------------------------------------------------------------------- */

.categorys, .links, .archives, .tags {
	padding: 20px 0 10px 0;
	height: 340px;
}

/* CATEGORYS ------------------------------------------*/

.categorys-c {
 width: 296px;
 height: 54px;
 position: relative;
 float: left;
 border-bottom: 1px solid #CCC;
 margin: 0 16px 10px 0;
}

.categorys-c a.title {
	display: block;
	text-align: right;
	color: #656565;
	width: 260px;
	padding-right: 25px;
	font-size: 15px;
	line-height: 20px;
	height: 20px;
}

.categorys-c a.title span {
	float: left;
	line-height: 20px;
	color: #333;
}

.categorys-c p {
	line-height: 14px;
	font-size: 11px;
	color: #7F7F7F;
	margin-top: 2px;
}

.categorys-c:hover a.title span, .categorys-c:hover p, .categorys-c:hover a.title {
 color: #888;
 cursor: pointer;
}

.categorys-c:hover p { color: #A9A9A9; }

.categorys-c a.rss {
	width: 27px;
	height: 15px;
	position: absolute;
	top: 2px;
	left: 269px;
	font-size: 9px;
	font-family: Arial;
	text-align: center;
	line-height: 16px;
	color: white;
	background: #9800C7;
}

.categorys-c a.rss:hover { background-color: #CCC; }


/* ARCHIVES ------------------------------------------*/

.archives ul {
	width: 920px;
	color: #656565;
	font-size: 15px;
	height: 25px;
	line-height: 23px;
	margin-top: 8px;
	background-position: 0 -476px;
}

.archives li {
	float: right;
	padding-left: 20px;
	display: block;
	color: #C2C2C2;
}

.archives li a {
	display: block;
	line-height: 23px;
	color: #333;
	border-bottom: 2px solid transparent;
}

.archives li a:hover {
	border-bottom: 2px solid #9800C7;
	line-height: 23px;
}

.archives li.year {
	color: #333;
	float: left;
	padding: 0;
}


/* TAGS ------------------------------------------*/

#tagcloud {
	padding: 0px 0 20px 0;
	width: 900px;
}

a.tag1, a.tag2, a.tag3, a.tag4, a.tag5, a.tag6 { 
 font-size: 15px; 
 color: #000; 
 line-height: 23px;
 font-family: Arial;
 border-bottom: 1px solid #ccc;
 padding: 0 5px 1px 5px;
 float: left;
}

a.tag1:link, a.tag1:active, a.tag1:visited { color: #999; }
a.tag2:link, a.tag2:active, a.tag2:visited { color: #777; }
a.tag3:link, a.tag3:active, a.tag3:visited { color: #555; }
a.tag4:link, a.tag4:active, a.tag4:visited { color: #444; }
a.tag5:link, a.tag5:active, a.tag5:visited { color: #333; }
a.tag6:link, a.tag6:active, a.tag6:visited { color: #000; }

a.tag1:hover, a.tag2:hover, a.tag3:hover, a.tag4:hover, a.tag5:hover, a.tag6:hover { padding: 0 5px 0px 5px; line-height: 23px; border-bottom: 2px solid #9800C7; color: #333; }

/* LINKS ------------------------------------------*/

.links a { 
	display: block;
	width: 220px;
	color: #333;
	line-height: 25px;
	border-bottom: 1px solid #CCC;
	float: left;
	padding: 2px 0 2px 0;
	font-size: 14px;
	margin-right: 10px;
}

.links a span.over, .links a:hover span.out { display: none; }
.links a:hover span.over { display: block; }
.links a:hover { border-bottom: 2px solid #9800C7; padding-top: 1px; }
.links a.rr { margin-right: 0px; width: 230px; }


/* Social Network
------------------------------------------------------------------- */

#mynetwork {
	width: 920px;
	height: 100px;
	margin: 25px 0 120px 30px;
	color: #CCC;
}

#mynetwork a {
	display: block;
	height: 47px;
	width: 87px;
	line-height: 16px;
	text-indent: -2000px;
	float: left;
	border: 1px solid #CCC;
	margin: 3px 3px 0 0;
}

#mynetwork a:hover { border: 1px solid #A2A2A2; }

#mynetwork a.flickr     { background-position:   1px  -340px; }
#mynetwork a.twitter    { background-position: -93px  -340px; }
#mynetwork a.lastfm     { background-position: -185px -340px; }
#mynetwork a.vimeo      { background-position: -277px -340px; }
#mynetwork a.xing       { background-position: -369px -340px; }
#mynetwork a.facebook   { background-position: -461px -340px; }
#mynetwork a.youtube    { background-position: -553px -340px; }
#mynetwork a.delicious  { background-position: -645px -340px; }
#mynetwork a.meinvz     { background-position: -737px -340px; }
#mynetwork a.myspace    { background-position: -829px -340px; }
#mynetwork a.supertopic { background-position:    1px -387px; }

/* Impressum
------------------------------------------------------------------- */
#impressum {
	font-size: 15px;
	line-height: 21px;
	padding: 30px;
}

#impressum h1 {
	width: auto;
	margin-bottom: 20px;
}

#impressum li span { 
		width: 110px;
		font-weight: bold;
		float: left;
}

#impressum li { margin-top: 5px; }


#left-container, #right-container {
	width: 320px;
	height: auto;
	float: left;
}

#right-container {
	width: 560px;
	margin-left: 45px;
	padding-bottom: 30px;
}

/* UBB Code
-------------------------------------------------------------------------------------------------------------------------------------- */

.ubb-underline { text-decoration: underline; }
.ubb-linethrough { text-decoration: line-through; }

.ubb-headline {
	font-size: 22px;
	font-weight: bold;
}

img.left { float: left; padding: 0 20px 20px 0; }
img.right { float: left; padding: 0 0 20px 20px; }
img.normal { }

code {
  background: #ccc;
  padding: 1px;
  font: 11px "Courier New", "Courier";
}

ol.ubb-code {
  padding: 10px;
  overflow: auto;
  /* overflow-y: hidden; */
}

.ubb-code {
  border: 1px solid #ccc;
  border-bottom: none;
  padding: 5px;
}

.ubb-code code {
  background: transparent;
  display: block;
  padding: 3px;
  margin-bottom: 0;
}

.ubb-code li {
  margin: 0 0 1px 2.5em;
  padding: 2px;
  list-style-type: decimal !important;
  font: 11px "Courier New", "Courier";
  white-space:pre;
  list-style-image: none !important;
}

.ubb-code li:hover {
		color: #444;
		background-color: #eee;
}

.ubb-image {
	background-color: #eee;
	border: 1px solid #ddd;
	text-align: center;
}


a.videolink, a.videolink:link, a.videolink:visited { font-size: 12px; line-height: 12px; color: #666; }


/* Rest
------------------------------------------------------------------- */
.mr0 { margin-right: 0; }