/* ==|== reset ======================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
/* remember to define visible focus styles!
:focus{ outline:?????; } */
/* remember to highlight inserts somehow! */
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }

/* Selection colours (easy to forget) */
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }
img::selection { background: transparent; }
img::-moz-selection { background: transparent; }
body { -webkit-tap-highlight-color: rgb(255,255,158); }

/* scrollbar */
/*html{overflow-y: auto;background-color: transparent;}
body{ position:absolute; top:0; left:0; bottom:0; right:0; overflow-y:scroll; overflow-x:hidden; }
::-moz-scrollbar,::-webkit-scrollbar{ width: 10px; height: 10px; }
::-moz-scrollbar-button:start:decrement,::-moz-scrollbar-button:end:increment,
::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment{ height: 30px; display: block; background-color: transparent; }
::-moz-scrollbar-track-piece,::-webkit-scrollbar-track-piece{ background-color: #3b3b3b; -webkit-border-radius: 6px; }
::-moz-scrollbar-thumb:vertical,::-webkit-scrollbar-thumb:vertical{ height: 50px; background-color: #666; border: 1px solid #eee; -webkit-border-radius: 6px; }*/

input,textarea,select{ color:#6D6D6D; font:12px/1 Helvetica Neue, Arial, sans-serif; }
label{ font-weight:bold; width:120px; float:left; }

/* ==|== typography presets ======================================== */
body { color:#3C3C3C; font:12px/1.33 Helvetica Neue, Arial, sans-serif; }
h1{ font-size:22px; }
h2{ font-size:19px; }
h3{ font-size:13px; }
h4{ font-size:15px; font-weight:normal; }
h5{ font-size:10px; font-weight:bold; text-transform:uppercase; }
h6{ font-size:11px; font-weight:bold; }
h1,h2,h3,h4,h5,h6,p{ margin-bottom:8px; }


/* ==|== mixins ======================================== */
.right{float:right;display:inline;}
.left{float:left;display:inline;}
/* video, audio, opacity, no-touch, geolocation, history, rgba, borderradius, boxshadow, csstransitions, fontface, localstorage, applicationcache */
.borderradius .br-lge{ -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; }
.borderradius .br-med{ -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; }
.borderradius .br-sml{ -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; }
.borderradius .br-tl{ -webkit-border-top-left-radius :3px; -moz-border-top-left-radius:3px; border-top-left-radius:3px; }
.borderradius .br-tr{ -webkit-border-top-right-radius :3px; -moz-border-top-right-radius:3px; border-top-right-radius:3px; }
.borderradius .br-bl{ -webkit-border-bottom-left-radius :3px; -moz-border-bottom-left-radius:3px; border-bottom-left-radius:3px; }
.borderradius .br-br{ -webkit-border-bottom-right-radius :3px; -moz-border-bottom-right-radius:3px; border-bottom-right-radius:3px; }
.borderradius .br-left-clr{ border-left:none;
  -webkit-border-top-left-radius:0; -moz-border-top-left-radius:0; border-top-left-radius:0;
  -webkit-border-bottom-left-radius:0; -moz-border-bottom-left-radius:0; border-bottom-left-radius:0; }
.borderradius .br-right-clr{ border-right:none;
  -webkit-border-top-right-radius:0; -moz-border-top-right-radius:0; border-top-right-radius:0;
  -webkit-border-bottom-right-radius:0; -moz-border-bottom-right-radius:0; border-bottom-right-radius:0; }
.borderradius .br-top-clr{ border-top:none;
  -webkit-border-top-left-radius:0; -moz-border-top-left-radius:0; border-top-left-radius:0
  -webkit-border-top-right-radius:0; -moz-border-top-right-radius:0; border-top-right-radius:0; }
.borderradius .br-bottom-clr{ border-bottom:none;
  -webkit-border-bottom-left-radius:0; -moz-border-bottom-left-radius:0; border-bottom-left-radius:0;
  -webkit-border-bottom-right-radius:0; -moz-border-bottom-right-radius:0; border-bottom-right-radius:0; }

.boxshadow .shadow{ -moz-box-shadow:0 2px 10px rgba(0, 0, 0, 0.75); -webkit-box-shadow:0 2px 10px rgba(0, 0, 0, 0.75); -o-box-shadow:0 2px 10px rgba(0, 0, 0, 0.75); box-shadow:0 2px 10px rgba(0, 0, 0, 0.75); }
.btn{ font-weight:bold; color:#eee; text-decoration:none; padding:1px 30px 2px; border:none; cursor:pointer; }
  .btn.subtle{ background:#333; color:#aaa; font-size:10px; padding:1px 10px 3px; text-transform:uppercase; }
  .btn.light{ background:#bbb; color:#eee; font-size:10px; padding:1px 10px 3px; text-transform:uppercase; }
  .btn.light:hover{ background:#999; }
.boxshadow .btn:hover{ -moz-box-shadow:0 0 2px 1px rgba(255, 255, 255, 0.33) inset; -webkit-box-shadow:0 0 2px 1px rgba(255, 255, 255, 0.33) inset; -o-box-shadow:0 0 2px 1px rgba(255, 255, 255, 0.33) inset; box-shadow:0 0 2px 1px rgba(255, 255, 255, 0.33) inset; }
.borderradius btn-sml{ color:#999; background-color:#222; font-size:10px; }

.blue{ background: #65b1cb; /* Old browsers */
  background: -moz-linear-gradient(top, #65b1cb 0%, #3297b9 50%, #5b80ab 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#65b1cb), color-stop(50%,#3297b9), color-stop(100%,#5b80ab)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #65b1cb 0%,#3297b9 50%,#5b80ab 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #65b1cb 0%,#3297b9 50%,#5b80ab 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, #65b1cb 0%,#3297b9 50%,#5b80ab 100%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#65b1cb', endColorstr='#5b80ab',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, #65b1cb 0%,#3297b9 50%,#5b80ab 100%); /* W3C */
}
a.blue:hover,a.blue.active{ background: #5b80ab; /* Old browsers */
  background: -moz-linear-gradient(top, #5b80ab 0%, #3297b9 50%, #65b1cb 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5b80ab), color-stop(50%,#3297b9), color-stop(100%,#65b1cb)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #5b80ab 0%,#3297b9 50%,#65b1cb 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #5b80ab 0%,#3297b9 50%,#65b1cb 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, #5b80ab 0%,#3297b9 50%,#65b1cb 100%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b80ab', endColorstr='#65b1cb',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, #5b80ab 0%,#3297b9 50%,#65b1cb 100%); /* W3C */
}
.grey{ color:#eee; background: #676767; /* Old browsers */
  background: -moz-linear-gradient(top, #676767 0%, #535353 50%, #434343 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#676767), color-stop(50%,#535353), color-stop(100%,#434343)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #676767 0%,#535353 50%,#434343 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #676767 0%,#535353 50%,#434343 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, #676767 0%,#535353 50%,#434343 100%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#676767', endColorstr='#434343',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, #676767 0%,#535353 50%,#434343 100%); /* W3C */
}
a.grey:hover,a.grey.active{ background: #434343; /* Old browsers */
  background: -moz-linear-gradient(top, #434343 0%, #535353 50%, #676767 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#434343), color-stop(50%,#535353), color-stop(100%,#676767)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #434343 0%,#535353 50%,#676767 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #434343 0%,#535353 50%,#676767 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, #434343 0%,#535353 50%,#676767 100%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#434343', endColorstr='#676767',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, #434343 0%,#535353 50%,#676767 100%); /* W3C */
}
.darkgrey{ color:#eee; Background:#333333; /* Old browsers */
  background: -moz-linear-gradient(top, #333333 0%, #222222 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#222222)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #333333 0%,#222222 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #333333 0%,#222222 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, #333333 0%,#222222 100%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#222222',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, #333333 0%,#222222 100%); /* W3C */  
}


/* Generic pane rules */
body { margin: 0; background:#ccc; }
.row, .col { overflow: hidden; position: absolute; }
.row { left: 0; right: 0; }
.col { top: 0; bottom: 0; }

.left { float:left; width: 400px; }
/*.left.col { float:left; width: 400px; }
.right.col { left: 250px; right: 0; }*/

header.row { height:72px; }
header nav.row { top:42px; height:30px; z-index:2; }
.body.row { top:72px; bottom:30px; }
footer.row { height:30px; bottom: 0; line-height:30px; }

.scroll-x { overflow-x: auto; }
.scroll-y { overflow-y: auto; }
.scroll-x, .scroll-y { -webkit-overflow-scrolling: touch; }
/*.scroll-x > div, .scroll-y > div{ background:-webkit-gradient(linear, 0 0, 100% 0, from(#f00), to(#900));
	border:1px solid #800;
	-webkit-background-clip:padding-box;
	-webkit-box-sizing:border-box;
	-webkit-border-radius:4px;
	-webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5); }*/
	
/*
.myScrollbarV {
	position:absolute;
	z-index:100;
	width:8px;bottom:7px;top:2px;right:1px
}

.myScrollbarV > div {
	position:absolute;
	z-index:100;
	width:100%;

	background:-webkit-gradient(linear, 0 0, 100% 0, from(#f00), to(#900));
	border:1px solid #800;
	-webkit-background-clip:padding-box;
	-webkit-box-sizing:border-box;
	-webkit-border-radius:4px;
	-webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
}*/
row ::-webkit-scrollbar,col ::-webkit-scrollbar{width:16px;height:16px}
row ::-webkit-scrollbar-track,col ::-webkit-scrollbar-track,
row ::-webkit-scrollbar-thumb,col ::-webkit-scrollbar-thumb{-webkit-border-image:url(/img/scrollbar.png) 7/7px stretch repeat}


/* ==|== primary styles: Mark van Schaik ======================================== */
/*header{ position:fixed; display:block; top:0; left:0; right:0; }*/
  header .heading{ height:32px; line-height:32px; padding:5px 10px; }
    header .heading .logo{ float:left; background:url('../img/radius.png') no-repeat 0 0; width:128px; height:32px; text-indent:-9999px; }
    header .heading .welcome{ float:right; margin:0 4px; text-decoration:none; color:#eee; font-weight:bold; font-size:11px; color:#ccc; }
    header .heading .userlogon{ float:right; margin:10 4px; text-transform:uppercase; text-decoration:none; color:#eee; font-weight:bold; }
    header .heading h2{ display:block; height:32px; text-align:center; color:#eee; font-weight:normal; font-size:29px; margin:0 200px; }
  header .toolbar{ height:30px; text-align:right; }
    header .toolbar a{ border:none; border-left:1px solid #333; padding:5px 40px; line-height:20px; color:#eee; font-weight:bold; float:right; text-decoration:none; }
    header .toolbar a:hover{ background-color:#444; }
    header .toolbar a.active { background-color:#9B999A; box-shadow:inset 1px 2px 3px #666; }

.login{ margin:100px auto 0; width:420px; border:2px solid #ccc; color:#eee; }
  .btn.subtle{ background:#333; color:#aaa; font-size:11px; padding:3px 10px; }
  .login section > div{ display:none; }
  .login form{ margin:0 0 20px; }


  fieldset{ margin-bottom:5px; }
  .editor-field{ width:340px; }
  .editor-field input,.editor-field textarea{ width:320px; }
  .editor-field input,.editor-field textarea, .editor-field select{ border:none; border-bottom:1px solid #ccc; padding:6px 8px 5px 12px; margin:0; }
  .editor-field select{ border-bottom:1px solid #ccc; padding:3px 3px 3px 10px; margin:0; width:260px; }
  .editor-field textarea{ height:61px; }
  .editor-field.label input{ width:240px; }
  /*.editor-field.time select{ width:84px; }
  .editor-field.time, .editor-field.category, .editor-field.image{ margin:2px 0; }*/
  .editor-field.repeat{ margin:5px 0; }
  .editor-field.repeat label{ width:100px; padding:0; }
  .editor-field label{ width:64px; padding:3px 3px 3px 13px; }
  .editor-field:first-child input{ 
    -webkit-border-top-left-radius :3px; -moz-border-top-left-radius:3px; border-top-left-radius:3px;
    -webkit-border-top-right-radius :3px; -moz-border-top-right-radius:3px; border-top-right-radius:3px; }
  .editor-field:last-child input{ border:none;
    -webkit-border-bottom-left-radius :3px; -moz-border-bottom-left-radius:3px; border-bottom-left-radius:3px;
    -webkit-border-bottom-right-radius :3px; -moz-border-bottom-right-radius:3px; border-bottom-right-radius:3px; }

#createProgram{min-height:235px;}
#editProgram{min-height:360px;}

.field-validation-error, .validation-summary-errors{ font-weight:bold; color:#cc0000; display:block; }
.submit{ margin:5px 0; }

.body{
  background:#ccc;
}
.body section{
  padding:20px 40px;
}
  /*.body section table{ min-height:50px; }
    .body section table th{ padding:3px 5px; font-weight:bold; }
    .body section table td{ padding:2px 5px; border:1px solid  #aaa; }
  */


.login{
  
}

.programeditor{ padding:20px; clear:both; margin:0 0 20px; }

.updating{ min-height:50px; background:url('/img/ajax-loader.gif') no-repeat center center; }
.updating-dark{ min-height:50px; background:url('/img/ajax-loader-dark.gif') no-repeat center center; }

.listing{ width:100%; min-height:50px; margin:0 0 50px; }
.listing.updating tbody{ opacity:0.3; display:block; width:100%; padding:0 0 100px; }
  .listing tr{ /*background-color:#ddd;*/ cursor:pointer; }
  .listing tr:hover,.listing tr.active{ background-color:#eee; }
  .listing tr th, .listing tr td{ border:none; }
  .listing tr th{ padding:2px 4px 2px 6px; font-weight:bold; text-align:left; }
  .listing tr td{ padding: 1px 4px 1px 6px; border-bottom: 1px solid #bbb; }

.lefthalf{ float:left; width:460px; }
.righthalf{ float:right; width:460px; }

.cropContainer{ text-align:center; color:#222; }
.cropContainer .cropPreview { width:240px; height:135px; overflow:hidden; margin:0 auto 10px; }
.cropContainer .cropDisplay { max-width:800px; max-height:800px; }
.cropContainer .cropDisplay img{ max-width:800px; max-height:800px; }
.image{ margin:0 0 20px; width:200px; }



footer{
  padding:0 40px; font-weight:bold;
}








/* css for timepicker */
.ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; }
.ui-timepicker-div dl{ text-align: left; }
.ui-timepicker-div dl dt{ height: 25px; }
.ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-datepicker-current{display:none;}
 

/* css for file uploader */
.qq-uploader { position:relative; }
.qq-upload-button { display:block; }
.qq-upload-drop-area { text-align:center; }
.qq-upload-drop-area span { display:block; font-size:11px; }
.qq-upload-drop-area-active {background:#FF7171;}
.qq-upload-list {margin:0; padding:0; }
.qq-upload-list li { margin:0; padding:0; line-height:15px; font-size:12px;}
.qq-upload-file, .qq-upload-spinner, .qq-upload-size, .qq-upload-cancel, .qq-upload-failed-text { margin-right: 7px; }
.qq-upload-file {}
.qq-upload-spinner {display:inline-block; background: url("/img/loading.gif"); width:15px; height:15px; vertical-align:text-bottom;}
.qq-upload-size,.qq-upload-cancel {font-size:11px;}
.qq-upload-failed-text {display:none;}
.qq-upload-fail .qq-upload-failed-text {display:inline;}
.qq-upload-button input{ cursor:pointer; }


/* ==|== non-semantic helper classes ======================================== */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }


/* ==|== media queries ====================================================== */
/*		Default Layout: 992px. Leftover space for scrollbars @1024px: 32px. */
/*body { width:90%; padding: 72px 48px 84px; background: rgb(232,232,232); color: rgb(60,60,60); -webkit-text-size-adjust: 100%; }*/
/*		Tablet Layout: 768px. Inherits styles from: Default Layout.
@media only screen and (min-width: 768px) and (max-width: 991px) {
  body { width: 712px; padding: 48px 28px 60px; }
} */
/*		Mobile Layout: 320px. Inherits styles from: Default Layout.
@media only screen and (max-width: 767px) {
  body { width: 252px; padding: 48px 34px 60px; }
} */
/*		Wide Mobile Layout: 480px. Inherits styles from: Default Layout, Mobile Layout.
@media only screen and (min-width: 480px) and (max-width: 767px) {
  body { width: 436px; padding: 36px 22px 48px; }
} */
/*	  Retina media query. Overrides styles for devices with a device-pixel-ratio of 2+, such as iPhone 4.
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  body { }
} */


/* ==|== print styles ======================================================= */
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } 
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } 
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}