@import url(//fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap);

#toTop,
a,
a:hover {
	text-decoration: none
}

a,
a img {
	border: 0
}

#bg3,
#bg5,
body {
	background: #f7f7f7
}

#bg4,
#bg6 {
	background: #efefef
}

#bg4,
#bgCont4 {
	height: 630px;
	display: none
}

#bg7,
#bg77,
#bgCont7 {
	height: 70px
}

#bgCont8,
#generalCont {
	min-height: 600px;
	overflow: auto
}

#bg1,
#home,
#homeBG {
	height: 80px
}

#bgCont1:before,
#helpCnt a:after,
#topLnks a:before {
	content: ''
}

#bgCont,
#bgCont1:before,
#topLnks a:before {
	top: 0;
	position: absolute;
	left: 0
}

#bgCont,
#topLnks a:hover:before,
body,
html {
	height: 100%
}

#bgCont,
#bgCont1:before,
#home,
#homeBG,
#startDrawing,
#topLnks a:before {
	position: absolute
}

#bg4,
#bgCont4,
#home span {
	display: none
}

#helpTopics,
#srchBtn,
#startDrawing,
#toTop,
.midLnk {
	cursor: pointer
}

#copyright,
#toTopHover,
.helpL,
.midIco,
.midLnk,
.midLnk div:eq(1),
a.compassBtn {
	float: left
}

#toTop:active,
#toTop:focus,
:focus,
a,
input,
textarea {
	outline: 0
}

#bgCont8,
#bgContR1,
#commandsDiv,
#generalCont,
#routeInfo {
	overflow: auto
}

#compassToolDiv,
#gc,
#topics {
	overflow: hidden;
	position: relative
}

* {
	padding: 0;
	margin: 0
}

:root {
	--text-rendering: optimizeLegibility;
	--font-smoothing: antialiased);
}

@font-face {
	font-family: LeagueGothicRegular;
	src: url(../fonts/league_gothic-webfont.eot);
	src: url(../fonts/league_gothic-webfont.eot?#iefix) format('embedded-opentype'), url(../fonts/league_gothic-webfont.woff) format('woff'), url(../fonts/league_gothic-webfont.ttf) format('truetype'), url(../fonts/league_gothic-webfont.svg#LeagueGothicRegular) format('svg');
	font-weight: 400;
	font-style: normal
}

.clear {
	clear: both;
	width: 100%;
	line-height: 0;
	font-size: 0
}

::-moz-focus-inner {
	border: 0
}

input:-moz-placeholder,
input::-moz-placeholder {
	opacity: 1
}

#bgCont {
	width: 100%
}

#bg1 {
	background: #115B82;
	border-bottom: 10px solid #0E3F58
}

#bg2 {
	height: 414px;
	background: url(../images/bg2Slice.png)
}

#bg3 {
	height: 200px
}

#bg5 {
	height: 730px
}

#bg6 {
	height: 920px
}

#bg7 {
	background: #314559
}

#bg77 {
	background: #0e3f58;
	position: relative;
	margin-top: -70px;
	height:220px !important;
	left: 0;
	z-index: -1;
	background-image: url(/images/footerBG.webp), linear-gradient(rgba(0, 0, 0, 0.3), rgba(2, 3, 4, .9));
    background-blend-mode: overlay;	
}

#mainCont {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	position: relative
}

#bgCont1 {
	height: 90px;
	position: relative
}

#bgCont2 {
	height: 414px;
	position: relative
}

#bgCont3 {
	height: 200px;
	position: relative
}

#bgCont4 {
	position: relative
}

#bgCont5 {
	height: 730px;
	position: relative
}

#bgCont6 {
	height: 920px;
	position: relative
}

#bgCont7 {
	position: relative;
	color: #7694b3
}

#bgCont8 {
	position: relative;
	margin-bottom: 30px;
	margin-top: 60px
}

#bgContR1 {
	position: relative
}

#usingCompass {
	width: 620px;
	height: 414px;
	float: right;
	position: relative;
	background: url(../images/students-using-compass.jpg)
}

