.hidden {display:none;visibility:hidden;}
@media (max-width:1024px) {
body {font-size: 13px;}
.dropdown-menu a {padding: 5px 10px;}
.container {padding: 5px 20px;}

.dashboardStart #metro{margin-top:85px;}

.form-horizontal .control-label {width: 120px;}
.form-horizontal .controls {margin-left: 130px;}
.form-horizontal .form-actions {padding-left: 130px;}
}

@media (max-width:840px) {
.container {width:auto;padding:0 20px;}

.row-fluid {width:100%;}
.row {margin-left:0;}
.row>[class*="span"], .row-fluid>[class*="span"] {float:none;display:block;width:auto;margin:0;}

.mnav {min-width: 0;}
.mnav .dropdown-menu {right: auto;width: auto; left: auto;}

.dashboardStart #metro{margin-top:0;}
.dashboardStart #metro{margin-top:0;}
.dashboardStart #metro,
.dashboardOverview #metro,
.dashboardDetail #metro {height: auto !important;}
.dashboardStart #metro [class*="item"],
.dashboardOverview #metro [class*="item"],
.dashboardDetail #metro [class*="item"] {position: static !important; -moz-transform: none !important; -webkit-transform: none !important; min-height: 130px; height: auto; overflow: visible;}
.dashboardStart #metro [class*="item"] {width: 45.5%;}
.dashboardOverview #metro [class*="item"] {width: 20.8%;}
.dashboardDetail #metro [class*="item"] {width: 96%;}
#metro [class*="item"] a.detail {min-height: 130px;}
}

@media (min-width:768px) and (max-width:979px) {
}

@media (width:768px) {
#header .span2 {width: 20%; float: left;}
#header .span6 {width: 80%; float: left; padding-top: 4px;}
#header .span4 {clear: both; padding-top: 5px;}
#header .form-search {margin-left: 10px;}
.hnav > li > a {font-size: 15px;}
}

@media (max-width:660px) {
h1 {font-size: 24px; line-height: 30px;}
.container {padding: 0 2%;}
.nav-tabs > li > a, .nav-pills > li > a {padding-left: 0;}
.logo img {margin: 5px 5px 0 0;}

.hnav {margin:5px 0 10px 0;border-top:2px solid #666;border-bottom:2px solid #666;margin-bottom:10px;}
.hnav li {width: 100%;}
.hnav > li > a {margin:0;padding: 10px;}
.hnav li:hover .dropdown-menu {display: none;} /* hnav ausblenden beim hover */
.hnav .dropdown-menu {margin-left: 0 !important;width:99% !important;}
.hnav .dropdown-menu ul {width: 50%;}

.mnav {float: none !important;}

#metro [class*="item"] {position: static !important; -moz-transform: none !important; -webkit-transform: none !important; min-height: 130px; height: auto; overflow: visible;}
#metro [class*="item"] a.detail {min-height: 130px;}
.dashboardStart #metro [class*="item"] {width: 44%;}

.dashboardOverview h1 {padding-left: 0;}
.dashboardOverview #metro {height: auto !important;}
.dashboardOverview #metro [class*="item"] {width: 28%;}

.dashboardDetail #metro [class*="item"] {width: 92%;}

#metro .item .name {font-size: 17px;}
#metro .item .name small {font-size: 13px;}

input[class*="span"], select[class*="span"], textarea[class*="span"], .uneditable-input {display:block;width:100%;min-height:28px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}
.input-prepend input[class*="span"], .input-append input[class*="span"] {width:auto;}
input[type="checkbox"], input[type="radio"] {border:1px solid #ccc;}
.form-horizontal .control-group>label, .form-horizontal .control-group>.control-label {float:none;width:auto;padding-top:0;text-align:left;}
.form-horizontal .controls {margin-left:0;}
.form-horizontal .control-list {padding-top:0;}
.form-horizontal .form-actions {padding-left:10px;padding-right:10px;}

.ui-dialog {width: 100% !important; padding: 0;}
.ui-dialog .ui-dialog-titlebar,.ui-dialog .ui-dialog-content {padding: 10px 5px;}
}

@media (max-width:480px) {
body, input, textarea, select, .uneditable-input {font-size: 15px;}
body,  input, textarea, select, .uneditable-input, li, .table th, .table td {line-height: 24px;}
.ui-button-text-only .ui-button-text {padding: 0.2em 0.8em;}

.dashboardStart #metro [class*="item"] {width: 92%;}
.dashboardOverview #metro [class*="item"] {width: 180px;}

.steps {height: auto; margin: 10px 0;}
.steps span, .steps a {padding-right: 1em;}
}

@media (max-width:320px) {
#metro [class*="item"] {margin: 0 0 5px 0 !important; width: 93% !important;}
#metro .item .name {font-size: 18px;}

.steps .step {padding: 0.1em 0.6em;}
.steps li {float: none;}
}