@import url('http://fonts.googleapis.com/css?family=Pacifico');

/* CSS Grundeinstellungen - CSS main settings */

body
{
background: url('../images/bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: 'Open Sans', sans-serif;
color: #555555;
font-size: 13px;
margin: 0 auto;
}

/* Links */

a
{
color:#007ba4;
text-decoration:none;
}
a:hover
{
text-decoration:underline;
}

a.powered
{
background: none;
overflow: hidden;
color: #444444;
font-size: 12px;
font-weight: normal;
text-decoration: none;
}
a.powered:active
{
color: #2b2b2b;
text-decoration: none;
}
a.powered:hover
{
color: #2b2b2b;
text-decoration: none;
}

a.follow
{
text-decoration: none;
}
a.follow:active
{
text-decoration: none;
}
a.follow:hover
{
text-decoration: none;
}

a.remove
{
text-decoration: none;
}
a.remove:active
{
text-decoration: none;
}
a.remove:hover
{
text-decoration: none;
}

a.navi
{
color: #777777;
font-size: 11px;
font-weight: bold;
text-decoration: none;
}
a.navi:active
{
color: #777777;
text-decoration: none;
}
a.navi:hover
{
color: #777777;
text-decoration: none;
}

a.view_comments
{
color: #696969;
font-size: 11px;
text-decoration: none;
}
a.view_comments:active
{
color: #333333;
text-decoration: none;
}
a.view_comments:hover
{
color: #333333;
text-decoration: none;
}

a.copy_index
{
color: #ffffff;
font-size: 11px;
text-decoration: none;
}
a.copy_index:active
{
color: #ffffff;
text-decoration: none;
}
a.copy_index:hover
{
color: #ffffff;
text-decoration: none;
}

a.nav_boot
{
color: #ffffff;
font-size: 11px;
text-decoration: none;
}
a.nav_boot:active
{
color: #ffffff;
text-decoration: none;
}
a.nav_boot:hover
{
color: #ffffff;
text-decoration: none;
}

h1
{
margin:5px 0;
color:#999;
text-shadow:1px 1px 0 #fff;
font-size:25px;
font-family:Arial Narrow, Arial, sans-serif;
}
h3
{

}

.copyright
{
color: #444444;
font-size: 12px;
margin-top: 30px;
}

/* DIV Container */

#copyright_index
{
position:relative;
z-index:500;
color: #ffffff;
text-align: center;
width: 100%;
font-size: 11px;
margin-top: 50px;
}

#container
{
margin:0 auto;
width:100%;
}

#nav_bar
{
background: #747474;
padding:8px;
color:#ffffff;
font-size:12px;
font-weight:bold;
overflow:auto;
-moz-border-radius-topleft: 3px;
webkit-border-top-left-radius: 3px;
border-top-left-radius: 3px;
-moz-border-radius-topright: 3px;
webkit-border-top-right-radius: 3px;
border-top-right-radius: 3px;
-webkit-box-shadow: 0 10px 6px -6px #fff;
-moz-box-shadow: 0 10px 6px -6px #fff;
box-shadow: 0 10px 6px -6px #fff;
}

#nav_bar a
{
color:#ffffff;
}

/* Meldungen - Notifications */

.error_msg
{
font-size:12px;
background-color:#ffebeb;
color:#e85151;
padding:10px;
font-weight:bold;
width:100%;
border:solid 1px #e89090;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}

.success_msg
{
font-size:12px;
background-color:#d3ffd3;
color:#268026;
padding:10px;
font-weight:bold;
width:100%;
border:solid 1px #97dc97;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}

/* DIVS */

#wall_container
{
text-align:left;
width:100%;
background-color:#ffffff;
color: #555555:
}

#stat_container
{
text-align:left;
width:100%;
}

.imgpreview
{
max-width:130px;
max-height:125px;
margin-bottom:10px;
margin-right:10px;
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow: 0 10px 6px -6px #777;
}
.preview
{
border:solid 1px #333;
max-width:150px;
max-height:125px;
margin-bottom:10px;
margin-left:10px;
}
.webcam_preview
{
width:103px;
margin:0px 3px 3px 0px;
}
#webcam{  float:left; width:320px;height:240px;border:solid 1px #333;margin-right:5px }
#webcam_preview {float:left; width:230px;height:240px; }
#webcam_status,#webcam_takesnap
{
width:100%;clear:both;padding-top:5px
}
#content
{
margin-top:10px;
}
#updateboxarea
{
padding:10px;
}
#update
{
border:solid 1px #bdc7d8;
height:30px;
width:100%;
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
padding:5px;
margin-top: 5px;
}
#button_bar
{
display:none;
}
.comment
{
border:solid 1px #BDC7D8;
font-family:Arial, Helvetica, sans-serif;
overflow: auto;
resize: none;
}

.arrow-e {
border-style: dashed;
border-color: transparent;
border-width: 0.70em;
display: -moz-inline-box;
display: inline-block;
font-size: 8px;
height: 0;
line-height: 0;
position: relative;
vertical-align: middle;
width: 0;
}

.arrow-e {
border-left-width: 1em;
border-left-style: solid;
border-left-color: #999;
}

/* Bild-Upload - Image upload */

#imageupload
{
overflow:auto; padding:10px;width:560px; font-size:11px;display:none;
}
#webcam_container
{
overflow:auto; padding:10px;width:560px; font-size:11px;display:none;
}

.border
{
border-left:solid 1px #BDC7D8;border-right:solid 1px #BDC7D8;border-bottom:solid 1px #BDC7D8; 
}

.stbody
{
padding:10px;
border-bottom:solid 1px #dedede;
overflow:auto;
background-color: #ffffff;
}
.stimg
{
float:left;
height:50px;
width:50px;
padding:2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.sttext
{
margin-left:70px;
min-height:50px;
word-wrap:break-word;
overflow:hidden;
padding:5px;
display:block;
font-size:12px;
width:490px;
}
.sttext b
{
color:#006699;
}

/* Texte und Kommentare - Texts and comments */

.sttime
{
font-size:11px;
color:#999;
font-family:Arial, Helvetica, sans-serif;
margin-top:5px;
}
.stdelete 
{
font-weight:bold;
float:right;
cursor:pointer;
background:url(../icons/trashdull.png);
display: none;
height:20px;
width:20px;
}
.stbody:hover .stdelete{
display : block;
}
.stdelete:hover
{
background:url(../icons/trash.png);
}
#stexpandbox
{
margin-top:10px;
}
#stexpandbox img
{
border:solid 1px #dedede;
padding:3px;
}
.comment_ui, .commentupdate,
.stcommentbody
{
border:solid 1px #ebebeb;
border-bottom:solid 2px #ebebeb;
background-color:#fbfbfb;
padding:5px;
width:400px;
overflow:auto;
}
.stcommentimg
{
float:left;
height:35px;
width:35px;
padding:2px;
}
.stcommenttext 
{
margin-left: 45px;
min-height: 40px;
word-wrap: break-word;
overflow: hidden;
padding: 3px;
display: block;
font-size: 11px;
width: 340px;
}
.stcommenttext b
{
color:#006699;
}

.stcommenttime
{
font-size:11px;
color:#999;
font-family:Arial, Helvetica, sans-serif;
margin-top:5px;
}
.stcommentdelete 
{
font-weight:bold;
float:right;
cursor:pointer;
display:none;
background:url(../icons/trashdull.png);
height:20px;
width:20px; 
}
.stcommenttext:hover .stcommentdelete
{
display:block
}
.stcommentdelete:hover
{
background:url(../icons/trash.png);
}

.update
{
background-color:#F3EEF7;
width:400px;
padding:5px;
}
.comment
{
width:330px;
height:35px;
font-size:11px;
}
.small_face
{
width:35px;
height:35px;
border: none;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.big_face
{
width:50px;
height:50px
border: none;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
#flashmessage
{
height:15px;
margin-top:10px;
font-size:11px;
color:#555555;
}

/* More Box */

.morebox
{
font-weight:bold;
color:#333333;
text-align:center;
background-color:#fbfbfb; 
margin-top:8px;
margin-left:1%;
margin-bottom:8px;
padding:6px 0px 6px 0px;
display:block;
font-size:13px;
width:98%;
border:1px solid #ebebeb;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.morebox a{text-decoration:none; display:block}
.morebox a:hover{ text-decoration:none;color:#333333; }

/* Buttons */

.button
{
border: 0px;
color: #ffffff;
font-weight: 400;
text-shadow: 0 1px rgba(0,0,0,0.1); 
background-color: #4d90fe;
height: 36px;
padding: 0 8px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-khtml-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
}
.button:hover
{
border: 0px;
text-shadow: 0 1px rgba(0,0,0,0.3);
background-color: #357ae8;
}
#addphoto
{
font-weight:bold;
}
#camera_error
{
text-align:center;
margin-top:80px;
}

.update_button
{
border: 0px;
color: #ffffff;
font-weight: bold;
text-shadow: 0 1px rgba(0,0,0,0.1); 
background-color: #4d90fe;
height: 36px;
padding: 0 12px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-khtml-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
}
.update_button:hover
{
border: 0px;
text-shadow: 0 1px rgba(0,0,0,0.3);
background-color: #357ae8;
}

/* Formatierungen - Formatings */

.info
{
font-size:11px;
color:#888888;
padding-top:15px;
padding-bottom:15px;
}

.login_text
{
color:#f9f9f9;
font-size:11px;
}

.pos
{
position:relative;
top:-2;
z-index: 1;
}
.poslike
{
position:relative;
top:4px;
z-index: 1;
color: #555555;
}
.imgpos
{
position:relative;
top:5px;
margin-left:3px;
margin-right:5px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
z-index: 1;
}
.img_logout
{
position:relative;
top:-2px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
z-index: 1;
}

.like_bar
{
border-bottom:solid 2px #ebebeb;
background-color:#fbfbfb;
padding:5px;
width:400px;
overflow:auto;
font-size:11px;
}

.texteffect
{
text-shadow:1px 1px 0 #000000;
}
.texteffect_top
{
margin-top:30px;
}

#index_container
{
background:none;
margin:0px auto;
width:100%;
text-align:center;
margin-top:90px;
}

.p1
{
font-family: 'Pacifico', cursive;
color:#4d90fe;
text-shadow:1px 1px 0 #000000;
font-size:35px;
font-weight: bold;
text-align:center;
}
.p2
{
font-weight:normal;
font-size:16px;
text-shadow:1px 1px 0 #000000;
color:#ffffff;
font-weight: bold;
text-align:center;
}

/* DIVS */

#header
{
max-width:640px;
-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;
}

#footer
{
font-size:12px;
color:#555555;
padding:5px;
}

.index_left
{
display: inline-block;
position: relative;
z-index:500;
}

.index_desctxt
{
position:relative;
margin-bottom:90px;
z-index:500;
}

.clear_right
{
clear:right;
}

.index_fill_all
{
display: inline-block;
position: relative;
z-index:500;
background-color: #333333;
width:250px;
margin-left: 150px;
-moz-opacity:.80;
filter:alpha(opacity=80);
opacity:.80;
padding: 10px 25px 20px 25px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-khtml-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}

.index_right
{
position:relative;
z-index:500;
width:100%;
color:#ffffff;
text-align:left;
}

.index_right_reg
{
position:relative;
z-index:500;
width:100%;
color:#ffffff;
text-align:left;
margin-top:20px;
}

.img_mockup
{
border:0;
}

.footer
{
text-size:9px;
color:#aaaaaa;
padding:10px;
}

.input
{
height: 38px;
font-size: 14px;
width: 100%;
margin-bottom: 10px;
-webkit-appearance: none;
background: #ffffff;
border: 1px solid #d9d9d9;
border-top: 1px solid #c0c0c0;
padding: 0 8px;
box-sizing: border-box;
-moz-box-sizing: border-box;
color: #333333;
}
.input:hover
{
border: 1px solid #b9b9b9;
border-top: 1px solid #a0a0a0;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.noseperator
{
margin-bottom:-2px;
}

.signin_btn
{
cursor:pointer;
padding:5px;
margin-top:5px;
color:#ffffff;
font-weight:bold;
background-color: #3b5998;
background-repeat: repeat-x;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;
}

.signup_btn
{
cursor:pointer;
padding:5px;
margin-top:5px;
color:#ffffff;
font-weight:bold;
background-color: seagreen;
background-repeat: repeat-x;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;
}

/* Pagination */

#pages
{
clear:both;
list-style-type:none;
overflow:hidden;
margin-top:10px;
padding:0;
}

#pages li    
{
float:left;
}

#pages li a
{
background-color: #fbfbfb;
font-weight:bold;
margin:0 10px 0 0;
padding:5px 10px;
border:1px solid #ebebeb;
display:inline-block;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-khtml-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
}

#pages li a:hover
{
text-decoration:none;
color:#555555;
}

/* DIVS */

.clearing
{
clear:both;
}

.icon_log_main
{
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-khtml-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
width: 20px;
height: 20px;
}

.userlist
{
padding:15px 0 15px 0;
border-bottom:solid 1px #ebebeb;
overflow:auto;
width:100%;
}
.userlist_img
{
float:left;
}
.userlist_img_on
{
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-khtml-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
}
.userlist_body
{
margin-left:60px;
margin-top: 15px;
}

.follow_btn
{
cursor:pointer;
padding:5px;
color:#ffffff;
font-weight:bold;
text-decoration:none;
background-color:#F89406;
-moz-border-radius: 2px;-webkit-border-radius: 2px;border-radius: 2px;
}
.follow_btn:hover
{
text-decoration:none;
}

.following_btn
{
cursor:pointer;
padding:5px;
color:#ffffff;
font-weight:bold;
text-decoration:none;
background-color:#51A351;
-moz-border-radius: 2px;-webkit-border-radius: 2px;border-radius: 2px;
}
.following_btn:hover
{
text-decoration:none;
}

.lst_sep
{

}

.foll_re_top
{
margin-top:12px;
}
.cam_top
{
margin-top:8px;
}

#hint_msg
{
padding:10px;
margin-left:12px;
border:solid 1px #aaaaaa;
-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;
opacity: 0.8; filter: alpha(opacity=60); background-repeat: no-repeat;
background-color: black; color: white;
}

#hint_msg a
{
color:orange;
text-decoration:none;
font-weight:bold;
}

#hint_msg a:hover
{
text-decoration:underline;
}

#info_box
{
padding:60px 50px 0px 10px;
border-bottom:solid 1px #ebebeb;
width:100%;
background-color:#fcfcfc;
margin-top:200px;
opacity: 0.9;
-moz-opacity: 0.9;
-khtml-opacity: 0.9;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
filter: alpha(opacity=90);
}

#profile_img
{
background-color: #FFFFFF;
border: 1px solid #DEDEDE;
margin-left: 10px;
margin-top: -100px;
position: absolute;
width: 88px;
height: 88px;
float:left;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow: 0 10px 6px -6px #777;
}
#timeline_img
{
background-color: #FFFFFF;
border: 1px solid #DEDEDE;
position: absolute;
width: 86px;
height: 86px;
float:left;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow: 0 10px 6px -6px #777;
}

.avatar_img
{
padding:3px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
#cover_container
{
overflow: auto;
width: 100%;
}

#info-box
{
margin-left:115px;
margin-top: -50px;
position: absolute;
}

#info-name
{
float:left;
overflow:hidden;
word-wrap: break-word;
width:150px;
margin-top:10px;
}

#info-content
{
margin-left:450px;
width:360px;
}

#info-photos
{
background-color:#f9f9f9;
text-align:center;
font-size:11px;
padding:5px;
margin-left:100px;
border:solid 1px #eeeeee;
width:80px;
-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;
}

#info-friends
{
background-color:#f9f9f9;
text-align:center;
font-size:11px;
padding:5px;
margin-left:200px;
margin-top:-44px;
border:solid 1px #eeeeee;
width:80px;
-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;
}

#info-timeline
{
background-color:#fbfbfb;
text-align:center;
font-size:11px;
padding:5px;
float:left;
width:80px;
border:solid 1px #eeeeee;
-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;
}

#photo-album
{
background: #fbfbfb;
width: 80%;
margin: 0 auto;
border-bottom:solid 1px #ebebeb;
border-left:solid 1px #ebebeb;
border-right:solid 1px #ebebeb;
-moz-border-radius-bottomleft: 2px;
webkit-border-bottom-left-radius: 2px;
border-bottom-left-radius: 2px;
-moz-border-radius-bottomright: 2px;
webkit-border-bottom-right-radius: 2px;
border-bottom-right-radius: 2px;
margin-bottom: 5px;
}

#photo-album div
{ 
display: inline-block; 
width:30%; 
margin: 0.5em 0; 
padding:0; 
}

#photo-album div p
{ 
text-align: center; 
margin:0; 
padding:0; 
}

.album_pic
{
background-color: #fbfbfb;
max-width:100px;
padding:2px;
border:solid 1px #ebebeb;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}

#album_infobar
{
background: #f2f2f2;
padding:5px;
font-size: 12px;
border:solid 1px #ebebeb;
overflow:auto;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
#aib_left
{
float:left;
font-size: 14px;
}
#aib_right
{
margin-left:70px;
font-size:12px;
margin-top:6px;
}

.stat_box
{
background: #2fa9f6 url('../icons/info.png') no-repeat 14px 14px;
color: #fefefe;
font-size: 14px;
font-weight: 600;
padding: 19px 60px;
margin: 25px 0 25px 0;
width: 100%;
}

/* Skalierung - Responsive */

@media screen and (max-width : 1200px) {
.index_left
{
display: inline-block;
}
.index_fill_all
{
margin-left: 150px;
}
}
@media screen and (max-width : 979px) {
.index_left
{
display: inline-block;
}
.index_fill_all
{
margin-left: 150px;
}
}
@media screen and (max-width : 767px) {
.index_left
{
display: inline-block;
}
.index_fill_all
{
margin-left: 0;
margin-bottom: 30px;
}
.index_desctxt
{
margin-bottom:50px;
}
}
@media screen and (max-width : 480px) {
.index_left
{
display: none;
}
.index_fill_all
{
margin-left: 0;
margin-bottom: 30px;
}
.index_desctxt
{
margin-bottom:50px;
}
}
@media screen and (max-width : 300px) {
.index_left
{
display: none;
}
.index_fill_all
{
margin-left: 0;
margin-bottom: 30px;
}
.index_desctxt
{
margin-bottom:50px;
}
}