#home {
	width: 435px;
	top: 6px;
	left: 0;
	z-index: 100
}

#homeBG {
	width: 420px;
	background: url(../images/logo.png);
	top: 2px;
	left: 0
}

.rot {
	transform: rotate(360deg);
	transition: all .4s ease
}

#bgCont1:before {
	width: 80px;
	height: 80px;
	background: rgba(255, 255, 255, .7)
}

#topLnks {
	float: right;
	position: relative
}

#topLnks a {
	float: right;
	height: 40px;
	text-align: center;
	color: #DFFFFE;
	font: 11pt Roboto, arial;
	position: relative;
	transition: background .5s ease
}

#topLnks a:before {
	background: #0E3F58;
	width: 100%;
	height: 0;
	transition: height .5s ease
}

#topLnks a:hover {
	color: #f7f7f7;
	transition: background .5s ease
}

#topLnks a span {
	height: 40px;
	line-height: 40px;
	margin-left: 10px;
	margin-right: 10px;
	position: relative
}

#routeInfo {
	width: 100%;
	margin-top: 40px
}

#startDrawing {
	font: 700 14pt arial, verdna;
	color: #b72925;
	top: 40px;
	left: 120px;
	-moz-transition: all .7s;
	-webkit-transition: all .7s;
	-o-transition: all .7s;
	-ms-transition: all .7s;
	transition: all .7s;
	display: none
}

#startDrawing:hover {
	color: #24365a;
	-moz-transition: all .7s ease;
	-webkit-transition: all .7s ease;
	-o-transition: all .7s ease;
	-ms-transition: all .7s ease;
	transition: all .7s ease
}

.midLnk {
	width: 220px;
	margin: 20px 10px 0;
	height: 160px;
	-webkit-transition: background .5s ease;
	-moz-transition: background .5s ease;
	-o-transition: background .5s ease;
	transition: background .5s ease;
	padding-top: 6px
}

.midLnk:hover {
	background: #efefef;
	-webkit-transition: background .4s ease;
	-moz-transition: background .4s ease;
	-o-transition: background .4s ease;
	transition: background .4s ease
}

.midLnk span {
	color: #314559;
	font: 10pt helvetica, sans-serif;
	margin-left: 44px;
	display: block
}

.midIco {
	width: 44px;
	height: 30px;
	background-image: url(../images/sprite.png);
	background-repeat: no-repeat
}

.midLnk h3,
h3 {
	color: #bd2c30;
	font: 700 13pt helvetica, verdana, arial;
	margin: 4px
}

h3 {
	margin: 0
}

.fs {
	background-position: -146px -208px
}

.ty {
	background-position: -146px -174px
}

.os {
	background-position: -146px -144px
}

.uc {
	background-position: -146px -110px
}

#gc,
#topics {
	border-left: 10px solid #2B6361;
	background: #288B87;
	height: 43px
}

#gc h2,
#topics h1 {
	font: 26px/43px LeagueGothicRegular, arial, sans-serif;
	color: #fff;
	margin: 0 0 0 6px;
	display: block;
	float: left
}

#gc img,
#topics img {
	width: 35px;
	height: 35px;
	outline: transparent solid 1px;
	float: right;
	margin: 4px;
	-moz-transition: all .7s;
	-webkit-transition: all .7s;
	-o-transition: all .7s;
	-ms-transition: all .7s;
	transition: all .7s;
	position: relative
}

#gc {
	margin-top: 18px
}

.rot2 {
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
	-moz-transition: all .9s ease;
	-webkit-transition: all .9s ease;
	-o-transition: all .9s ease;
	-ms-transition: all .9s ease;
	transition: all .9s ease
}

.rot3 {
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	transform: rotate(360deg);
	-moz-transition: all .9s ease;
	-webkit-transition: all .9s ease;
	-o-transition: all .9s ease;
	-ms-transition: all .9s ease;
	transition: all .9s ease
}

#compassToolDiv {
	border: 10px solid #f7f7f7;
	height: 480px;
	background: #e5e3df
}

