File: D:/HostingSpaces/SBogers10/komma-mediadesign.nl/wwwroot/beheer/css/style.css
/*
Style.css // Stylesheet
*/
/*
GLOBAL STYLES
*/
/* Global */
html{ height: 100%; }
body{ overflow-y: scroll; margin: 0; height: 100%; background: #fff; color: #666;
font-family: 'Open Sans', helvetica, sans-serif; font-size: 11px; line-height: 20px; }
h1{ margin: 0 0 30px 0; font-size: 1.818181818em; line-height: 1em; color: #007fcc; }
hr{ display: block; margin: 0 0 30px 0; height: 1px; border: none; background: #ebebeb; }
hr.alt{ margin: 0 0 20px 0; height: 1px; border: none; }
p{ margin: 0 0 20px 0; color: #808080; font-size: 1.181818182em; }
strong{ color: #333; }
a{ text-decoration: none; color: #007fcc; }
a:hover{ text-decoration: underline; }
img{ border: none; }
.clear{ clear: both; }
/* Structure */
header{ display: block; position: relative; z-index: 1000; width: 100%; height: 80px; background: #007fcc;}
aside{ float: left; display: block; position: relative; box-sizing: border-box;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; padding: 60px 20px 0 20px;
width: 180px; min-height: 600px; background: #fafafa; }
#wrapper{ float: left; margin-left: 60px; margin-top: 40px; width: 800px; }
footer{ display: block; position: relative; z-index: 1000; width: 100%; height: 100px; background: #007fcc; color: #fff;}
article{ display: block; margin: 40px 0; }
/* Selection */
::selection { background:#007fcc; color:#fff;}
::-moz-selection { background:#007fcc; color:#fff;}
::-webkit-selection { background:#007fcc; color:#fff;}
/* Header */
#komma-logo{ position: absolute; top: 22px; left: 30px; width: 143px; height: 30px; }
#komma-logo img{ width: 100%; }
header .shadow{ position: absolute; bottom: -10px; width: 100%; height: 10px; background: url( '../images/structure/header-shadow.png' ) repeat-x; }
/* Aside */
aside .shadow{ position: absolute; top: 0; right: 0; width: 10px; height: 100%; background: url( '../images/structure/aside-shadow.png' ) repeat-y; }
aside section.welcome{ display: block; margin-bottom: 50px; color: #999; font-size: 1.181818182em; }
aside .user-label{ color: #666; }
aside h2{ margin: 0 0 10px 0; font-size: 1.272727273em; font-weight: 400; color: #b3b3b3;}
aside ul{ margin: 0 0 20px 0; padding: 0; }
aside ul li{ list-style: none; margin-left: 10px; font-size: 13px; line-height: 30px; }
aside hr{ margin-bottom: 20px; }
aside a{ color: #666; text-decoration: none; }
aside a:hover{ color: #007fcc; }
aside ul li.active a{ color: #007fcc; font-weight: 700; }
/* Footer */
footer .shadow{ position: absolute; width: 100%; height: 10px; background: url( '../images/structure/header-shadow.png' ) repeat-x; }
footer ul{ position: absolute; top: 40px; left: 30px; margin: 0; padding: 0; list-style: none; }
footer ul li{ display: block; float: left; margin-right: 40px; text-transform: uppercase; }
footer ul li a{ color: #7EBED5; }
footer ul li a:hover{ color: #fff; text-decoration: none;}
/* form */
input{ display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; padding: 10px; margin-bottom: 20px;
width: 100%; height: 30px; border: 1px solid #d9d9d9;}
form .label{ display: block; margin-left: 10px; margin-bottom: 10px; height: 10px; font-size: 1.181818182em; font-weight: 700; }
input[type="submit"],input[type="button"]{ float: left; margin-right: 10px; padding: 7px 10px 8px 10px; width: 150px;
box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
color: #fff; font-size: 1.090909091em; font-weight: 700; text-transform: uppercase;
cursor: pointer;}
input.logout{ position: absolute; right: 0; margin: 0; width: 120px; height: 80px; background: #007fcc; border: none; color: #fff; font-weight: 700; text-transform: uppercase;
cursor: pointer; }
input.logout:hover{ text-decoration: underline; }
a.btn{ display: block; float: left; margin: 0 10px 30px 0; padding: 9px 10px 8px 10px; width: 150px; height: 30px;box-sizing: border-box; -moz-box-sizing: border-box; - webkit-box-sizing: border-box; color: #fff; font-size: 1.090909091em;
font-weight: 700; text-transform: uppercase; text-align: center; line-height: 1em; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none;
-khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
a.btn:hover{ text-decoration: none;}
.rounded{ border-radius:4px; -moz-border-radius:4px; }
a.btn.blue, input[type="submit"].blue, input[type="button"].blue{ background: #007fcc; border: 1px solid #0075af; }
a.btn.gray, input[type="submit"].gray, input[type="button"].gray{ background: #b3b3b3; border: 1px solid #999; }
input[type="checkbox"]{ display: inline; margin: 0; padding: 0; width: 1em; height: 1em; }
/* alerts */
#alerts-holder{ position:fixed; top: 100px; right: 30px; z-index: 9999; width: 310px;}
.alert{ margin-bottom: 20px; padding: 28px; width: 250px; min-height: 60px;
color: #fff; opacity: 0; filter: alpha(opacity=0); }
.alert.error{ background: #ff5a5a; border: 2px solid #bf0000; }
.alert.warning{ background: #ffb400; border: 2px solid #ff8400; }
.alert.succes{ background: #00d84d; border: 2px solid #2ebf5b; }
.alert h1{ font-size: 1em; margin: 0 0 10px 0; color: #fff; }
.alert ul{ margin: 0; padding: 0; width: 250px; }
.alert ul li{ list-style: none; }
/*
PAGE SPECIFIC STYLES
*/
/* Login */
body.mo-login #wrapper{ position: absolute; left: 50%; top: 200px; margin-left: -155px; width: 310px; }
body.mo-login footer{ position: absolute; bottom: 0;}
/* MO-Contact */
.c-indication{ display: inline-block; width: 30px; color: #0E61DB; font-size: 0.8em; font-weight: 700;}
/* Multipage */
#wrapper ul{ margin: 0; padding: 0; }
#wrapper ul li{ display: block; height: 40px; list-style: none; }
#wrapper ul li.alt{ background: #f2f2f2; }
#wrapper ul li.sel{ background: #007fcc; color: #fff;}
#wrapper ul li.sel.alt{ background: #0075af; }
ul.mp-list{ margin-bottom: 30px !important; }
ul.mp-list .col{ float: left; position: relative; padding-top: 10px; margin-right: 1px; height: 24px;font-size: 1.090909091em;}
.heading .col{ background: #fff; color: #007fcc; font-weight: 700; }
.col.title{ padding-left: 10px; width: 309px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none;
-moz-user-select: none; -ms-user-select: none; user-select: none; }
.selectable .col.title{ cursor: pointer; }
.col.added{ padding-left: 10px; width: 149px; }
.col.edit{ float: right !important; padding-left: 10px; padding-right: 9px; width: 270px; }
.col.cb input{ margin: 4px 0 0 10px; width: 10px; height: 10px;}
a.col{ text-decoration: none; cursor: pointer; }
.col .arrow{ }
.col.edit .subcol{ float: left; width: 90px; }
.col.edit .subcol a{ color: #808080; }
.sel .col.edit .subcol a{ color: #fff; }
.publish{ color: #007fcc; font-weight: bold; }
.page-nav{ display: block; margin-top: 40px; width: 100%; color: #808080; text-align: center; font-size: 14px; font-weight: 700;
font-variant: small-caps; text-transform: lowercase; }
.page-nav .page-count{ font-size: 12px; font-weight: 400; }
.page-nav .next, .page-nav .prev{ text-decoration: none; color: #808080; cursor: pointer;}
.page-nav .next:hover, .page-nav .prev:hover{ color: #007fcc; }
.page-nav .next.disabled, .page-nav .prev.disabled{ text-decoration: none; color: #b3b3b3; cursor: default;}
.page-nav .next.disabled:hover, .page-nav .prev.disabled:hover{ color: #b3b3b3; }
hr.vr{ position: relative; top: 10px;display: inline-block; margin: 0 20px; width: 1px; height: 30px; border: none; background: #ebebeb; }
/* Multipage || Add */
form .left-col{ position: relative; top: -1px; padding: 30px 89px 10px 0; width: 310px; float: left; border-right: 1px solid #ebebeb; }
form .right-col{ position: relative; top: -1px; padding: 30px 0 30px 90px; width: 310px; float: left; }
hr.shift-up{ position: relative; top: -2px; }
h2.shift-right{ margin-left: 10px; }
form h2{ margin-top: 0; }
.loading-holder{ margin: 0 0 20px 0; width: 300px; height: 10px; color: #808080;line-height: 1em; }
#loader{ display: none; }
.crop-choice{ margin: 0 0 10px 0; width: 300px; height: 10px; color: #808080;line-height: 1em; }
.jcrop-holder{ display: block;margin: 0 0 20px 0; }
.image-container{ float: left; margin: 0 20px 20px 0; width: 60px; height: 80px !important; }
.image-container .holder{ overflow: hidden; width: 58px; height: 58px; border: 1px solid #F2F2F2; }
.image-container .remove{ margin: 10px 0 0 0; width: 60px; height: 10px; text-align: center; }
/* Mulipage || Order */
#sortable-list{ padding:0; }
#sortable-list li{ margin: 0 0 10px 0; padding: 5px 10px; width: 380px; height: 20px !important;
background: #fff; color: #333; list-style: none; cursor: move; border: 1px solid #f2f2f2; }
#sortable-list li.thumb{ float: left; margin: 0 20px 20px 0; padding: 0 ;width: 60px; height: 60px !important; list-style: none; cursor: move; border: 1px solid #f2f2f2;}
/*
MEDIA QUERIES
*/
@media all and (max-width: 1100px){
body{ width: 1100px; }
#wrapper{ margin-left: 20px; }
}
@media all and (min-width: 1101px){
aside{ width: 16.363636364%; }
#wrapper{ margin-left: 5.454545455%; width: 72.727272727%; }
}
/*
OVERRIDES
*/
.hidden{ display: none !important; }
.no-margin{ margin: 0 !important; }
.no-margin-right{ margin-right: 0 !important; }
.low-margin-bottom{ margin-bottom: 10px !important; }