@import url('https://fonts.googleapis.com/css?family=Montserrat:bold&display=swap');

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
	HL - eText site styles - February 2013
	PAGE DEFAULTS
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

body, html{
	width: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Lato', Verdana, Helvetica, sans-serif;
	color: #000;
	font-size: 1em;
	overflow:auto;
	font-weight: normal;
}

.notReader #wrapper{
	display: block;
}
input, #tabs{
	font-family: 'Roboto', Verdana, Helvetica, sans-serif;
}
figure{
	margin: 0 auto;
	padding-top: 10px;
	text-align: center;
}
figcaption{
	padding: 12px 0;
	font-size: 90%;
	font-style: italic;
	color: #5a5a5a;
}
address{
	font-style: normal;
}
table{
	width: 100%;
	border-width: 0 0 1px 1px;
	border-spacing: 0;
	border-collapse: collapse;
	border-style: solid;
	border-color: #b2b2b2;
}
table caption{
	padding-bottom: 12px;
}
td, th{
	text-align: center;
	margin: 0;
	padding: 4px;
	border-width: 1px 1px 0 0;
	border-style: solid;
	border-color: #b2b2b2;
}
th{
	background: #f5f5f5;
}
.clear{
	clear: both;
}

.left{
	float: left;
}
.lmargin{
	margin-right: 20px;
}
.clearborder{
	padding: 20px 0 0 0;
	margin-bottom: 60px;
	border-bottom: 4px dotted #000;
}
p.clearborder{
	padding-bottom: 70px;
	border-bottom: 3px dotted #cbcbcb;
}
.red{
	color: #a02226;
}
.small{
	font-size: 80%;
}
a img{
	border: none;
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
	HEADER
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
header{
	color: #000;
	height: 80px;
	width:100%;
	z-index: 999999999;	
}

header form{
	font-weight: bold;
	float: right;
	color: #fff;
	padding: 0;
	margin-bottom: 0;
	margin-right: 50px;
	margin-top: 30px;
	display: block;
}
header form button, #signInHere button, #installBanner #installBtn{
	background-color: #FF552E;
	border: none;
	padding: 10px 30px;
	color: #fff;
	font-weight: bold;
	cursor: pointer;
	border-radius: 15px;
	text-transform: uppercase;
	font-size: 1.5em;
}
header form button:hover, header form button:active, header form button:focus{
background-color: #13294b;
}
header form button:focus, header h1 a:focus, header nav li a:focus{
	outline: medium solid #FFF;
}

header #imark{
	float: left;
/*	margin-top: -5px;*/
	margin-right: 30px;
}
header h2 a, header h2 a:link, header h2 a:active, header h2 a:visited{
	color: #ffd842;
	text-decoration: none;
}
header #imark{
	width: 57px;
	height: 82px;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
	NAVIGATION MENU
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
nav{
	float: right;
	padding: 0;
}
nav ul{
	margin-top: 0;
	margin-bottom: 0;
}
nav ul li{
	display: block;
	float: left;
	list-style: none;
	margin-bottom: 0;
	border-right: 1px solid #FF552E;
}
nav ul li:last-child{
	margin-right: 0.6em;
	border-right: none;
}
nav ul li a{
	margin: 0 0.8em;
}
nav ul li a:active, nav ul li a:link, nav ul li a:visited{
	text-decoration: none;
	color: #fff;
	font-size: 1.7em;
	padding: 10px;
	margin-bottom: 0;
}
nav ul li a:hover, nav ul li a:active{
	color: #FF552E;
	border: none;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
	PAGE CONTENT
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
h2{
	font-weight: normal;
	color: #FF552E;
	font-size: 2.2em;
	clear: both;
}
h3{
	margin-top: 20px;
	color: #FF552E;
	line-height: 120%;
}
h3.installLink{
	font-size: 2em;
}
#content h2{
	font-size: 2.6em;
	margin-top: 0;
	border-bottom: 1px solid #e7e7e7;
}
#content{
	margin: 75px 20px 10px 20px;
	
}
#content p, #content ul{
	line-height: 220%;
}
#content a:active, #content a:link{
	color: #13294b;
	text-decoration: none;
	border-bottom: 1px dotted #13294b;
}
#content a:hover, #tabs ul li a:hover{
	color: #FF552E;
	text-decoration: none;
	border-bottom: 1px solid #FF552E;
}
#content a:visited{
	color: #13294b;
}

div#content .broadcastMessage{
	color: #a02125;
	font-weight: bold;
	margin: 0;
	margin-top: 1.25rem;
	border:1px solid #C1C1C1;
	background: #fff;
	padding: 1rem;
}