#generalCont {
	border: 10px solid #efefef;
	padding: 10px;
	color: #314559;
	font: 12pt/24px helvetica, verdana, arial
}

#generalCont h2,
.strong {
	color: #288B87;
	font: 24px/40px LeagueGothicRegular, arial, sans-serif
}

strong {
	font-size: 11pt;
	line-height: 22px;
	font-weight: 700
}

#featuresL,
.helpL {
	font: 11pt/18px helvetica, verdana, arial
}

#compassImgDiv {
	background: #fff;
	padding: 28px 0 0 46px;
	width: 500px;
	margin: 0 auto
}

#compassImgDiv img {
	width: 482px;
	height: 262px
}

#featuresL {
	color: #314559;
	margin-top: 10px
}

#featuresL li {
	padding-left: 18px;
	background: url(../images/sprite.png) -484px -215px no-repeat;
	margin-bottom: 8px
}

.helpL {
	width: 440px;
	background: #f7f7f7;
	padding: 10px;
	margin: 10px
}

#toTop,
#toTopHover {
	width: 41px;
	height: 41px;
	overflow: hidden
}

.helpL li {
	margin-bottom: 8px;
	border-bottom: 1px solid #efefef;
	padding-bottom: 6px
}

.helpL li a {
	color: #bd2c30;
	padding-left: 18px;
	background: url(../images/sprite.png) -484px -61px no-repeat;
	display: block;
	transition: color .2s ease-out, background .5s ease
}

.helpL li a:hover {
	color: #314559;
	background: url(../images/sprite.png) -484px -141px no-repeat
}

.helpL li:last-child {
	border: none;
	padding-bottom: 0
}

.lnk, .greenLnk {
	color: #bd2c30;
	transition: color .2s ease-out, background .5s ease
}

.lnk:hover{
	color: #314559
}

.greenLnk{color:#288B87}
.greenLnk:hover{color:#ab6a83}



#bgCont7 a {
	font-size:10pt;
	color: #f7f7b0;transition:.5s ease
}
#copyright {
	margin-top:20px;
	text-align:center;
	font: 9pt/22px Roboto, verdana, arial
}
#copyright a{font-size:9pt !important}
 
#bgCont7 a:hover {
	color:#fff
}

.footerLnks {
	float: right;
	position: relative;
	margin-left:40px;
	top: 10px;
	font: 9pt helvetica, verdana, arial
}
.footerLnks a{display:block;margin:15px}
#siteFooterInfo{font: 10pt/20px Roboto, verdana;color:#fff}
#siteDesc{width: 320px; height: 160px; background: rgba(3, 3, 3, 0.1); margin:26px 0; float: left;padding:10px}
#toTop {
	display: none;
	position: fixed;
	right: 50%;
	bottom: 41px;
	text-indent: -999px;
	z-index: 1005;
	background: url(../images/sprite.png) -250px -110px no-repeat
}

#toTopHover {
	background: url(../images/sprite.png) -250px -151px no-repeat;
	display: block;
	opacity: 0;
	-moz-opacity: 0;
	filter: alpha(opacity=0)
}

