/*******************************************************************************
 * Stylesheet for samui-samui.de
 *
 * (c) 2010 Patrick Kollitsch / David's Neighbour
 *          http://davids-neighbour.com
 *
 * @uses 960.gs without text.css
 ******************************************************************************/
 @CHARSET "UTF-8";

/*******************************************************************************
 * webfonts, reset and grid
 ******************************************************************************/
@import url('http://fonts.googleapis.com/css?family=IM+Fell+French+Canon:regular,italic&subset=latin');
@import url('http://css.blogfarm.de/960/reset.css');
@import url('/stylesheets/grid.css');

/*******************************************************************************
 * general rules
 ******************************************************************************/
body{
background:#e02020 url('/stylesheets/img/bg.png') repeat-y center center;
color:#222222;
font:13pt/1.25 Georgia, Palatino, "New Century Schoolbook", "Nimbus Roman No9 L", serif;
}
/*******************************************************************************
 * global transitions
 ******************************************************************************/
*:link,*:visited{
-webkit-transition:color 1s ease-out 1s,
background-color 1s ease-out 1s,
border-color 1s ease-out 1s;
transition:color 1s ease-out 1s,
background-color 1s ease-out 1s,
border-color 1s ease-out 1s;
}
*:hover,*:active,*:focus{
-webkit-transition:color .25s linear,
background-color .25s linear,
border-color .25s linear;
transition:color .25s linear,
background-color .25s linear,
border-color .25s linear;
}
/*******************************************************************************
 * tags
 ******************************************************************************/
a, a:link, a:visited{
color:#800000;
}
a:visited:hover, a:visited:focus, a:visited:active, a:focus, a:active, a:hover{
color:#d00000;
}


.title h2 {
margin-top: 50px;
line-height: 0.75;
}
h2,h3 {
color:#2c142c;
font-weight:normal;
line-height:1;
letter-spacing:-0.05em;
text-align:left;
margin:0 0 0.5em;
font-size:2em;
}
h2 a:link, h3 a:link, h2 a:visited, h3 a:visited {
text-decoration:none;
color: #2c142c;
font-family: 'IM Fell French Canon', serif;
font-size: 40px;
font-style: normal;
font-weight: 400;
text-decoration: none;
text-transform: none;
letter-spacing: 0em;
word-spacing: 0em;
}
h2 a:hover, h3 a:hover {
text-decoration:underline;
color: #d00000;
}
h3 {
font-size: 1.25em;
}
h4{
font-size:1em;
}
abbr[title]{
border-bottom:1px dotted #333333;
cursor:help;
}
blockquote{
margin:1em 0 1.5em;
padding:0 20px 0 40px;
border:none;
font-style: italic;
}
blockquote:before{
float:left;
margin:0 0 0 -14px;
color:#aaaaaa;
content:"\00ab";
}
blockquote>*:last-child:after{
padding:0 0 0 5px;
color:#aaaaaa;
content:"\00bb";
}
/*******************************************************************************
 * sections:header
 ******************************************************************************/
#toptop {
background-color: black;
font-family: Verdana; /* todo global */
font-size: 12px; /* todo global */
padding: 5px 0px;
}
#toptop p {
margin:0;
padding: 5px 0px;
}
#toptop a {
color: white;
font-size: 14px;
padding: 0px 10px;
text-decoration: none; /** todo active with arrow down **/
}
h1, h1 a {
color: #2C142C;
font-family: 'IM Fell French Canon', serif;
font-size: 102px;
font-style: normal;
font-weight: 400;
letter-spacing: 0em;
line-height: 1em;
margin: 0px;
padding: 0px;
text-align: center;
text-decoration: none;
text-shadow: #E0C020 8px 8px 8px;
text-transform: none;
word-spacing: 0em;
}
h1 span {
border-bottom: 1px solid black;
border-top: 1px solid black;
display: block;
font-size: 25px;
line-height: 25px;
padding: 5px 0px 3px;
text-shadow: none;
text-transform: uppercase;
}


/*******************************************************************************
 * sections:content
 ******************************************************************************/
