/* global
============= */

html {
  overflow-y: scroll;
}
body {
  background: url(../img/bcg.png);
  min-width: 1200px;
}
#window {
  background: url(../img/bcg_gradient.png) repeat-x top;
}



/* topBar
============= */

#topBar {
  height: 32px;
  line-height: 30px;
  background: #eeeeee url("../img/top_bar.png") repeat-x;
  font-family: 'Ubuntu', sans-serif;
  color: #3f3f3f;
  font-size: 0.875em;
}
#topBar a {
  color: #3f3f3f;
}
a#btnUsername, a#btnLogout {
  color:#ef7e22;
}
#topBar .separator {
  padding: 0 6px;
}
#btnMessages .size {
  color: #fcfcfc;
  display: inline-block;
  width: 32px;
  height: 15px;
  line-height: 15px;
  border-radius: 3px;
  margin: 0 4px 0 14px;
  background: #ed8939;
  background: -moz-linear-gradient(top,  #ed8939 0%, #de7a28 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ed8939), color-stop(100%,#de7a28));
  background: linear-gradient(to bottom,  #ed8939 0%,#de7a28 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8939', endColorstr='#de7a28',GradientType=0 );
}



/* header
============= */

#header {
  height: 123px;
}
#logo {
  width: 270px;
  height: 90px;
  position: relative;
  top: 16px;
}
#mainMenu {
  float: right;
  position: relative;
  top: 30px;
  list-style: none;
}
#mainMenu li {
  float: left;
  margin: 0 3px 0 21px;
}
#mainMenu li a {
  display: block;
  width: 68px;
  height: 73px;
  overflow: hidden;
  background-image: url("../img/icon_mainmenu.png");
  text-align: center;
}
#mainMenu li a span {
  font-size: 0.785em;
  font-family: 'Terminal Dosis', sans-serif;
  color: #656565;
  text-transform: uppercase;
  position: relative;
  top:46px;
  white-space: nowrap;
}
#mainMenu li a:hover {
  text-decoration: none;
}

/* submenu
============= */

#subMenu {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 0;
  padding-bottom: 38px;
  background: url('../img/submenu_li.png') repeat-y;
}

#subMenu > li > a,#subMenu li div.a {
  width: 220px;
  height: 38px;
  margin-top: 2px;
  display: block;
  position: relative;
  line-height: 40px;
  padding-left: 50px;
  color: #888888;
  text-transform: uppercase;
  font-family: 'Terminal Dosis', sans-serif;
  font-size: 13px;
  cursor: pointer;
}
#subMenu li.active > a {
  color: #ee5011;
}
#subMenu li > a:hover {
}
#subMenu > li > a > .vIco, #subMenu > li > div.a > .vIco {
  position: absolute;
  left: 16px;
  top: 8px;
  filter: alpha(opacity=30);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  opacity: 0.3;
  -moz-opacity: 0.3;
}
#subMenu li.active .vIco {
  filter: alpha(opacity=100);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  opacity: 1;
  -moz-opacity: 1;
}

#submenuHeader {
  height: 90px;
  position: relative;
}

#subMenu li .dropdown:hover ul {
  display: block;
  z-index: 8;
  top:35px;
  right: auto;
  left: 43px;
  padding: 4px 14px;
}
#subMenu li .dropdown > .title {
  position: absolute;
  height: 30px;
  line-height: 30px;
  top:5px;
  left: 43px;
  padding: 0 8px;
  border: 1px solid transparent;
}
#subMenu li .dropdown:hover > .title {
  border: 1px solid #b2b2b2;
  border-bottom: transparent;
  background: #fff;
  z-index: 9;
}



/* footer
============= */

#footer {
  font-size: 11px;
  margin: 2px 0 32px 0;
}


/* content
============= */

#content > .container {
  border:1px solid #b7b7b7;
  background: #ffffff;
  border-radius: 4px;
  min-height: 650px;
}

#content > .container.withSubmenu{
  background: #ffffff url('../img/submenu.png') repeat-y;
}
#content > .container > .row > .span9 {
  padding-top: 20px;
}

#content h1 {
  display: block;
  height: 70px;
  font-size: 24px;
  font-family: 'Ubuntu', sans-serif;
  color: #555555;
  font-weight: 300;
  line-height: 80px;
  padding: 0;
  margin: 0;
}

#content .subHeader {
  height: 32px;
}

#content .breadcrumbs {
  line-height: 32px;
  color: #c1c1c1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#content .breadcrumbs a {
  color: #c1c1c1;
  font-size: 14px;
  font-family: 'Ubuntu', sans-serif;
  text-transform: uppercase;
}
#content .breadcrumbs a.current {
  color: #828282;
}