div#content .broadcastMessage p{
	line-height: normal;
	margin-bottom: 0;
	padding-bottom: 0;
}

#tabs ul li a{
	border-bottom: none !important;
}
#content figure img{
	padding: 4px;
	border: 1px solid #8d8d8d;
}
#content ul li{
	margin-left: 8px;
	padding-left: 4px;
	list-style-image: url(../homePage/bullet.png);
}
#content div ul{
	padding-left: 0;
}
#content div ul li{
	margin-left: 0;
	padding-left: 4px;
}
.section{
	padding: 0 20px;
	/*background: #fff;*/
}
.section div.kWidgetIframeContainer{
	margin: 0 auto;
	text-align: center;
}
.features{
	float: left;
	padding: 0 20px;
	width: 44%;
	margin: 0 1% 0 0;
}
.features li{
	font-size: 88%;
}

.section div#signinContainer {
	width: 95%;
	display: table-row;
}

.signinBlock {
	display: table-cell;
	width: 50vw;
	padding: 0 5px;
	background-color: #e7e7e7;
}


 /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
	jQUERY TABS
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
 #tabs ul li{
	list-style: none;
} 
#tabs ul li a{
	font-size: 1.5em;
}
.ui-widget-content{
	border: 0;
}
.ui-widget-header {
	background: none;
	border-top: none;
	border-right: none;
	border-left: none;
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
	MEDIA QUERIES
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Small Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-width : 320px) 
and (max-width : 480px) {
	body, html{
		overflow-x:hidden;
	}
	header{
		min-height: 130px;
	}
	header #imark{
		max-width: 75px;
		max-height: 97px;
		margin-right: 8px;
	}
	header #logo{
		max-width: 156px;
		max-height: 81px;
	}
	#content{
	padding: 10px 1% 50px 1%;
	}
	#content img{
		max-width: 95%;
	}
	.features{
		width: 100%;
	}
	.section{
		padding: 40px 20px;
	}
	footer{
		padding: 0px 1% 30px 1%;
	}
	#bookmark{
		display: none;
	}
	#content div ul {
		padding-left: 2px;
		padding-right: 10px;
	}
	footer div{
		min-width: 99%;
		max-width: 99%;
		float: none;
		padding: 60px 3% 0 2%;
	}
	footer h2{
		max-width: 90%;
	}
	div.left, .right{
		float: none;
	}
	nav{
		float: none;
		margin: 0;
		display: block;
		height: auto;
	}
	nav ul li{
		display: inline;
		margin-right: none;
	}
	/*nav ul li a:link{
		color: #000;
	}*/
	nav ul{
		padding: 0;
		margin: 0;
	}
	.ui-tabs .ui-tabs-panel{
		padding: 0;
	}
	

	#signIn{
		margin: 0 -30px 0 0;
		padding:5px;
		
	}
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-width : 767px) 
and (max-width : 1024px) {
	#content{
	padding: 10px 4% 50px 4%;
	}
	.features{
		width: 100%;
	}
	footer{
		padding: 40px 4% 50px 4%;
	}
	
	header form input{
		font-weight: normal;
	}
	
	nav ul li a:active, nav ul li a:link, nav ul li a:visited{
		padding: 10px 5px;
	}
	
	header nav{
		float:none;
	}
}


/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* iPad */
	#content{
		background: #fff;
	}
	.section{
		border: none;
		line-height: 12pt;
		padding-left: 0;
		padding-right: 0;
	}
	.front, .front h2{
		margin-top: 0;
		padding-top: 0;
	}
	.section, #content form{
		font-size: 1.2em;
	}
	#content form{
		margin-bottom: 28px;
		padding-bottom: 0;
	}
	footer{
		font-size: 1em;
	}
	footer div, footer div.right{		
		float: none;
		margin: 40px 10px;
		max-width: 98%;
		width: 98%;
		text-align: left !important;
	}
	footer div.left h2{
		margin-top: 20px !important;
	}
	footer a{
		color: #fff;
	}
	footer p{
		font-size: 100%;
	}
	#content h2{
		margin-bottom: none;
		border-bottom: none;
		line-height: 1.2em;
		font-size: 1.8em;
		color: #FF552E;
	}
	#content ul li {
		list-style-image: none;
		padding-right: 12px;
		padding-left: 34px;
	}
	#content h3{
		color: #ff552e;
	}
	header h1{
		padding-left: none;
	}
	header form input{
		font-size: .8em;
		padding: 14px 12px;
		margin-top: 30px;
		text-shadow: none;
		font-weight: normal;
	}
	#bookmark{
		margin-right: none !important;
	}
	h3{
		font-weight: normal;
	}
}
/* Galaxy, Large Res Phones ----------- */
@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    #content, footer{
		font-size: 2.0em;
	}
	header form input{
		font-size: 1.2em;
	}
	nav ul li a:active, nav ul li a:link, nav ul li a:visited {
		font-size: 2em;
	}
	#bookmark{
		background: url(../homePage/bookmarksm.png) no-repeat;
		height: 170px;
		width: 80px;
		margin-top: -22px;
	}
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/*CITL Branding*/
#CITLBrand{
	font-family: 'Montserrat', Verdana, Helvetica, sans-serif;
	background-color: #D2D2D2;
	height: 40px;
	margin:0;
	padding: 0;
	border-top: 15px solid #FF552E;
	color: #13294B;
}