a.compassBtn {
	margin-right: 10px;
	border: 1px solid #84bbf3;
	-moz-box-shadow: inset 0 1px 0 0 #bbdaf7;
	-webkit-box-shadow: inset 0 1px 0 0 #bbdaf7;
	box-shadow: inset 0 1px 0 0 #bbdaf7;
	background: #79bbff;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(.05, #79bbff), color-stop(1, #378de5));
	background: -moz-linear-gradient(center top, #79bbff 5%, #378de5 100%);
	background: -ms-linear-gradient(top, #79bbff, #378de5);
	background: -o-linear-gradient(top, #79bbff, #378de5);
	background: linear-gradient(top, #79bbff, #378de5);
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	display: inline-block;
	color: #fff;
	font-family: Arial;
	font-size: 14px;
	font-weight: 700;
	padding: 16px 14px;
	text-shadow: 1px 1px 3px #528ecc;
	-moz-transition: all .7s ease !important;
	-webkit-transition: all .7s ease !important;
	-o-transition: all .7s ease !important;
	-ms-transition: all .7s ease !important;
	transition: all .7s ease !important
}

a.compassBtn:hover {
	background: #378de5;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(.05, #378de5), color-stop(1, #79bbff));
	background: -moz-linear-gradient(center top, #378de5 5%, #79bbff 100%);
	background: -ms-linear-gradient(top, #378de5, #79bbff);
	background: -o-linear-gradient(top, #378de5, #79bbff);
	background: linear-gradient(top, #378de5, #79bbff)
}

.btn,
input[type=submit] {
	float: right;
	margin: 5px 0;
	border-radius: 4px;
	background: #288B87;
	display: inline-block;
	color: #fff;
	font: 10pt Roboto, arial;
	padding: 10px 24px;
	text-align: center;
	border: none;
	cursor: pointer;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	-ms-transition: all .5s;
	transition: all .5s
}

.btn:hover,
input[type=submit]:hover {
	background: #2B6361
}

#bigMaskDiv,
#mask {
	background: url(../images/modalOverlay.png);
	position: absolute;
	top: 0;
	z-index: 1009
}

#helpContWarpper {
	padding: 2px;
	width: 360px;
	height: 300px;
	font: 400 14px arial, helvetica, sans-serif;
	color: #4f4f4f;
	overflow: hidden;
	display: block
}

#helpCont {
	position: relative;
	overflow: hidden;
	width: auto;
	height: 300px;
	padding-right: 12px
}

.helpT {
	font: 11pt helvetica, verdana, arial;
	float: left;
	width: 350px
}

#bigMaskDiv,
#compassDiv,
#map {
	width: 940px;
	height: 480px
}

.helpT li {
	margin-bottom: 4px;
	padding-bottom: 4px
}

.helpT li a {
	display: block
}

#selectWarp,
#selectWarp1,
#selectWarp2,
#selectWarpTrans {
	display: inline-block;
	right: 50%;
	position: relative;
	top: 50%;
	margin: -60px auto 0;
	float: left
}

.activeHelp {
	font-style: italic
}

#mapSymbolsMenu {
	width: 150px;
	margin: 0;
	border: 5px solid #c1373a;
	position: absolute;
	top: 20px;
	display: none
}

#mapSymbolsMenuT {
	width: 250px;
	margin: 0 0 0 16px;
	display: none;
	background: #efefef;
	padding-top: 6px;
	padding-left: 6px
}

#mapSymbolsMenuT a {
	color: #d34346 !important;
	background: 0 0 !important;
	padding-left: 0 !important
}

#mapSymbolsMenuT a:hover {
	color: #314559 !important
}

#canvasLoader {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1010;
	width: 94px;
	height: 94px;
	margin-top: -47px;
	margin-left: -47px
}

#compassDiv {
	z-index: 0;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/blank.png);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	-khtml-opacity: 0;
	opacity: 0
}

#map {
	margin: 0;
	padding: 0;
	z-index: 99
}

#bigMaskDiv {
	margin: 0;
	padding: 0;
	left: 0
}

#mask {
	left: 10px;
	bottom: 10px;
	right: 10px
}

#commandsDiv {
	background: #f7f7f7;
	padding: 0 10px 10px;
	position: relative
}

#selectBox1 {
	z-index: 1010;
	position: absolute;
	top: 0;
	left: 0;
	width: 620px;
	height: 140px;
	overflow: hidden
}

#selectWarpTrans {
	height: 120px
}

#newRoutesMask,
#selectBox {
	z-index: 1010;
	position: absolute;
	top: 0;
	left: 0;
	width: 940px;
	height: 480px;
	display: none
}

.selectCont {
	float: left;
	left: 50%;
	position: relative;
	height: 100%
}

#keywords,
#searchCont,
#searchDiv {
	float: right
}

