/*

    CSS Komma Management System 2.0

*/

/* Elements */
body{ overflow-y: scroll; margin: 0; background: #D8DAE2; font-family: 'Lato', sans-serif; font-size: 14px; line-height: 1.5; }
h1{ margin: 0 0 1em 0; font-weight: 400; font-size: 1.285714286em; line-height: 1.111111111em; }
a{ text-decoration: none; }
a:hover{ text-decoration: underline; }

/* Global */
.clear{ display: block; clear: both; }
.header{ width: 100%; background: #1C80D9; }
.logo{ width: 60px; height: 60px; background: url('../images/structure/kms_sprite.png') -10px -10px; }
.bb{ box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }

/* Buttons */
.btn{ position: relative; height: 40px; line-height: 40px; color: #ffffff; font-weight: 700; box-sizing: border-box; -moz-box-sizing: border-box; cursor: pointer; }
.btn span{ display: block; }
.btn .up{ padding: 0 10px; width: 100%; height: 40px; box-sizing: border-box; -moz-box-sizing: border-box; }
.btn .left, .btn .right{ position: absolute; top:0; width: 10px; height: 40px; background: url('../images/structure/kms_sprite.png'); }
.btn .left{ left: 0; }
.btn .center{ float: left; width: 100%; height: 40px; }
.btn .right{  right:0; }
.btn .up .left{ background-position: -10px -130px; }
.btn .up .center{ background: #1C80D9; }
.btn .up .right{ background-position: -30px -130px; }
.btn .hover{ position: absolute; z-index: 5; padding: 0 10px; width: 100%; height: 40px; opacity: 0; filter: alpha(opacity=0); box-sizing: border-box; -moz-box-sizing: border-box;  }
.btn .hover .left{ background-position: -10px -180px; }
.btn .hover .center{ background: #17ACFF; }
.btn .hover .right{  background-position: -30px -180px; }
.btn input{ position: absolute; left: 0; top: 0; z-index: 10; margin: 0; padding: 0; width: 100%; height: 40px; background: none; border: none; color: #ffffff; font-size: 1em; font-weight: 700; line-height: 40px; cursor: pointer; }

/* Login */
#login .container{ position: absolute; top: 20%; left: 50%; width: 300px; margin-left: -150px; }
#login .header{ width: 60px; padding: 20px 120px; }
#login .content{ padding: 20px 30px; width: 240px; color: #ffffff; background: #32343A; }
#login .text_field.last{ margin-bottom: 20px; }
.forgot_pass_holder{ margin-top: 30px; }
.forgot_pass{ font-size: .928571429em; color: #6A7372; }
.recover_pass{ font-size: .928571429em; color: #E0E6EC; }
#login .footer{ margin-top: 5px; color: #9EA4A5; font-size: .928571429em; }
#login .footer a{ color: #9EA4A5; font-size: .928571429em; }

/* Form */
form h1{ margin-left: 10px; }
.text_field{ padding: 0 10px; margin: 0 0 10px 0; width: 100%; height: 40px; border: 1px solid #E0E6EC; background: #ffffff; color: #6A7372;  line-height: 40px; box-sizing: border-box; -moz-box-sizing: border-box;  }

/* Alert */
.alert_mask{ display: none; overflow: hidden; position: absolute; left: 0; top: -80px; }
.alert{ position: relative; padding: 15px; width: 270px; line-height: 1.2 }
.alert .icon{ position: relative; float: left; margin-right: 15px; width: 40px; height: 30px;  }
.alert .text_holder{ position: relative; top: -3px; left: 0; float: left; width: 215px; }
.alert .arrow{ position: absolute; left: 50%; bottom: -10px; margin-left: -7.5px; width: 15px; height: 10px;  }
.alert.error{ background: #F72B3F; color: #ffffff; }
.alert.error .icon{ background: url('../images/structure/kms_sprite.png') -10px -80px; }
.alert.error .arrow{ background: url('../images/structure/kms_sprite.png') -60px -100px;  }

/* Aside */
#aside{ position: relative; float: left; margin-right: 10px; width: 300px; background: #32343A; }
#aside .header{ display: block; padding: 10px 20px 30px 20px; width: 260px; text-align: center; color: #ffffff; font-weight: 700; }
#aside .header:hover{ text-decoration: none; }
#aside .logo{ display: block; margin: 20px 100px; }
#aside .search_holder{ margin: 25px 15px 35px 15px; width: 270px; height: 30px; background: #ffffff; }
#aside .title{ display: block; margin: 0 30px 1em 30px; color: #1C80D9; font-size: 1.428571429em; font-weight: 300; line-height: 1;}
#aside .main_menu{ margin: 0; padding: 0; list-style: none;}
#aside .main_menu a{ display: block; position: relative; padding: 0 30px; color: #D5D5D6; font-size: .928571429em; text-transform: uppercase; line-height: 3.076923077;  }
#aside .main_menu a:hover{ background: #1C80D9; color: #ffffff; text-decoration: none;  }
#aside .main_menu .line{ display: none; }
#aside .main_menu .active a{ background: #242428 url('../images/structure/kms_sprite.png') -80px -10px; color: #ffffff; }
#aside .main_menu .active .line{ display: block; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: #1C80D9;}
#aside .hr{ margin: 20px 0; width: 100%; height: 1px; border-bottom: 1px solid #242428; background: #55585E; }
#aside .footer{ position: absolute; bottom: 0; left: 0; margin-top: 40px; padding: 30px; width: 240px; background: #242428; }
#aside .signed_in_as{ color: #A5A5A6; }
#aside .user{ color: #ffffff; font-weight: 700;}
#aside .sign_out{ color: #1C80D9; }

/* Items */
#items{ position: relative; float: left; margin-right: 10px; width: 390px; }
#items .header{ padding: 0 20px; width: 100%; height: 2.857142857em; background: #1C80D9; color: #ffffff; font-size: .928571429em; font-weight: 700; text-transform: uppercase;  line-height: 2.857142857; }
#items ul{ margin: 0; padding: 0; list-style: none; }
#items ul li{ width: 100%; height: 100px; background: #ffffff; }
#items ul li.alt{ background: #F4F5F7; }
#items .new_item{ display: block; width: 390px; height: 100px; background: #ffffff; color: #1C80D9; }
#items .new_item .inner{ display: block; margin: 3px; padding: 0 20px; width: 342px; height: 92px; border: 1px dashed #88C0E8; line-height: 6.857142857; }

/* Form */
#form{ position: relative; float: left; width: 880px; background: #ffffff; }
#form .header{ padding: 0 20px; width: 100%; height: 2.857142857em; background: #1C80D9; color: #ffffff; font-size: .928571429em; font-weight: 700; text-transform: uppercase;  line-height: 2.857142857; }