@charset "utf-8";

/*
Grün: #22a86c;
Grau: #23a86d;
Hellgrau: #2d2f31;
*/

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800);

html, body { margin:0px; padding:0px; }
body { background-color:#3f4649; font-family: 'Open Sans', sans-serif; color:#fff; text-rendering:optimizeLegibility; font-size:12px; min-width:320px; }

::selection { background-color:#23a86d; color:#fff; }
::-moz-selection { background-color:#23a86d; color:#fff; }

.label {  }
.loader { display:none; }

/* messages */
p.success { background-color:rgba(34,168,108,0.25); color:#1ad17f; border-radius:5px; padding:10px; line-height:16px; vertical-align:middle; }
p.success::selection { background-color:rgb(34,168,108); color:#fff; }
p.success::-moz-selection { background-color:rgb(34,168,108); color:#fff; }

p.error { background-color:rgba(220,81,58,0.25); color:#ff8d7a; border-radius:5px; padding:10px; line-height:16px; vertical-align:middle; }
p.error::selection { background-color:rgb(220,81,58); color:#fff; }
p.error::-moz-selection { background-color:rgb(220,81,58); color:#fff; }

p.info { background-color:rgba(34,119,168,0.25); color:#10a8ff; border-radius:5px; padding:10px; line-height:16px; vertical-align:middle; }
p.info::selection { background-color:rgb(34,119,168); color:#fff; }
p.info::-moz-selection { background-color:rgb(34,119,168); color:#fff; }

h1, h2, h3, h4 { color:#22a86c; }

a:visited { color:inherit; }
a:active { color:inherit; }
a:link { color:inherit; text-decoration:none; }
a:hover { color:inherit; text-decoration:underline; }

.clear { clear:both; }

/* formulare */
/* formelements */
button, input, textarea { background-image:none; border-radius:0px; font-family: 'Open Sans', sans-serif; outline:none; }

button.loading { background-image:url(../images/loader_32_green.gif); background-repeat:no-repeat; background-position:center center; }
button.loading.small { background-image:url(../images/loader_16_green.gif); }
button.loading .label { visibility:hidden; }

input[type=password],
input[type=text],
input[type=email],
textarea { width:calc(100% - 22px); height:25px; padding:5px 10px; border:none; background-color:#fff; color:#3f4649; font-family: 'Open Sans', sans-serif; font-size:18px; outline:none; max-width:calc(100% - 22px); margin:5px 0px; border-radius:4px; }

input[type=password].big,
input[type=text].big,
input[type=email].big,
textarea.big { width:400px; }

input[type=password].medium,
input[type=text].medium,
input[type=email].medium,
textarea.medium { width:300px; }

input[type=password].small,
input[type=text].small,
input[type=email].small,
textarea.small { width:200px; }

input[type=password].tiny,
input[type=text].tiny,
input[type=email].tiny,
textarea.tiny { width:60px; }

textarea { width:300px; height:150px; }

button { height:auto; padding:5px; background-color:#22a86c; border:none; color:#fff; font-family: 'Open Sans', sans-serif; font-size:16px; font-weight:600; cursor:pointer; }


.dark { background-color:#2d2f31; border-radius:4px; padding:20px; width:calc(100% - 40px);  }
.dark h1 { margin-top:0px; }

/* formularstile */
/* dark/green style */
form.dark { max-width:400px; }

form.dark label { display:block; padding:5px 0px; }

form.dark input[type=text],
form.dark input[type=password] { height:25px; line-height:25px; padding:5px 10px; vertical-align:middle; background-color:#333537; border:1px solid #28634b; border-radius:4px; color:#767676; margin-bottom:15px; }

form.dark input[type=text]:focus,
form.dark input[type=password]:focus { border-color:#22a86c; }

form.dark input[type=text].error,
form.dark input[type=password].error { border-color:#af4f38; /*#c84a2a;*/ }

form.dark input[type=text].error:focus,
form.dark input[type=password].error:focus { border-color:#ff3300; }

form.dark button { padding:5px 10px; border-radius:4px; font-size:14px; }

form.dark p.error,
form.dark p.success,
form.dark p.info { margin-top:0px; }

form .right { text-align:right; margin:0px; padding:0px; }

form p.message { display:none; }

/* avatare */
.avatar {  }
.avatar.big { width:220px; height:220px; border-radius:110px; }
.avatar.small { width:60px; height:60px; border-radius:30px; }

/* emoticons */
.karikatur { border-radius: 50%; }

/* dropdown */
.dropdown { width:180px; background-color:#2d2f31; border-radius:4px; position:absolute; top:60px; right:10px; display:none; }
.dropdown .arrow { border:8px solid transparent; border-bottom-color:#2d2f31; position:absolute; top:-14px; right:15px; }
.dropdown ul { margin:5px 0px; padding:0px; list-style:none; }
.dropdown ul li { border-left:3px solid #2d2f31; font-size:12px; padding-left:4px; min-height:35px; line-height:35px; vertical-align:middle; cursor:pointer; overflow:hidden; }
.dropdown ul li:hover { border-left:3px solid #22a86c; background-color:#2b473d; }

.dropdown ul li.info { color:#666; text-align:center; font-style:italic; border:none; }
.dropdown ul li.info:hover { border:none; background-color:#2d2f31; }

.dropdown ul li a { text-decoration:none; display:block; line-height:inherit; }
.dropdown .more { text-align:center; margin:0px; padding:0px 0px 5px 0px; color:#666; font-size:10px; line-height:14px; }

.dropdown ul li .icon { width:16px; height:16px; display:inline-block; vertical-align:middle; margin-top:-5px; margin-right:10px; background-position:-16px 0px; }
.dropdown ul li:hover .icon { background-position:0px 0px; }
.dropdown ul li .setting { background-image:url(../images/icons/Einstellungen.png); }
.dropdown ul li .profile { background-image:url(../images/icons/Profil.png); }
.dropdown ul li .help { background-image:url(../images/icons/Hilfe.png); }
.dropdown ul li .logout { background-image:url(../images/icons/Logout.png); }

#NotificationsDropdown .arrow { right:51px; }
#NotificationsDropdown ul li { line-height:16px; }
#SettingsDropdown .arrow { right:5px; }

/* header */
header { position:relative; width:100%; height:50px; background-color:#2d2f31; z-index:9990; line-height:50px; }
/*header .logo { margin:0px; height:50px; width:50px; font-size:30px; line-height:50px; vertical-align:middle; text-align:center; float:left; color:#22a86c; font-weight:700; }
header .logo:hover { text-decoration:none; }*/
header .menu-button { position:relative; width:24px; height:24px; background-image:url(/images/menu.png); cursor:pointer; display:none; }
header .menu { padding:0px; margin:0px; list-style:none; }
header .menu > li { height:46px; width:120px; float:left; text-align:center; line-height:46px; vertical-align:middle; font-size:14px; color:#fff; border-top:4px solid #2d2f31; cursor:pointer; font-weight:400; }
header .menu > li a { text-decoration:none; color:inherit; outline:none; display:block; height:46px; }
header .menu > li:hover { background-color:#2c3835; border-top:4px solid #2c3835; }
header .menu > li.no-link:hover { background-color:transparent; }
header .menu > li.active { border-top:4px solid #23a86d; background-color:#2c3835; color:#23a86d; }
header .account { height:40px; margin:5px 10px; float:right; line-height:40px; vertical-align:middle; font-size:16px; font-weight:600; }
header .account .username { display:inline-block; vertical-align:middle; float:left; }
header .account .avatarwrap { width:40px; height:40px; display:inline-block; position:relative; margin-left:15px; vertical-align:middle; float:left; cursor:pointer; }
header .account .avatarwrap .avatar.small { width:40px; height:40px; border-radius:20px; }
header .account .avatarwrap .notifications { position:absolute; top:26px; left:26px; width:14px; height:14px; line-height:14px; font-size:10px; border-radius:9px; border:2px solid #2d2f31; background-color:#dc513a; text-align:center; padding:0px; }
header .account .settings { width:24px; height:40px; display:inline-block; vertical-align:middle; margin-left:15px; float:left; cursor:pointer; background-image:url(../images/icons/Settings.png); background-repeat:no-repeat; background-position:center center; }

header .menu > li.no-link .info { background-color:#2d2f31 !important; display:none; position: absolute; top:50px; padding: 15px; }
header .menu > li.no-link:hover .info { display:block; }
header .menu > li.no-link .info > ul { list-style: none; padding: 0px; margin:0px; text-align: left; }
header .menu > li.no-link .info > ul > li { line-height: normal; margin-bottom: 10px; }

/* sections */
section,aside { float:left; min-height:100px; margin-top:10px; }
section.middle { width:calc(100% - 280px); min-width:530px; margin-left:10px; margin-right:10px; }
aside.right { width:250px; margin-right:10px; }
section.full { width:calc(100% - 20px); margin:10px; min-width:300px; }

/* login */
.login { width:240px; margin:auto; text-align:center; background-color:#2d2f31; padding:30px 15px; border-radius:20px; margin-top:30px; }
.login .heading { margin:-15px 0px 10px 10px; text-align:left; }
.login .avatar.big { width:120px; height:120px; border-radius:60px; margin-bottom:20px; }
.login.prefilled .avatar.big { margin-bottom:0px; }
.login p.username { font-size:14px; font-weight:700; }
.login input.username,
.login input.password { background-color:#424242; color:#fff; border-radius:5px 5px 0px 0px; margin:0px; width:200px; }
.login input.password { border-radius:0px; border-top:1px solid #2d2f31; }
.login.prefilled input.password { border-radius:5px 5px 0px 0px; border-top:none; }
.login button { width:220px; border-radius:0px 0px 5px 5px; border-top:1px solid #2d2f31; }

/* Profil */

.Profil { max-width:400px; text-align:center; margin-top:110px; }
.Profil .avatar { margin-top:-110px; margin-bottom:20px; }

/* responsive */
@media (max-width:999px){
	section { float:none; min-height:0px; width:calc(100% - 20px) !important; min-width:300px !important; margin:10px!important; }
}

@media (max-width:599px){
	header .menu-button { display:inline-block; margin:13px; }
	header .navigation { display:inline-block; }
	header .menu { position:absolute; top:50px; left:0px; right:0px; padding:15px 0px; background-color:#2d2f31; display:none; }
	header .menu li { float:none; width:calc(100% - 4px); border-top:none; border-left:4px solid #2d2f31; }
	header .menu li:hover { background-color:#2c3835; border-top:none; border-left:4px solid #2c3835; }
	header .menu li.active { border-top:none; border-left:4px solid #23a86d; }
}