#selectWarp,
#selectWarp1,
#selectWarp2 {
	height: 120px;
	background: #fff;
	border: 1px solid #dedede;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: 0 0 8px rgba(50, 50, 50, .45);
	-moz-box-shadow: 0 0 8px rgba(50, 50, 50, .45);
	box-shadow: 0 0 8px rgba(50, 50, 50, .45)
}

#selectWarp1 {
	height: 110px;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	opacity: .5;
	-webkit-opacity: .5;
	-moz-opacity: .5;
	filter: alpha(opacity=50)
}

#selectWarp2 {
	height: 160px;
	margin-top: -80px
}

#quesDiv2,
#quesInfoDiv,
.quesInfoDiv1 {
	background: url(../images/sprite.png) -194px -106px;
	width: 26px;
	height: 26px;
	margin: 4px
}

#quesInfoDiv {
	background-position: -194px -135px
}

#plansBtnsDiv {
	margin-left: 25px;
	margin-right: 20px;
	width: 400px
}

#plansBtnsDiv2 {
	margin-left: 100px
}

#newRoutesDiv {
	margin-left: 64px
}

#plansBtnsDiv div,
#plansBtnsDiv2 div {
	float: left
}

#newRoutesQues,
#startDiv,
#startDiv2 {
	font: 400 10pt verdana, arial;
	color: #314559;
	display: none;
	margin-left: 30px;
	margin-right: 10px
}

#newRoutesQues,
#searchCont,
.centerImg {
	display: block
}

#OKBtn,
#OKBtn2 {
	position: absolute;
	bottom: 20px;
	right: 0;
	display: none
}

.helpLnk {
	position: absolute;
	top: 8px;
	right: 8px;
	color: #345088;
	font: 400 8pt verdana, arial
}

#helpHandler,
#srchFrm {
	right: 0;
	position: absolute
}

.helpLnk:hover {
	color: #be2a2a
}

#searchPanel {
	position: absolute;
	right: 50px;
	top: 4px;
	font: 10pt helvetica, verdana, arial;
	color: #2c3e50;
	background: url(../images/sprite.png) -432px -378px no-repeat #f5f5f5;
	padding-left: 70px;
	padding-top: 3px;
	border-left: 4px solid #f5f5f5;
	height: 32px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px
}

#searchPanel span {
	font: 20px LeagueGothicRegular, arial;
	color: #4b6177
}

#searchPMask {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1009;
	background: url(../images/modalOverlay.png)
}

input[type=text],
textarea {
	height: 20px;
	padding: 4px;
	border: 1px solid #E5E5E5;
	color: #4b6177;
	font: 400 13px/100% Verdana, Tahoma, sans-serif;
	width: 200px;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ3JSIgc3RvcC1jb2xvcj0iI2Y2ZjZmNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZGVkZWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top, #fff 0, #f6f6f6 47%, #ededed 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(47%, #f6f6f6), color-stop(100%, #ededed));
	background: -webkit-linear-gradient(top, #fff 0, #f6f6f6 47%, #ededed 100%);
	background: -o-linear-gradient(top, #fff 0, #f6f6f6 47%, #ededed 100%);
	background: -ms-linear-gradient(top, #fff 0, #f6f6f6 47%, #ededed 100%);
	background: linear-gradient(to bottom, #fff 0, #f6f6f6 47%, #ededed 100%);
	box-shadow: rgba(0, 0, 0, .1) 0 0 8px;
	-moz-box-shadow: rgba(0, 0, 0, .1) 0 0 8px;
	-webkit-box-shadow: rgba(0, 0, 0, .1) 0 0 8px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	-moz-transition: all .7s;
	-webkit-transition: all .7s;
	-o-transition: all .7s;
	-ms-transition: all .7s;
	transition: all .7s
}

textarea {
	height: 100px;
	max-height: 100px;
	width: 500px;
	max-width: 500px
}

input[type=text]:hover,
textarea:hover {
	border-color: #C9C9C9;
	box-shadow: rgba(0, 0, 0, .15) 0 0 8px;
	-moz-box-shadow: rgba(0, 0, 0, .15) 0 0 8px;
	-webkit-box-shadow: rgba(0, 0, 0, .15) 0 0 8px
}

input[type=text]:focus,
textarea:focus {
	background: #ededed
}

#importRouteFrame,
#myRoutesFrame,
#printFrame,
#saveRouteFrame {
	display: none;
	position: absolute;
	left: 50%;
	margin-left: -260px;
	z-index: 100001;
	top: 50%;
	margin-top: -220px;
	width: 520px;
	height: 440px;
	overflow-x: hidden;
	overflow-x: auto;
	border: 1px solid #dedede;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: 0 0 8px rgba(50, 50, 50, .45);
	-moz-box-shadow: 0 0 8px rgba(50, 50, 50, .45);
	box-shadow: 0 0 8px rgba(50, 50, 50, .45)
}

.centerImg {
	margin: 8px auto
}

.centerTxt {
	width: 100%;
	text-align: center
}

#srchFrm {
	top: 44px
}

#keywords {
	margin-top: 4px;
	width: 198px;
	background: 0 0;
	height: 18px;
	border: 1px solid #E8E8E8;
	color: #fff;
	padding-left: 6px;
	padding-right: 28px;
	font: 10pt/26px Roboto, verdana;
	border-radius: 0;
	transition: all ease .5s
}

#keywords:focus {
	border-color: #fff;
	background: #0E3F58
}