.title {border-bottom: 1px solid black;
margin-bottom: 30px;} 
.text{
text-align:justify;
}
.entry{
margin-bottom:10em;
}



.entry p, .entry ul {
margin:0 0 1.5em 0;
overflow:hidden;
}
.entry ul {
    list-style-type: disc;
    padding-left:2em;
}

/*******************************************************************************
 * datestamp left column
 ******************************************************************************/
div.datestamp {
font-family: 'IM Fell French Canon', serif;    
position:relative;
height: 100px;
}
div.leftcolumn {
font-family: 'IM Fell French Canon', serif;    
font-size: 25px; 
}
div.datestamp span.day{  
font-size: 50px;
height: 45px;
left: 0px;
line-height: 45px;
position: absolute;
text-align: center;
top: 0px;
width: 60px;
-moz-transform: scale(1) rotate(-30deg) translate(0px, 0px) skew(0deg, 0deg);
-webkit-transform: scale(1) rotate(-30deg) translate(0px, 0px) skew(0deg, 0deg);
-o-transform: scale(1) rotate(-30deg) translate(0px, 0px) skew(0deg, 0deg);
transform: scale(1) rotate(-30deg) translate(0px, 0px) skew(0deg, 0deg);
}
div.datestamp span.month{
-moz-transform: scale(1) rotate(270deg) translate(0px, 0px) skew(0deg, 0deg);
-webkit-transform: scale(1) rotate(270deg) translate(0px, 0px) skew(0deg, 0deg);
-o-transform: scale(1) rotate(270deg) translate(0px, 0px) skew(0deg, 0deg);
transform: scale(1) rotate(270deg) translate(0px, 0px) skew(0deg, 0deg);
font-size: 30px;
height: 30px;
left: 45px;
position: absolute;
top: 15px;
width: 45px;
}
div.datestamp span.year{
font-size: 40px;
left: 0px;
line-height: 40px;
position: absolute;
text-align: center;
top: 60px;
width: 90px;
}

/*******************************************************************************
 * sections:kontakt
 ******************************************************************************/
input, textarea, button {
font:13pt/1.25 Georgia, Palatino, "New Century Schoolbook", "Nimbus Roman No9 L", serif;
}
.zemText, .zemTextarea {
border: 1px solid black;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-khtml-border-radius:4px;
width:640px;
margin-bottom:0.7em;
behavior: url(/javascripts/pie/PIE.htc);
}
.zemText {height: 25px;}
.zemTextarea {height:100px;}
.zemContactForm label {display:none;}
.zemError{color: red;margin: 2em 0px;}

/*******************************************************************************
 * sections:sidebar
 ******************************************************************************/
#sidebar h3 a {
margin-bottom:0.5em;
font-size:25px;
}
#sidebar div{
margin-bottom:45px;
padding-left: 20px;
}
/*******************************************************************************
 * sections:pager
 ******************************************************************************/
.pager{
margin:20px 0;
padding:5px 0;
border-top:1px solid ;
border-bottom:1px solid ;
}
.pager a {padding:5px 0;}
.pager .older{text-align:right;}
.pager .newer {text-align:left;}
/*******************************************************************************
 * sections:footer
 ******************************************************************************/
#links{
padding:3em 0;
color:#F0F8FF;
background:#333 url('/stylesheets/img/bg2.png') repeat-y center center;
border-top: 1px solid #2c142c;
}
#links h4{
margin-bottom:0.5em;
}
#links ul li p{
margin:0;
}
#links .gravatar{
border:1px solid #666666;
}
#footer{
padding:3em 0;
color:#F0F8FF;
background:#222222 url('/stylesheets/img/bg2.png') repeat-y center center;
}
#footer p {margin:1em 0;}
#links h3, #footer h3 {
color: #e02020;
}
#footer .vcard .photo,#footer .flickr_badge_image img{
margin-top:5px;
border:1px solid #666666;
}
#footer a:link,#footer a:visited,#links a:link,#links a:visited{
color:#F0F8FF;
}
#footer a:hover,#links a:hover{
color:#d00000;
}
#footer ul li,#links ul li{
padding:1em 0;
border-bottom:1px dotted #444444;
}
#links li li{
border:none;
padding:0;
}
#footer ul li:last-child,#footer ul#kontakt li:last-child,#links ul li:last-child{
border-bottom:none;
}
#footer ul a,#links ul a{
text-decoration:none;
}