/* notifications
============= */

.notification {
  position: relative;
  width: 840px;
  height: 60px;
  border-radius: 6px;
  border-style: solid;
  border-width: 1px;
  font-family: 'Ubuntu', sans-serif;
  font-size: 14px;
  background: url('../img/notifications.png') repeat-x;
  overflow: hidden;
  margin-bottom: 10px;
}
.notification .icon {
  position: absolute;
  width: 48px;
  height: 60px;
  display: block;
  background: url('../img/spritesheet.png') no-repeat -0px -326px;
  top: 0px;
  left: 12px;
}
.notification.error .icon {
  background-position: -206px -326px;
}
.notification.warning .icon {
  background-position: -62px -326px;
}
.notification.info .icon {
  background-position: -157px -326px;
}
.notification.tip .icon {
  background-position: -12px -326px;
}
.notification.success .icon {
  background-position: -108px -326px;
}
.notification .message {
  position: absolute;
  top: 20px;
  left:70px;
}
.notification .title {
  font-weight: bold;
  padding: 0px 4px;
}
.notification .toggle {
  cursor: pointer;
  position: absolute;
  top: 0px;
  right:0px;
  width: 26px;
  text-align: center;
  line-height: 26px;
  font-weight: bold;
  font-size: 18px;
  filter: alpha(opacity=50);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity: 0.5;
  -moz-opacity: 0.5;
  text-shadow:none;
}
.notification .toggle:hover {
  filter: alpha(opacity=80);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  opacity: 0.8;
  -moz-opacity: 0.8;
}

.notification.error {
  border-color: #b03630;
  color: #fff;
  text-shadow: -1px -1px 0px #000;
  background-position: -0px -0px;
}
.notification.info {
  border-color: #369dbb;
  color: #fff;
  text-shadow: -1px -1px 0px #000;
  background-position: -0px -60px;
}
.notification.tip {
  border-color: #dbcfa1;
  color: #555;
  text-shadow: -1px -1px 0px #fff;
  background-position: -0px -120px;
}
.notification.warning {
  border-color: #dbcfa1;
  color: #555;
  text-shadow: -1px -1px 0px #fff;
  background-position: -0px -180px;
}
.notification.success {
  border-color: #45a645;
  color: #fff;
  background-position: -0px -240px;
}

/* FEEDBACK */
#btnFeedbackShow {
  width: 35px;
  height: 130px;
  background: url(../img/btn_feedback.png) no-repeat;
  cursor: pointer;
  position: fixed;
  left: -4px;
  top: 50%;
  margin-top: -65px;
  opacity: 0.5;
  transition: left 0.2s, opacity 0.2s;
  -webkit-transition: left 0.2s, opacity 0.2s;
}
#btnFeedbackShow:hover {
  left: 0px;
  opacity: 1;
}

.vFeedbackWindow {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 9100;
  top: 0;
  left: 0;
  font-family: 'Open Sans', sans-serif;
}

.vFeedbackWindow > .window {
  position: relative;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #5f5f5f;
  border-radius: 6px;
  padding: 30px 50px 20px 50px;
  width: 600px;
}

.vFeedbackWindow h1 {
  color: #e65400;
  padding: 0;
  padding-left: 40px;
  background: url(../img/feedback_icon.png) no-repeat;
  display: block;
  height: 50px;
  font-size: 30px;
  font-weight: 400;
  line-height: 26px;
  margin: 0;
}

.vFeedbackWindow .form-row {
  margin-top: 10px;
}

.vFeedbackWindow .form-row label {
  line-height: 28px;
}

.vFeedbackWindow .vdw-controls {
  padding-top: 20px;
}

.vFeedbackWindow .form-row input,
.vFeedbackWindow .form-row textarea,
.vFeedbackWindow .form-row select,
.vFeedbackWindow .form-row .selectbox .value {
  width: 95%;
  display: block;
}

.vFeedbackWindow .form-row.error textarea {
  border-color: #b03630;
}

.vFeedbackSuccessAlert {
  position: absolute;
  left: 50%;
  margin-left: -150px;
  background: #ffffff;
  border: 1px solid #5f5f5f;
  border-radius: 6px;
  padding: 30px 50px 20px 50px;
  width: 300px;
}

.vFeedbackSuccessAlert .toggle {
  cursor: pointer;
  position: absolute;
  top: 0px;
  right: 0px;
  width: 26px;
  text-align: center;
  line-height: 26px;
  font-weight: bold;
  font-size: 18px;
  filter: alpha(opacity=50);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity: 0.5;
  -moz-opacity: 0.5;
  text-shadow: none;
}