/* Enthaelt alle Basisangaben, was Farben und Schriftarten und -groessen angeht */
/* Initial */
@font-face {
 font-family: aaaiight;
 src: url('../fonts/aaaiight.ttf');
}

@font-face {
 font-family: birdman;
 src: url('../fonts/birdman_.ttf');
}

/* Variables
$primecolor:#002 #489;
$hovercolor:#ACC;
$active:#5BC #002;
$linkcolor:#667;
$linkhover:#489;
*/

/* INDIVIDUALS */
p {
 line-height:1.2em;
 text-align:justify;
 
 -moz-hyphens:auto;
 -webkit-hyphens:auto;
 -ms-hyphens:auto;
 hyphens:auto;
 word-wrap:break-word;
}

/* FONTS */
html, body, div, label, input, #sidebar, .slider, .top_nav {
 font-family:'Muli', sans-serif;
}

#mainnav, #navigation, h1, h2, h3, legend {
 font-family:'birdman', 'Muli', sans-serif;
}

#me{
 font-family:'aaaiight', 'Muli', sans-serif;
}

/* TEXT-DECORATION */
header, #mainnav, #sidebar, #top_nav {
 text-align:right;
}

legend {
	font-weight:bold;
}

label, input {
	text-align: left;
}

input[type="submit"], input[type="reset"] {
	text-align: center;
	font-weight: bold;
}

#mainnav {
 font-weight:bold;
}

a {
 text-decoration:none;
}

li {
 font-weight:600;
}

li.privacy {
	font-weight:normal;
}

.slider {
 font-weight:normal;
}

.text:hover, .text:focus, .text:active, .text_f, .top_nav:hover, .top_nav:focus {
 text-decoration:underline;
}

.header:hover, .header:focus, .header:active, .sidebar:hover, .sidebar:focus, .sidebar:active{
  text-decoration:underline;
}

/* SIZE */
body {
 font-size:1.0em;
}

#mainnav {
 font-size:1.5em;
 /* Farbe Horizontal Vertikal Unschaerfe */
 text-shadow:white 3px 2px 1px;
}

h1 {
 font-size:1.8em;
}

h2, legend {
 font-size:1.4em;
}

h3 {
 font-size:1.2em;
}

footer, .header, .sidebar, p, li.privacy {
 font-size:0.8em;
}

/* BORDERS */
img {
 border:0;
}

header {
 border-top-left-radius:20px;
}

fieldset {
	border: 1px solid #002;	
}

input, textarea {
	border: 1px solid #002;
	
	box-shadow: inset 3px 3px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: inset 3px 3px 3px rgba(0,0,0,0.2);
	-moz-box-shadow: inset 3px 3px 3px rgba(0,0,0,0.2);
}

input[type="submit"], input[type="reset"]{
	color: #fff;
	background: #002;
	
	border-top-right-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	-moz-border-top-right-radius: 20px;
	border-bottom-left-radius: 20px;
	-webkit-border-bottom-left-radius: 20px;
	-moz-border-bottom-left-radius: 20px;

}

textarea {
	border-bottom-right-radius: 20px;
	-webkit-border-bottom-right-radius: 20px;
	-moz-border-bottom-right-radius: 20px;
	border-bottom-left-radius: 20px;
	-webkit-border-bottom-left-radius: 20px;
	-moz-border-bottom-left-radius: 20px;
}

#header-image {
 border-radius:22px;
}

#main {
 border-top-right-radius:20px;
}

#sidebar {
 border-top:1px solid #002;
 border-bottom-left-radius:20px;
}

#vcard {
 background-color:#8c8989;
 border: 2px outset #ddd;
 
 box-shadow: 5px 5px 12px #000;
-webkit-box-shadow: inset 3px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: inset 3px 3px 3px rgba(0,0,0,0.2);
}

footer {
 border-bottom-right-radius:20px;
}

/* COLORS */
html, body {
/* Scrollbar fuer IE, Opera und Konqueror */
 scrollbar-base-color:#FFF;
 scrollbar-track-color:#FFF; /* Verschiebeweg */
 scrollbar-arrow-color:#002;
 scrollbar-darkshadow-color:#FFF;
 scrollbar-highlight-color:#FFF; /* Farbe fuer den oberen und linken Rand */
 scrollbar-shadow-color:#002; /* Farbe fuer den unteren und rechten Rand */
 scrollbar-face-color:#FFF;  /* Balkenoberflaeche */
 scrollbar-3dlight-color:#ACC; /* 3D-Effekte */
}

header, footer {
 background-color:#002;
 color:#FFF;
}

legend {
	color: #489;
}

a[href^="#top"]:before{ 
	content:'➡'; 
	display: inline-block; 
	color:#002; 
	font-size: 1.0em; 
	-webkit-transform:rotate(-90deg); 
	-ms-transform:rotate(-90deg); 
	transform:rotate(-90deg); 
} 

.top_nav {
 color:#002;
 font-size:0.6em;
}

#header-image {
 background:rgba(255,255,255,1.0);
}

#main, #sidebar {
 background:rgba(255,255,255,0.8);
}

#navigation {
 background:rgba(170, 193, 196,0.9);
}

.mainnav, .sidebar {
 color: #667;
}

.text_f{
 color:#000;
}

li.privacy {
	color:#489;
}

li.privacy span {
	color:#000;
}

.mainnav:hover, .mainnav:focus, .sidebar:hover, sidebar:focus, .text, .text_f:hover, .text_f:focus, h1, h2, h3 {
 color:#489;
}

.mainnav:active, .sidebar:active, .text:active, .text_f:active, li {
 color:#002;
}

.header {
 color:#FFF;
}

.header:hover, .header:focus {
  color:#ACC;
}

.header:active {
  color:#5BC;
}

.friends:hover img, .prof:hover {
 opacity:0.7;
}

p {
 color:#000;
}