#keywords:focus+#srchBtn,
#srchBtn:hover {
	background-color: #fff
}

#searchCont {
	position: relative;
	width: 100%
}

#srchBtn {
	position: absolute;
	right: 1px;
	top: 5px;
	height: 26px;
	width: 28px;
	border: none;
	background: url(../images/sprite.png) -36px -102px #E8E8E8;
	margin: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
	padding: 0
}

#helpHandler {
	top: 101px;
	z-index: 1000
}

#helpTopics {
	border-left: 8px solid #0F2D3C;
	background: #0E3F58;
	color: #fff;
	font: 22px LeagueGothicRegular, arial;
	padding: 6px
}

#helpCnt {
	background: #445668;
	border-left: 8px solid #2e3b47;
	padding: 12px;
	color: #fff;
	font: 15px helvetica, verdana, arial;
	display: none
}

#helpCnt a {
	position: relative;
	color: #fff;
	padding-left: 16px;
	font: 15px/18px helvetica, verdana, arial;
	-o-transition: .5s;
	-o-transition: color .5s ease-out, background .5s ease;
	-ms-transition: color .5s ease-out, background .5s ease;
	-moz-transition: color .5s ease-out, background .5s ease;
	-webkit-transition: color .5s ease-out, background .5s ease;
	transition: color .2s ease-out, background .5s ease
}

#helpCnt a:after {
	background: url(../images/sprite.png) -167px -257px;
	width: 13px;
	height: 17px;
	position: absolute;
	left: 0;
	top: 0;
	transition: background .5s ease
}

#helpCnt a:hover {
	color: #5BD6D1
}

#helpCnt a:hover:after {
	background: url(../images/sprite.png) -167px -237px
}

#helpCnt a.activeHelp {
	font-style: italic
}

.helpAct {
	background: #288B87 !important;
	border-color: #2B6361 !important
}

#purp {
	position: absolute;
	bottom: 10px;
	left: 0;
	width: 330px
}

#purpHD {
	background: #288B87;
	border-left: 10px solid #2B6361;
	color: #fff;
	font: 24px LeagueGothicRegular, arial;
	padding: 6px
}

#purpCont {
	background: #314559;
	border-left: 10px solid #22303e;
	padding: 4px;
	color: #fff;
	font: 15px/18px Roboto, verdana, arial
}

table ul {
	margin-left: 20px !important
}

input:-webkit-autofill,
input:-webkit-autofill:active,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover {
	background-color: #FFF !important;
	color: #555 !important;
	-webkit-box-shadow: 0 0 0 1000px #fff inset !important;
	-webkit-text-fill-color: #555 !important
}