/*
 * Date: Dec 1, 2017
 * Author: Rodney Hise
 * File: /content/css/ck/common.css
 * Project: ClasskitV2
 * Description: Commonly used css classes for the site
 *
 */
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Muli:400,400i,600,700');
*:focus {
    outline: none;
}

.blueTxt {color:#004290;}
.greenTxt {color:#368A18;}
.redTxt {color:#CF000C !important;}
.red2Txt {color:#7F194E;}
.whiteTxt { color: #ffffff; }
.grayTxt { color:#888; }

.smlTxt {
	font-family: 'Montserrat', Verdana,Arial, Helvetica, sans-serif;
	font-size:10px;
}

.stdTxt {
	font-family: 'Montserrat', Verdana,Arial, Helvetica, sans-serif;
	font-size:14px;
}

.stdTxt16 {
	font-family: 'Montserrat', Verdana,Arial, Helvetica, sans-serif;
	font-size:16px;
}

.bold {
	font-weight: 600;
}


.bold2 {
	font-weight: 800;
}


.italic {
	font-style: italic;
}

.underline {
	text-decoration: underline;
}

.nowrap {
	white-space: nowrap;
}

.autoCenter { margin-left:auto;margin-right:auto;}
.hgt20 { height: 20px;}
.hgt30 { height: 30px;}
.hgt40 { height: 40px;}
.hgt50 { height: 50px;}
.hgt60 { height: 60px;}
.hgt70 { height: 70px;}
.hgt80 { height: 80px;}
.hgt100p { height: 100%;}

.lineHgt50 { line-height: 50px;}

.marAll10 {margin:10px;}
.marTop5 {margin-top:5px;}
.marTop10 {margin-top:10px;}
.marTop20 {margin-top:20px;}
.marTop30 {margin-top:30px;}
.marTop40 {margin-top:40px;}
.marTop50 {margin-top:50px;}
.marTop60 {margin-top:60px;}

.marBot10 {margin-bottom:10px;}
.marBot20 {margin-bottom:20px;}
.marBot30 {margin-bottom:30px;}
.marBot40 {margin-bottom:40px;}
.marBot50 {margin-bottom:50px;}
.marBot60 {margin-bottom:60px;}

.marRgt10 {margin-right:10px;}
.marRgt20 {margin-right:20px;}
.marRgt30 {margin-right:30px;}
.marRgt40 {margin-right:40px;}
.marRgt50 {margin-right:50px;}
.marRgt60 {margin-right:60px;}

.marLft5 {margin-left:5px;}
.marLft10 {margin-left:10px;}
.marLft20 {margin-left:20px;}
.marLft30 {margin-left:30px;}
.marLft40 {margin-left:40px;}
.marLft50 {margin-left:50px;}
.marLft60 {margin-left:60px;}
.marLft100 {margin-left:100px;}

.pad4 {padding:4px;}
.pad8 {padding:8px;}

.padTop5 {padding-top:5px;}
.padTop10 {padding-top:10px;}
.padTop20 {padding-top:20px;}
.padTop30 {padding-top:30px;}
.padTop40 {padding-top:40px;}
.padTop50 {padding-top:50px;}
.padTop60 {padding-top:60px;}

.padBot5 {padding-bottom:5px;}
.padBot10 {padding-bottom:10px;}
.padBot30 {padding-bottom:30px;}
.padBot40 {padding-bottom:40px;}
.padBot50 {padding-bottom:50px;}
.padBot60 {padding-bottom:60px;}

.padRgt5 {padding-right:5px;}
.padRgt10 {padding-right:10px;}
.padRgt30 {padding-right:30px;}
.padRgt40 {padding-right:40px;}
.padRgt50 {padding-right:50px;}
.padRgt60 {padding-right:60px;}

.padLft5 {padding-left:5px;}
.padLft10 {padding-left:10px;}
.padLft30 {padding-left:30px;}
.padLft40 {padding-left:40px;}
.padLft50 {padding-left:50px;}
.padLft60 {padding-left:60px;}

.txtLft {text-align: left;}
.txtCnt {text-align: center;}
.txtRgt {text-align: right;}

.vertTop { vertical-align: top;}
.vertMid { vertical-align: middle;}
.vertBot { vertical-align: bottom;}

.wid20p { width: 20% !important;}
.wid30p { width: 30% !important;}
.wid40p { width: 40% !important;}
.wid50p { width: 50% !important;}
.wid60p { width: 60% !important;}
.wid70p { width: 70% !important;}
.wid75p { width: 75% !important;}
.wid80p { width: 80% !important;}
.wid85p { width: 85% !important;}
.wid90p { width: 90% !important;}
.wid100p { width: 100% !important;}

.wid20{ min-width:20px; max-width:20px}
.wid30{ min-width:30px; max-width: 30px;}
.wid40{ min-width:40px; max-width: 40px;}
.wid50{ min-width:50px; max-width: 50px;}
.wid60{ min-width:60px; max-width: 60px;}
.wid70{ min-width:70px; max-width: 70px;}
.wid80{ min-width:80px; max-width: 80px;}
.wid90{ min-width:90px; max-width: 90px;}
.wid100{ min-width:100px; max-width: 100px;}
.wid110{ min-width:110px; max-width: 110px;}
.wid120{ min-width:120px; max-width: 120px;}
.wid130{ min-width:130px; max-width: 130px;}
.wid140{ min-width:140px; max-width: 140px;}
.wid150{ min-width:150px; max-width: 150px;}
.wid160{ min-width:160px; max-width: 160px;}
.wid170{ min-width:170px; max-width: 170px;}
.wid180{ min-width:180px; max-width: 180px;}
.wid190{ min-width:190px; max-width: 190px;}
.wid200{ min-width:200px; max-width: 200px;}
.wid210{ min-width:210px; max-width: 210px;}
.wid220{ min-width:220px; max-width: 220px;}
.wid230{ min-width:230px; max-width: 230px;}
.wid240{ min-width:240px; max-width: 240px;}
.wid250{ min-width:250px; max-width: 250px;}
.wid260{ min-width:260px; max-width: 260px;}
.wid270{ min-width:270px; max-width: 270px;}
.wid280{ min-width:280px; max-width: 280px;}
.wid290{ min-width:290px; max-width: 290px;}
.wid300{ min-width:300px; max-width: 300px;}
.wid320{ min-width:300px; max-width: 300px;}
.wid340{ min-width:340px; max-width: 340px;}
.wid360{ min-width:360px; max-width: 360px;}
.wid380{ min-width:380px; max-width: 380px;}
.wid400{ min-width:400px; max-width: 400px;}
.wid450{ min-width:450px; max-width: 450px;}
.wid500{ min-width:500px; max-width: 500px;}
.wid600{ min-width:600px; max-width: 600px;}

.wid20min{ min-width: 20px !important;}
.wid30min{ min-width: 30px !important;}
.wid40min{ min-width: 40px !important;}
.wid50min{ min-width: 50px !important;}
.wid60min{ min-width: 60px !important;}
.wid70min{ min-width: 70px !important;}
.wid80min{ min-width: 80px !important;}
.wid90min{ min-width: 90px !important;}
.wid100min{ min-width: 100px !important;}
.wid110min{ min-width: 110px !important;}
.wid120min{ min-width: 120px !important;}
.wid130min{ min-width: 130px !important;}
.wid140min{ min-width: 140px !important;}
.wid150min{ min-width: 150px !important;}
.wid160min{ min-width: 160px !important;}
.wid170min{ min-width: 170px !important;}
.wid180min{ min-width: 180px !important;}
.wid190min{ min-width: 190px !important;}
.wid200min{ min-width: 200px !important;}
.wid210min{ min-width: 210px !important;}
.wid220min{ min-width: 220px !important;}
.wid230min{ min-width: 230px !important;}
.wid240min{ min-width: 240px !important;}
.wid250min{ min-width: 250px !important;}
.wid260min{ min-width: 260px !important;}
.wid270min{ min-width: 270px !important;}
.wid280min{ min-width: 280px !important;}
.wid290min{ min-width: 290px !important;}
.wid300min{ min-width: 300px !important;}
.wid400min{ min-width: 400px !important;}
.wid450min{ min-width: 450px !important;}
.wid500min{ min-width: 500px !important;}

.wid20max{ max-width: 20px !important;}
.wid30max{ max-width: 30px !important;}
.wid40max{ max-width: 40px !important;}
.wid50max{ max-width: 50px !important;}
.wid60max{ max-width: 60px !important;}
.wid70max{ max-width: 70px !important;}
.wid80max{ max-width: 80px !important;}
.wid90max{ max-width: 90px !important;}
.wid100max{ max-width: 100px !important;}
.wid110max{ max-width: 110px !important;}
.wid120max{ max-width: 120px !important;}
.wid130max{ max-width: 130px !important;}
.wid140max{ max-width: 140px !important;}
.wid150max{ max-width: 150px !important;}
.wid160max{ max-width: 160px !important;}
.wid170max{ max-width: 170px !important;}
.wid180max{ max-width: 180px !important;}
.wid190max{ max-width: 190px !important;}
.wid200max{ max-width: 200px !important;}
.wid210max{ max-width: 210px !important;}
.wid220max{ max-width: 220px !important;}
.wid230max{ max-width: 230px !important;}
.wid240max{ max-width: 240px !important;}
.wid250max{ max-width: 250px !important;}
.wid260max{ max-width: 260px !important;}
.wid270max{ max-width: 270px !important;}
.wid280max{ max-width: 280px !important;}
.wid290max{ max-width: 290px !important;}
.wid300max{ max-width: 300px !important;}
.wid400max{ max-width: 400px !important;}
.wid450max{ max-width: 450px !important;}
.wid500max{ max-width: 500px !important;}

.floatLft { float: left;}
.floatRgt { float: right;}
.clearFloat { clear: both;}
.ckblock { display: block; }
.ckinline-block { display: inline-block; }
.tableCell {
	display:table-cell;
}

.btn-default {
	background-color: #ffffff;
    color: #333333;
    border-color: #ddd;
}

.inline-block {
	display:inline-block;
}

a.ckRibbonLnk {
	width:200px;
	background-image: url(../../images/pub/ribbon.png);
	color:#ffffff;
}

.ckhide {
	display: none;
}

.ckhidden {
   position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
}

.ckinvisible {
	visibility: hidden;
}

#ckmsg {
	position:fixed;
	top:110px;
	padding:1em;
	font-family: 'Montserrat', verdana, arial, sans-serif;
	font-size: 16px;
	font-weight: 500;
	color:#ffffff;
	z-index:2000;
/*	min-height: 60px !important;*/
	display:none;
}

/*#ckmsg > table,
#ckmsg > table td
{
	border-collapse: collapse;
	vertical-align: middle;
	padding:0;
	margin:auto;
}*/

#ckmsg.ckmsg-err {
	background-color:#B34C4C;
}

#ckmsg.ckmsg-success {
	background-color:#669966;
}

#ckmsg.ckmsg-warn {
	background-color:#E79C50;
}

#ckmsg.ckmsg-info {
	background-color:#8AE7E7;
}


#ckload {
	content: '';
	box-sizing: border-box;
	top: 50%;
	left: 50%;
	width: 80px;
	height: 80px;
	margin-top: -40px;
	margin-left: -40px;
	border-radius: 50%;
	border: 2px solid #f3f3f3;
	border-top: 6px solid #CE006C;
	border-right: 6px solid transparent;
	display: none;
	position:absolute;
	z-index: 9999;
}

#ckload.ckload-show {
  -webkit-animation: spin 0.5s linear infinite; /* Safari */
  animation: spin 0.5s linear infinite;
}



#ckloadOverlay {
	display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity: 0.3;
    filter:alpha(opacity=50);
	background: #333333;
	z-index: 150;
}


.ckhelp:before {
	color:#4c7fb2;
	font-size: 18px;
	content: "\f29c";
	font-family: FontAwesome;
	font-weight: normal;
	cursor:default;
}

ul.ck-list {
	margin:0px;
	padding:0px;
	list-style-type: none;

}

ul.ck-list > li {
	list-style-type: none;
	display:block;
	padding: .3em;
	margin-top:0px;
	margin-left:0px;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


#powerTip.ckLite {
/*	background-color: #0d3f68;
	border: 1px solid #0d3f68;
	color: #fff;*/

	background-color: #333;
	background-color: rgba(0, 0, 0, 0.85);
	border-color: #333;
	border-color: rgba(0, 0, 0, 0.85);

}
#powerTip.ptGreen {
	border: 1px solid #368A18;
	background-color: #368A18;
	color: #fff;
	padding: 5px;
	font-size: .9em;
}