#CITLBrand .topLinks{
	margin:0;
	padding: 0;
	margin-top:10px;
}

#CITLBrand a{
	margin: 0; 
	text-decoration: none;
	font-size: .8em;
}

#CITLBrand a.citl{
	margin-top: 4px; 
	float: left;
}

#CITLBrand .featFaq{
	display: inline;
	float: right;
	width: auto;
	margin-right: 50px;
	text-transform: uppercase;
}

#CITLBrand a,  #CITLBrand .featFaq a:visited{
    color: #13294B;
}

#CITLBrand .featFaq a:hover{
	color: #FF552E;
}

#CITLBrand .featFaq .orange{
	color: #FF552E;
	padding: 0 5px;
}

#CITLBrand #bookmark{
	float: left;
	width: 140px;
	height: 140px;
	background: transparent url(../homePage/bookmark.png) bottom no-repeat;
	margin-top: 0px;
	margin-left: 10px;
	margin-right: 10px;
}

#etextBrand{
	/*background: url(../homePage/headerBG.png);
	background-size: auto;
	height: 115px;*/
}

#etextBrand .blockI img{
	height: 70px;
	border-right: 2px solid #13294b;
	padding: 10px 25px;
	float: left;
	margin-top: 15px;
}

#etextBrand #logos{
	font-family: 'Montserrat', sans-serif;
	color:#13294b;
	margin:0;
	width: auto;
	float: left;
	font-size: 1em;
	text-align: left;
}

#etextBrand #logos h1{
	font-family: eTextLogo, sans-serif;
	margin:0;
	font-size: 3em;
}

#etextBrand #logos .citl{
	/*font-size: .8em;*/
	text-decoration: none;
	color: #13294b;
}

#etextBrand #logos .units{
	margin: 20px 0 0 15px;
	width: auto;
	float: left;
}

.tagLine{
	padding-top: 20px;
	color: #FF552E;
}



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
	FOOTER
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
footer#footer{
	background-color: #d2d2d2;
	margin: 0;
	color: #13294B;
	font-size: 1em;
	padding-bottom: 20px;
	min-height: 200px;
    margin-top: 5em;
 }

#pageFoot, #pageFooter{
/*    position: fixed;
    bottom: 0;*/
    width: 100%;
}
#footer .contact{
	float:left;
	margin: 1.5em 0 0 50px;
	padding: 0;
	width: 25%;
}

#footer .contact p{
	margin: 0;
	padding: 0;
}

#footer .contact p strong{
	font-weight: bolder;
}

#footer .contact img{
	width: 225px;	
	margin-bottom: 3em;
}

#footer #quotes{
	text-align: justify;
	float: right;	
	width: 50%;
	margin: 0;
	padding: 0 50px 0 0;
}

#footer #quotes p{
	font-weight: normal;
}

#footer #quotes p strong{
	font-weight: bolder;
}

 .copyright{
	font-size: 80%;
	text-align: center;
	width: 100%;
	margin: 2em auto;
	padding: 0;
}

#connectwithus{
	font-family: 'Montserrat', sans-serif;
    color:#FFF;
	background-color: #FF552E;
	padding: 10px 50px;
	font-size: 1em;
	margin: 0;
}

#tabs ul li{
	display: inline-block;
	border-right: 2px solid  black;
	padding-right: 10px;
}

#content .ui-state-active a:link{
	color: #FF552E;
}

#installBanner{
	margin: 1em auto;
}

#iosImage img{
	width: 90%;
}

#qrCode{
    float: right;
}

#qrCode img{
    width:60%;
}

.kmsembed{
    margin-top: 4.5em;
}