/*******************************************************************************
 * sections:disclaimer
 ******************************************************************************/
#disclaimer{
background:#222222 url("/stylesheets/img/footer2.png") no-repeat 50% 60px;
height:350px;
text-align:center;
color: #ccc;
}
#disclaimer a:link,#disclaimer a:visited{color:#aaaaaa;}
#disclaimer a:hover{color:#cccccc;}
#disclaimer3 span {display:block;} 
#disclaimer3 {
float: left;
font-family: 'IM Fell French Canon', serif;
padding-top: 120px;
width: 30%;
}
#disclaimer2 {
float: right;
font-family: 'IM Fell French Canon', serif;
height: 40px;
line-height: 40px;
margin-right: 20px;
margin-top: 280px;
padding-right: 50px;
text-align: right;
width: 30%;
background-image: url('/stylesheets/img/tp.png');
background-position: center right;
background-repeat:no-repeat;
}

/*******************************************************************************
 * forms
 ******************************************************************************/
#commentform{}
#commentform p {margin: 1em 0;}
#commentform ul.error li{
list-style-image:url('/stylesheets/img/exclamation.png');
list-style-position:inside;
}
#commentform textarea{
width:618px;
border:1px solid #999999;
padding:10px;
background:#eee;
height:250px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-khtml-border-radius:4px;
}
#commentform input[type=text]{
width:618px;
padding:10px;
border:1px solid #999999;
background:#eee;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-khtml-border-radius:4px;
}
#commentform input[type=checkbox]{
}
#fgr label{
margin-left:3px;
position:relative;
}
input[type=submit],button{
padding:0.4em 2em;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-khtml-border-radius:4px;
}
.message{
border:1px solid #222222;
padding:10px;
background:#fffaf0;
}
/*******************************************************************************
 * tools
 ******************************************************************************/
