/*
Meta Portal stylesheet

Built by Jonathan Brain
http://jonathanbrain.com
*/

html { font-size: 62.5%; height: 100%; }

body { background: #f9f9f9; color: #4e4e4e; font-family: 'Open Sans', sans-serif; height: 100%; }

h1, h2, h3, h4, h5, h6 { font-size: 16px; font-size: 1.6rem; line-height: 24px; line-height: 2.4rem; color: #000; font-weight: 400; }

p, ul { font-size: 14px; font-size: 1.4rem; line-height: 24px; line-height: 2.4rem; margin: 0 0 20px 0; }
  
li { font-size: 14px; font-size: 1.4rem; line-height: 24px; line-height: 2.4rem; font-style: normal; }

label { font-size: 14px; font-size: 1.4rem; line-height: 24px; line-height: 2.4rem; }

a,
a:link,
a:visited,
a:active { color: #0087c6; text-decoration: none; font-size: 14px; font-size: 1.4rem; line-height: 24px; line-height: 2.4rem; }
a:hover { color: #000; }

input, 
textarea,
select { font-family: 'Open Sans', sans-serif; font-size: 14px; font-size: 1.4rem; line-height: 24px; line-height: 2.4rem; color: #4e4e4e; }

.cleared { clear: both; }
.hidden { display: none; }
.invisible { visibility: hidden; }

/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements. j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }

/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }
  
  
/* ====== header ====== */

#header { width: auto; padding: 0 0 0 80px; background: #303030; position: absolute; top: 0; left: 0; right: 0; z-index: 2000; min-height: 48px; min-width: 400px; }

#logo { float: left; display: block; padding: 13px 0 0 0; }
#logo img { display: block; }

#nav-user { float: right; }
#nav-user ul { margin: 0; }
#nav-user li { display: inline-block; vertical-align: top; color: #c5c5c5; height: 42px; line-height: 42px; }
#nav-user li:first-child{ border-left: none; }
#nav-user a { display: inline-block; color: #c5c5c5; padding: 3px 20px; vertical-align: top; height: 42px; line-height: 42px; border-left: 1px solid #595959; }
#nav-user a:hover { color: #fff; background: #444; }
#nav-user #nav-user-user { padding: 3px 20px; }
#nav-user #nav-user-user img { width: 42px; height: 42px; line-height: 42px; border-radius: 21px; display: inline-block; vertical-align: top; margin-left: 12px; }
#nav-user #nav-user-user-over { padding: 3px 20px; display: none; cursor: pointer; position: relative; }
#nav-user #nav-user-user-over img { width: 42px; height: 42px; line-height: 42px; border-radius: 21px; display: inline-block; vertical-align: top; }
#nav-user #nav-user-user-over div { position: absolute; bottom: -24px; left: 50%; display: none; }
#nav-user #nav-user-user-over div:before { content: ""; position: absolute; top: -6px; left: 0; right: 0; margin-left: -8px; display: block; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 6px solid #fff; }
#nav-user #nav-user-user-over div span { display: block; position: relative; left: -50%; background: #fff; padding: 6px 12px; color: #000; line-height: 14px; line-height: 1.4rem; z-index: 100; box-shadow: 0px 11px 18px -2px rgba(0,0,0,0.20); -webkit-transition: opacity .1s linear; -moz-transition: opacity .1s linear; -o-transition: opacity .1s linear; transition: opacity .1s linear; }
#nav-user #nav-user-nav { display: none; }
#nav-user #nav-user-nav a { font-size: 18px; font-size: 1.8rem; vertical-align: top; outline: 0; padding: 0; height: 48px; line-height: 48px; }
#nav-user #nav-user-nav i { font-size: 18px; font-size: 1.8rem; padding: 3px 20px; height: 42px; line-height: 42px; }

  
/* ====== layout ====== */

#layout { display: table; width: 100%; min-width: 400px; height: 100%; min-height: 100%; }


/* ====== main ====== */

#main { position: relative; display: table-cell; vertical-align: top; padding: 92px 80px 40px 80px; }

#main h1 { margin: 0; padding: 0 0 16px 0; position: relative; border-bottom: 1px solid #dbdbdb; font-weight: 600; font-size: 30px; font-size: 3.0rem; line-height: 36px; line-height: 3.6rem; color: #000; }
#main h1 a { font-weight: 400; font-size: 30px; font-size: 3.0rem; line-height: 36px; line-height: 3.6rem; color: #000; }
#main h1 a:hover { color: #0087c6; }
#main h1 i { vertical-align: middle; color: #000; font-size: 24px; font-size: 2.4rem; line-height: 36px; line-height: 3.6rem; }
#main h1 i:first-child { position: absolute; width: 60px; height: 100%; left: -60px; top: 0; bottom: 0; vertical-align: middle; text-align: center; color: #000; font-size: 30px; font-size: 3.0rem; line-height: 36px; line-height: 3.6rem; }

#main h2 { font-size: 18px; font-size: 1.8rem; line-height: 30px; line-height: 3.0rem; margin: 0 0 24px 0; color: #000; font-weight: 600; }
#main h3 { font-size: 16px; font-size: 1.6rem; line-height: 30px; line-height: 3.0rem; margin: 0 0 12px 0; }

#main section { margin: 0 0 32px 0; }
#main section:nth-of-type(1) { margin-top: 48px; }


/* ====== main nav ====== */

#nav-main-wrapper { position: relative; display: table-cell; vertical-align: top; background: #e9e9e9; width: 320px; box-shadow: inset 11px 0px 18px -9px rgba(0,0,0,0.10); }
#nav-main-inner { position: relative; padding: 84px 0 20px 0; opacity: 1; }

#nav-main-level-1 { margin: 0; padding: 0; border-bottom: 1px solid #f4f4f4; }
#nav-main-level-1>li { display: block; border-top: 1px solid #f4f4f4; border-bottom: 1px solid #d1d1d1; }
#nav-main-level-1>li:first-child { border-top: none; }
#nav-main-level-1 li a.nav-item-level-1 { display: block; padding: 5px 40px 4px 0; font-weight: 600; font-size: 18px; font-size: 1.8rem; line-height: 48px; line-height: 4.8rem; color: #000; position: relative; text-shadow: 0 1px 1px rgba(255,255,255,1); }
#nav-main-level-1 li a.nav-item-level-1:hover { background: rgba( 255, 255, 255, 0.3 ); color: #0087c6; }
#nav-main-level-1 li a.nav-item-level-1 i { font-size: 24px; font-size: 2.4rem; line-height: 48px; line-height: 4.8rem; padding: 0 0 0 20px; display: inline-block; width: 78px; text-align: center; text-shadow: 0 1px 1px rgba(255,255,255,1); }

.nav-main-level-2 { display: none; margin-bottom: 0; padding-bottom: 6px; }
.nav-main-level-2 li { display: block; }
.nav-main-level-2 li a.nav-item-level-2 { display: block; padding: 8px 40px 8px 98px; font-weight: 400; font-size: 14px; font-size: 1.4rem; line-height: 18px; line-height: 1.8rem; color: #000; }
.nav-main-level-2 li a.nav-item-level-2:hover { background: rgba( 255, 255, 255, 0.3 ); color: #0087c6; }
.nav-main-level-2 li.active a.nav-item-level-2  { background: #0087c6; color: #fff; }

#nav-main-level-1 li.open { background: #ddd; border: none; box-shadow: inset 11px 0px 18px -9px rgba(0,0,0,0.10); }

#nav-main-level-1 li.active a.nav-item-level-1 { background: #0087c6; color: #fff; text-shadow: none; }
#nav-main-level-1 li.active a.nav-item-level-1 i { color: #fff; text-shadow: none; }
#nav-main-level-1 li.open .nav-main-level-2 { display: block; }

#company-title { font-size: 26px; font-size: 2.6rem; line-height: 40px; line-height: 4.0rem; margin: 20px 0 40px 0; color: #000; display: block; }


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

#footer { width: 96%; padding: 0 2%; clear: both; }


/* ====== tabs ====== */

.nav-tabs { padding: 20px 0 0 0; }
.nav-tabs ul { display: block; width: 100%; border-bottom: 1px solid #dbdbdb; }
.nav-tabs li { display: inline-block; margin-bottom: -1px; }
.nav-tabs li.active { border-bottom: 1px solid #f9f9f9; border-left: 1px solid #dbdbdb; border-top: 1px solid #dbdbdb; border-right: 1px solid #dbdbdb; border-radius:  5px 5px 0 0; }
.nav-tabs li a { padding: 10px; display: inline-block; border-radius: 5px 5px 0 0; }
.nav-tabs li.active a { color: #000; cursor: default; }
.nav-tabs li a:hover { background: #e9e9e9; }
.nav-tabs li.active a:hover { background: #f9f9f9; }


/* ====== pills ====== */

.nav-pills { }
.nav-pills ul { display: block; width: 100%; }
.nav-pills li { display: inline-block; margin-right: 2px; }
.nav-pills li a { padding: 4px 10px; display: inline-block; border-radius: 5px; background: #0087c6; color: #fff; }
.nav-pills li a i { padding-right: 4px; }
.nav-pills li a:hover { background: #0179b1; color: #fff; }


/* ====== tables ====== */

.table-standard { width: auto; margin-bottom: 20px; background: #fff; border-collapse: separate; border-right: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf; border-radius: 3px 3px 0 0;  }
.table-standard th { background: #f0f0f0; padding: 4px 12px 3px; text-align: left; border-top: 1px solid #dfdfdf; border-left: 1px solid #dfdfdf; font-size: 12px; font-size: 1.2rem; line-height: 24px; line-height: 2.4rem; text-transform: uppercase; color: #000; vertical-align: bottom; }
.table-standard td { padding: 4px 12px 3px; text-align: left; border-top: 1px solid #dfdfdf; border-left: 1px solid #dfdfdf; vertical-align: top; font-size: 14px; font-size: 1.4rem; line-height: 24px; line-height: 2.4rem; }
.table-standard td.right { text-align: right; }
.table-standard td a { text-decoration: none; display: inline-block; }
.table-standard tr:first-child th:first-child { border-radius: 3px 0 0 0; }
.table-standard tr:first-child th:last-child { border-radius: 0 3px 0 0; }
.table-standard tr:first-child td:first-child { border-radius: 3px 0 0 0; }
.table-standard tr:first-child td:last-child { border-radius: 0 3px 0 0; }
.table-standard tr:nth-child(2n+1) td { background: #fbfbfb; }

.table-standard .option { width: 6%; text-align: center; vertical-align: bottom; }
.table-standard .no-wrap { white-space: nowrap; }


/* ====== forms ====== */

fieldset { background: #fff; margin: 0 0 20px 0; padding: 0; display: block; border: 1px solid #dfdfdf; border-radius: 3px 3px 0 0; position: relative; box-sizing: border-box; max-width: 600px; }
legend { font-size: 12px; font-size: 1.2rem; line-height: 24px; line-height: 2.4rem; text-transform: uppercase; color: #000; display: block; margin-bottom: 12px; padding: 4px 12px 3px; background: #f0f0f0; border-bottom: 1px solid #dfdfdf; position: relative; float: left; width: 100%; box-sizing: border-box; }

fieldset .overline { border-top: 1px solid #dfdfdf; padding-top: 12px; margin-top: 0px; }

.control-group { margin-bottom: 12px; width: 100%; box-sizing: border-box; padding: 0 12px; float: left; clear: both; }
.control-label { display: block; width: 25%; float: left; clear: both; text-align: left; padding: 4px 12px 3px 0; margin: 0; box-sizing: border-box; color: #000; font-weight: 600; }
.control-label span { font-weight: normal; padding-left: 12px; height: 18px; height: 1.8rem; box-sizing: border-box; }

.controls { display: block; width: 75%; float: left; }
.controls .text-box,
.controls-surrogate input { border: 1px solid #dfdfdf; border-radius: 3px; display: inline-block; padding: 0 6px; height: 32px; line-height: 18px; line-height: 1.8rem; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.controls-surrogate input.radio { width:17px; height:17px; margin-right: 25px; margin-bottom: 20px; }
.control-input-prefix .text-box { border: 1px solid #dfdfdf; border-radius: 0 3px 3px 0; display: inline-block; }
.control-input-prefix .prefix { border-top: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf; border-left: 1px solid #dfdfdf; border-radius: 3px 0 0 3px; display: inline-block; padding: 4px 8px; mxargin-bottom: 2px; font-size: 14px; font-size: 1.4rem; line-height: 18px; line-height: 1.8rem; background: #eee; height: 18px; height: 1.8rem; }
.control-input-suffix .text-box { border: 1px solid #dfdfdf; border-radius: 3px 0 0 3px; display: inline-block; }
.control-input-suffix .suffix { border-top: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf; border-right: 1px solid #dfdfdf; border-radius: 0 3px 3px 0; display: inline-block; padding: 4px 8px; mxargin-bottom: 2px; font-size: 14px; font-size: 1.4rem; line-height: 18px; line-height: 1.8rem; background: #eee; height: 18px; height: 1.8rem; }
.controls .text-box-corners { border-radius: 3px; }
.controls textarea { border: 1px solid #dfdfdf; border-radius: 3px; display: block; padding: 4px 4px; width: 97%; height: 150px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.controls select { border: 1px solid #dfdfdf; border-radius: 3px; display: inline-block; padding: 4px 4px; background: #fff; max-width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.controls select option { margin-right: 4px; }
.control-label-list { display: block; min-height: 18px; min-height: 1.8rem; padding: 5px 0 0 0; margin-top: 1px; }
.control-label-list input { display: inline-block; margin-right: 10px; }
.control-checkbox-wrapper { display: block; min-height: 18px; min-height: 1.8rem; padding: 5px 0 0 0; margin-top: 1px; }
.control-checkbox-wrapper input { display: inline-block; margin-right: 10px; min-height: 18px; min-height: 1.8rem; margin-top: 1px; }

.controls input:focus { border: 1px solid #0087c6; }
.controls textarea:focus { border: 1px solid #0087c6; }
.controls select:focus { border: 1px solid #0087c6; }

.controls .input-note { display: block; font-style: italic; font-size: 11px; font-size: 1.1rem; line-height: 14px; line-height: 1.4rem; padding-left: 5px; color: #999; }
.controls .control-join { font-size: 14px; font-size: 1.4rem; height: 18px; height: 1.8rem; }

.control-group-buttons { margin-bottom: 10px; padding: 0; clear: both; }

.controls .file-box { visibility: hidden; position: absolute; z-index: -1; }
.controls .file-surrogate { margin-right: 12px; }
.controls .file-text-surrogate { font-size: 14px; font-size: 1.4rem; line-height: 32px; line-height: 3.2rem; color: #4e4e4e; white-space: nowrap; }

.validation-summary-errors ul { border-radius: 3px; padding: 4px 12px 4px 42px; border: 1px solid rgba(185,74,72,0.2); position: relative; box-sizing: border-box; max-width: 600px; background: #f2dede; color: #b94a48; text-shadow: 0 1px 1px rgba(255,255,255,1); }
.validation-summary-errors ul:before { content: "\f071"; position: absolute; top: 4px; left: 12px; width: 60px; font-size: 14px; font-size: 1.4rem; font-family: FontAwesome; color: #b94a48; }

.validation-summary-valid p { border-radius: 3px; padding: 4px 12px 4px 42px; border: 1px solid rgba(70,136,71,0.2); position: relative; box-sizing: border-box; max-width: 600px; background: #dff0d8; color: #468847; text-shadow: 0 1px 1px rgba(255,255,255,1); }
.validation-summary-valid p:before { content: "\f00c"; position: absolute; top: 4px; left: 12px; width: 60px; font-size: 14px; font-size: 1.4rem; font-family: FontAwesome; color: #468847; }

.success-message p { border-radius: 3px; padding: 4px 12px 4px 42px; border: 1px solid rgba(70,136,71,0.2); position: relative; box-sizing: border-box; max-width: 600px; background: #dff0d8; color: #1c0; text-shadow: 0 1px 1px rgba(255,255,255,1); }
.success-message p:before { content: "\f00c"; position: absolute; top: 4px; left: 12px; width: 60px; font-size: 14px; font-size: 1.4rem; font-family: FontAwesome; color: #468847; }


/* ====== buttons ====== */
/*
.button-hero { display: inline-block; font-size: 14px; font-size: 1.4rem; line-height: 29px; line-height: 2.9rem; height: 29px; background: #0087c6; color: #fff; padding: 0 10px 0 10px; -webkit-transition: background .2s linear; -moz-transition: background .2s linear; -o-transition: background .2s linear; transition: background .2s linear; border: none; border-radius: 5px; cursor: pointer; -webkit-box-sizing: initial; -moz-box-sizing: initial; box-sizing: initial; vertical-align: middle; margin-right: 4px; }
.button-hero:hover { background: #cecece; }
*/

a.button,
button.button { display: inline-block; font-size: 14px; font-size: 1.4rem; line-height: 25px; line-height: 2.5rem; color: #000; padding: 0 10px; border: 1px solid #c9c9c9; border-radius: 5px; cursor: pointer; box-sizing: border-box; vertical-align: top; background: rgba(247,247,247,1); background: -moz-linear-gradient(top, rgba(247,247,247,1) 0%, rgba(198,198,198,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(247,247,247,1)), color-stop(100%, rgba(198,198,198,1))); background: -webkit-linear-gradient(top, rgba(247,247,247,1) 0%, rgba(198,198,198,1) 100%); background: -o-linear-gradient(top, rgba(247,247,247,1) 0%, rgba(198,198,198,1) 100%); background: -ms-linear-gradient(top, rgba(247,247,247,1) 0%, rgba(198,198,198,1) 100%); background: linear-gradient(to bottom, rgba(247,247,247,1) 0%, rgba(198,198,198,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#c6c6c6', GradientType=0 ); }
a.button i,
button.button i { display: inline-block; font-size: 14px; font-size: 1.4rem; line-height: 25px; line-height: 2.5rem; padding: 0 8px 0 0; vertical-align: top; }
a.button:hover,
button.button:hover { background: rgba(216,216,216,1); background: -moz-linear-gradient(top, rgba(216,216,216,1) 0%, rgba(216,216,216,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(216,216,216,1)), color-stop(100%, rgba(216,216,216,1))); background: -webkit-linear-gradient(top, rgba(216,216,216,1) 0%, rgba(216,216,216,1) 100%); background: -o-linear-gradient(top, rgba(216,216,216,1) 0%, rgba(216,216,216,1) 100%); background: -ms-linear-gradient(top, rgba(216,216,216,1) 0%, rgba(216,216,216,1) 100%); background: linear-gradient(to bottom, rgba(216,216,216,1) 0%, rgba(216,216,216,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8d8d8', endColorstr='#d8d8d8', GradientType=0 ); }

a.button i.alone,
button.button i.alone { padding: 0; }

button.button:disabled, 
button.button:disabled:hover { border: 1px solid #ccc; background: #f7f7f7; color: #9d9d9d; cursor: default; }


a.button-hero,
button.button-hero { display: inline-block; font-size: 14px; font-size: 1.4rem; line-height: 27px; line-height: 2.7rem; background: #0087c6; color: #fff; padding: 0 10px; border: 1px solid #dfdfdf; border-radius: 5px; cursor: pointer; box-sizing: border-box; vertical-align: top; margin-right: 4px; border: 2px solid #0087c6; box-shadow: 0 2px 3px rgba(0,0,0,0.2); }
a.button-hero i,
button.button-hero i { display: inline-block; font-size: 14px; font-size: 1.4rem; line-height: 27px; line-height: 2.7rem; padding: 0 10px 0 0; vertical-align: top; }
a.button-hero:hover,
button.button-hero:hover { background: #0179b1; box-shadow: 0 0 0 rgba(0,0,0,0.2); border: 2px solid #0179b1; cursor: pointer; }

button.button-warning { background-color:red; }
button.button-warning:hover { background-color:tomato; }

button.right-button { float:right; }

/* ====== search ====== */

#select-submit { width: 100%; margin-bottom: 20px; display: block; }
#select-submit .text-box { border-top: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf; border-left: 1px solid #dfdfdf; border-radius: 5px 0 0 5px; display: inline-block; padding: 4px 8px; margin: 0; vertical-align: top; background: #fff; width: 80%; max-width: 400px; height: 24px; }
#select-submit .btn { -webkit-appearance: none; border: 1px solid #c9c9c9; display: inline-block; padding: 4px 10px 4px 10px; vertical-align: top; cursor: pointer; height: 34px; line-height: 18px; border-radius: 0 5px 5px 0; position: relative; z-index: 2; margin-right: 4px; font-size: 18px; font-size: 1.8rem; font-family: FontAwesome; color: #000; background: rgba(247,247,247,1); background: -moz-linear-gradient(top, rgba(247,247,247,1) 0%, rgba(198,198,198,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(247,247,247,1)), color-stop(100%, rgba(198,198,198,1))); background: -webkit-linear-gradient(top, rgba(247,247,247,1) 0%, rgba(198,198,198,1) 100%); background: -o-linear-gradient(top, rgba(247,247,247,1) 0%, rgba(198,198,198,1) 100%); background: -ms-linear-gradient(top, rgba(247,247,247,1) 0%, rgba(198,198,198,1) 100%); background: linear-gradient(to bottom, rgba(247,247,247,1) 0%, rgba(198,198,198,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#c6c6c6', GradientType=0 ); }
#select-submit .btn:hover  { background: #d8d8d8; color: #000; }


/* ====== datapicker ====== */

#ui-datepicker-div { background: #fff; border-radius: 3px; z-index: 100; box-shadow: 0px 11px 18px -2px rgba(0,0,0,0.20); border: 1px solid #dfdfdf; margin-top: 2px; display: none; }

.ui-datepicker-header { position: relative; padding: 8px 0; background: #f0f0f0; color: #000; }

.ui-datepicker-prev { width: 17%; position: absolute; top: 8px; left: 0; }
.ui-datepicker-prev:before { content: "\f177"; font-family: FontAwesome; padding: 0 14px; position: absolute; top: 0; left: 0; cursor: pointer; }
.ui-datepicker-prev span { display: none; }

.ui-datepicker-next { width: 17%; position: absolute; top: 8px; right: 0; }
.ui-datepicker-next:before { content: "\f178"; font-family: FontAwesome; padding: 0 14px; position: absolute; top: 0; right: 0; cursor: pointer; }
.ui-datepicker-next span { display: none; }

.ui-datepicker-title { width: 66%; padding: 0 17%; }
.ui-datepicker-title select { width: 50%; }

.ui-datepicker-calendar th { font-size: 12px; font-size: 1.2rem; line-height: 24px; line-height: 2.4rem; text-transform: uppercase; color: #000; padding: 4px 12px 3px; background: #f0f0f0; border-bottom: 1px solid #dfdfdf; }
.ui-datepicker-calendar td { border: 1px solid #fff; }
.ui-datepicker-calendar td a { display: block; padding: 2px 8px; text-align: center; border: 1px solid #fff; }
.ui-datepicker-calendar td a:hover { background: rgba(216,216,216,1); }
.ui-datepicker-calendar td a.ui-state-active { background: #0087c6; color: #fff; }
.ui-datepicker-calendar td a.ui-state-highlight { border: 1px solid #dfdfdf; }


/* ====== sortable ====== */

th.sortable:after { content: "\f0dc"; font-family: FontAwesome; padding-left: 10px; }
th.sortable:hover { background: rgb(216,216,216); cursor: pointer; }


/* ====== paging ====== */

.paging button { margin-right: 4px; }
.paging span { font-size: 14px; font-size: 1.4rem; line-height: 24px; line-height: 2.4rem; display: inline-block; padding: 4px 0; }


/* ====== animation ====== */

.spring-up { 
	padding-bottom:0px; 
	
	-webkit-animation-name:spring-up; 
	-moz-animation-name:spring-up; 
	animation-name:spring-up; 
	
	-webkit-animation-timing-function:cubic-bezier(0.23, 1, 0.32, 1); 
	-moz-animation-timing-function:cubic-bezier(0.23, 1, 0.32, 1);
	animation-timing-function:cubic-bezier(0.23, 1, 0.32, 1);
	
	-webkit-animation-delay:0.2s;
	-moz-animation-delay:0.2s;
	animation-delay:0.2s;
	
	-webkit-animation-duration:0.6s;
	-moz-animation-duration:0.6s;
	animation-duration:0.6s;
	
	-webkit-animation-fill-mode:both;
	-moz-animation-fill-mode:both;
	animation-fill-mode:both;
	
	-webkit-animation-iteration-count:1;
	-moz-animation-iteration-count:1;
	animation-iteration-count:1
}

@-webkit-keyframes spring-up {
	from { opacity:0; -webkit-transform:translateY(10px) }
	to { opacity:1; -webkit-transform:translateY(0) } 
}

@-moz-keyframes spring-up { 
	from { opacity:0; -moz-transform:translateY(10px) } 
	to { opacity:1; -moz-transform:translateY(0) } 
} 

@-o-keyframes spring-up{ 
	from { opacity:0; -o-transform:translateY(10px) } 
	to { opacity:1; -o-transform:translateY(0) } 
} 

@keyframes spring-up { 
	from { opacity:0; transform:translateY(10px) } 
	to { opacity:1; transform:translateY(0) } 
} 


/* ====== responsive styles ====== */

@media screen and (max-width: 900px) { 

    html { font-size: 50%; }

    #header { padding: 0 0 0 20px; }
	#main { padding: 92px 20px 40px 20px; }
    #main h1 i:first-child { position: relative; width: 50px; left: 0; vertical-align: bottom; text-align: left; }

    #nav-main-wrapper { display: none; position: absolute; right: 0; top: 0; width: 220px; box-shadow: 0px 11px 18px -2px rgba(0,0,0,0.20); z-index: 1000; }
    #nav-main-inner { padding-bottom: 0; box-shadow: none; }
    #nav-main-level-1 { border-bottom: none; }
    #nav-main-level-1 li a.nav-item-level-1 i { width: 48px; }
    .nav-main-level-2 li a.nav-item-level-2 { padding: 8px 40px 8px 68px; }
    #nav-main-level-1 li.open { box-shadow: inset 0 11px 18px -9px rgba(0,0,0,0.10); }

    #nav-user #nav-user-user { display: none; }
    #nav-user #nav-user-user-over { display: inline-block; }
    #nav-user #nav-user-user-over:hover div { display: block; }
    #nav-user #nav-user-user-over:hover div:before { display: block; }
    #nav-user #nav-user-nav { display: inline-block; }
}

@media screen and (min-width: 901px) and (max-width: 1200px) { 

    #header { padding: 0 0 0 20px; }
	#main { padding: 92px 20px 40px 20px; }
    #main h1 i:first-child { position: relative; width: 50px; left: 0; vertical-align: bottom; text-align: left; }

    #nav-main-wrapper { display: none; position: absolute; right: 0; top: 0; width: 260px; box-shadow: 0px 11px 18px -2px rgba(0,0,0,0.20); z-index: 1000; }
    #nav-main-inner { padding-bottom: 0; box-shadow: none; }
    #nav-main-level-1 { border-bottom: none; }
    #nav-main-level-1 li a.nav-item-level-1 i { width: 48px; }
    .nav-main-level-2 li a.nav-item-level-2 { padding: 8px 40px 8px 68px; }
    #nav-main-level-1 li.open { box-shadow: inset 0 11px 18px -9px rgba(0,0,0,0.10); }

    #nav-user #nav-user-user { display: none; }
    #nav-user #nav-user-user-over { display: inline-block; }
    #nav-user #nav-user-user-over:hover div { display: block; }
    #nav-user #nav-user-user-over:hover div:before { display: block; }
    #nav-user #nav-user-nav { display: inline-block; }
}

@media screen and (min-width: 1201px) and (max-width: 1400px) { 

    #header { padding: 0 0 0 20px; }
	#main { padding: 92px 20px 40px 20px; }
    #main h1 i:first-child { position: relative; width: 50px; left: 0; vertical-align: bottom; text-align: left; }

    #nav-main-wrapper { width: 260px; min-width: 260px; }
    #nav-main-level-1 li a.nav-item-level-1 i { width: 48px; }
    .nav-main-level-2 li a.nav-item-level-2 { padding: 8px 40px 8px 68px; }
}



span.tick { background: url(../images/tick-sml.png); width: 21px; height:24px; display:inline-block; }
span.admin-user {display:inline-block; color:#b0c; font-size:2rem; font-weight:bold;}
span.client-admin-user {display:inline-block; color:#c50; font-size:2rem; font-weight:bold;}