.hidden{
display:none;
}
.floatright{
float:right;
margin-left:10px;
}
.floatleft{
float:left;
margin-right:10px;
}
.clickable {
cursor: pointer;
}
span.flickrr {color:#3993ff;font-face:Arial;}
span.flickrr span {color:#ff1c92;}
/*******************************************************************************
 * tags
 ******************************************************************************/
ul.tags{
margin:0;
padding:0;
text-align:center;
}
ul.tags li{
margin:0;
padding:0;
display:inline;
list-style-type:none;
}
.t1,.t2,.t3,.t4,.t5,.t6,.t7,.t8,.t9,.t10,.t11,.t12,.t13,.t14,.t15,.t16{
line-height:12px !important;
text-decoration:none;
vertical-align:middle;
}
.t1{
font-size:1em;
}
.t2{
font-size:1.05em;
}
.t3{
font-size:1.1em;
}
.t4{
font-size:1.15em;
}
.t5{
font-size:1.2em;
}
.t6{
font-size:1.25em;
}
.t7{
font-size:1.3em;
}
.t8{
font-size:1.35em;
}
.t9{
font-size:1.4em;
}
.t10{
font-size:1.45em;
}
.t11{
font-size:1.5em;
}
.t12{
font-size:1.55em;
}
.t13{
font-size:1.6em;
}
.t14{
font-size:1.65em;
}
.t15{
font-size:1.7em;
}
.t16{
font-size:1.75em;
}
/*******************************************************************************
 * content:archive
 ******************************************************************************/
ul.archive {margin:15px 0 2em;padding-left:0;}
ul.archive li.month span {font-size:80%;   }
ul.archive li.month {float:left;margin-right: 1em; list-style-type: none;}

/*******************************************************************************
 * content comments
 ******************************************************************************/

.comment{
margin-bottom:2em;
}

/*******************************************************************************
 * media display
 ******************************************************************************/
.media{
border:1px solid #000000;
padding:9px;
background:#dddddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
display:block;
margin-bottom: 1em;
behavior: url(/javascripts/pie/PIE.htc);
}
.media p{
text-align:center;
}
.media .image img, .media .flickr img, .media .video img {
width:620px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
behavior: url(/javascripts/pie/PIE.htc);
}
.image2 {text-align:center;}
.image2 img {
margin:0 auto;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
behavior: url(/javascripts/pie/PIE.htc);
}
.media object{
width:620px;
margin:0;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
behavior: url(/javascripts/pie/PIE.htc);
}
/*******************************************************************************
 * flickr display (hover effect)
 ******************************************************************************/
.flickr, .image {
overflow: hidden;
position: relative;
padding:8px;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-khtml-border-radius:8px;
display:block;
background-color: #D0D070;
border: 1px solid #F0C000;
behavior: url(/javascripts/pie/PIE.htc);
}
.flickr a, .image a {
text-decoration: none;
float: left;
}
.flickr a:hover, .image a:hover{
cursor: pointer;
}
.flickr a img, .image a img {
width:620px;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-khtml-border-radius:8px;
border: 1px solid #F0C000;
behavior: url(/javascripts/pie/PIE.htc);
}
.flickr:hover p, .image:hover p{
display: block;
padding: 10px 0;
background: #D0D070;
filter:alpha(opacity=60);
opacity:.60;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
color: 2c142c;
font-family: 'IM Fell French Canon', serif;
font-size:1.5em;
position: absolute;
bottom: 20px;
text-align:center;
border-top: 1px solid #F0C000;
border-bottom: 1px solid #F0C000;
display: block;
margin-bottom: 5px;
width:622px;
behavior: url(/javascripts/pie/PIE.htc);
}
.flickr p, .image p {
display: none;
}
/*******************************************************************************
 * youtube chromeless player
 ******************************************************************************/
.video-player {
width: 460px;
}
.video-controls {
background: #dedede;
height: 30px;
margin: -4px 0 0;
position: relative;
width: 640px;
}
.status {
height: 20px;
left: 30px;
position: absolute;
top: 5px;
width: 310px;
}
.bar {
background: #a4a4a4;
height: 10px;
position: relative;
top: 5px; }
.loaded {
background: #bbb;
height: 10px;
left: 0;
position: absolute;
top: 0; }
.indicator {
background: #212121;
display: block;
height: 10px;
left: 0;
position: absolute;
top: 0;
width: 20px;
}
.play-pause, .volume {
background: url('/stylesheets/img/btn-controls.png') no-repeat;
display: block;
height: 20px;
overflow: hidden;
position: absolute;
text-indent: -9999px;
top: 5px;
width: 20px;
}
.play-pause {
left: 5px;
}
.playing {
background-position: 0 -20px;
}
.volume {
background-position: 0 -60px;
right: 130px;
}
.muted {
background-position: 0 -40px;
}
.view-youtube {
color: #000;
display: block;
float: right;
font-size: 9px;
line-height: 30px;
padding: 0 5px 0 0;
text-decoration: none;
text-transform: uppercase;
font-family: Arial, sans-serif;
}
/*******************************************************************************
 * to do
 ******************************************************************************/
#search input {
border: 1px solid #2c142c !important;
color: #2c142c !important;
background-color: #e0c020 !important;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-khtml-border-radius:8px;
height: 20px;
margin: 0px 45px;
padding: 2px 15px;
width: 230px;
behavior: url(/javascripts/pie/PIE.htc) !important;
}
#search fieldset {
background-image: url('/stylesheets/img/search.png');
background-position: 15px 50%;
background-repeat: no-repeat;
}


#social img {
opacity:0.1;
-webkit-transition-property: opacity; -webkit-transition-duration: 2000ms;
-moz-transition-property: opacity; -moz-transition-duration: 2000ms; 

}
#social img:hover {opacity:0.9;
-webkit-transition-property: opacity; -webkit-transition-duration: 500ms;
-moz-transition-property: opacity; -moz-transition-duration: 500ms; 
}
#social span { opacity:0;
-webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms;
-moz-transition-property: opacity, top; -moz-transition-duration: 300ms; 
}
#social a:hover { opacity:1; top:-10px; }
#social a {text-decoration:none; display:block;float:left;}