@charset "utf-8";

body {
	font-family: 'Open Sans', sans-serif;
	font-size:16px;
	color:#313131;
    background-color:#f7f7f7;
	/*background-color:#fffaec;*/
}

* {
	box-sizing:border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-webkit-appearance:none;
}

a img {border:none !important;}

a {color: #ee3124;}

/*   Typography
=====================================*/

.light {font-weight:300 !important;}
.thin {font-weight: 400 !important;}
.thick {font-weight: 700 !important;}



/*   Utilites
=====================================*/

.cls {clear:both; content:"'"; visibility:hidden; display:block; height:1px;}
.clearleft {clear:left;}
.clearright {clear:right;}
.spacer {clear:both; float:none; height:1px; border-top:1px solid #eee; margin:12px auto;}
.spacer-invis { clear:both; float:none; height:1px; margin:24px auto; }
.spacer-tiny { clear:both; float:none; height:1px; margin:10px auto; }
.txt-spacer{clear:both; float:none; height:1px; margin:2px auto; }
.wrapper {width:100%;}
.condenced {margin-top:0; margin-bottom:0;}
.center {margin-left:auto; margin-right:auto;}
.txt-center {text-align:center;}
.txt-left {text-align:left;}
.txt-right {text-align:right;}
.txt-j {text-align:justify;}
.thin {font-weight: 300 !important;}
.thick {font-weight:bold;}
.normal {font-weight:normal !important;}
.floatleft {float:left !important;}
.floatright {float:right !important;}
.unselectable {	-moz-user-select: none;	-webkit-user-select: none;	user-select: none; }
.relative {position:relative;}
.block {display:block;}
.iblock {display:inline-block;}
.uppercase {text-transform:uppercase;}
.capitalize {text-transform:capitalize;}
.marginer {margin:24px 0;}
.marginer_large {margin:48px 0;}
.shaded {background-color:#fafafa;}
.hashed {color:#999;}


/*  Colors 
================================================*/

.orange {color : #fd890d !important;}
.op_black { background-color: rgba(0,0,0,0.46) !important;}
.red {color: #ff5656 !important;}
.brown {color:#7d6462 !important;}
.yellow {color :#fefb00 !important;}
.white {color:#ffffff !important;}
.black {color:#222 !important;}

.green {color:#16a085 !important;}
.navy {color: #2c3e50 !important;}
.blue {color: #3498db !important;}
.silver {color:#bdc3c7 !important;}


input[type="submit"]:hover {cursor:pointer;}

/** fancy shit
======================================================= */
::-moz-selection{ background: #e10101; color:#fff; text-shadow: none; }
::selection { background: #e10101; color:#fff; text-shadow: none; } 

.thick-font {font-family:"BebasNeue-Bold",Helvetica,Arial,Verdana,Trebuchet MS,sans-serif;}

.my-well {background-color:white; border:#fefefe;}

.link {display:block; width:14px; height:16px; background-image:url(../assets/link.png); background-position:0 -16px;}
.link:hover {background-position:0 0;}


/* header 
==========================================================*/
.header_strip {height:6px; display:block; background-color:#333; border-bottom:1px solid white;}

/* Sidebar
======================================================*/
.sidebar {position:fixed; top:0; background-color:#333; z-index:10000; width:320px; color:#eee; padding:0 20px;}
.sidebar-padding {display:block; width:100%; height:1px; margin-top:80px;}
.side_con{			transition: opacity .55s ease-in-out;
			-moz-transition: opacity .55s ease-in-out;
			-webkit-transition: opacity .55s ease-in-out; 
			-o-transition: opacity .55s ease-in-out; 
			width:280px;
}
.sidebar h2 {text-transform:uppercase; font-size:16pt; margin-bottom:8px; richness:rich; color:#fff;}
.sidebar h4 {font-size:13px; font-weight:400; margin:0;}

.sidebar .spacer{width:100%; clear:both; height:1px; border:none; border-bottom:1px solid #eee; background-color:#111; margin:18px auto;}

.assessor {display:block; width:100%;}
.assessor-thumb img {border-radius:500px; max-width:100%;}

.assessor .contact {margin-top:8px;}

.sidebar table {width:100%; height:80px; border-collapse:collapse; vertical-align:middle; margin-top:2px; margin-bottom:2px;}
.sidebar table h3 {font-size:16px; text-align:left;}
.sidebar table h3 a{text-decoration:none; color:inherit;}
.menu_spacer {height:1px; display:block; width:100%; border-bottom:1px solid #444;}
.sidebar table tr:hover {background-color:#ff5656; cursor:pointer;}
.sidebar table td {vertical-align:middle; padding:12px;}

.icon_con {width:30px;}
.status_con {width:16px;}

/* Tooltips
==================================================*/

/** LEFT TOOLTIP **/
a.tooltips {
  position: relative;
  display: inline-block;
  width:100%;
  height:100%;

}
a.tooltips span {
  position: absolute;
  width:130px;
  color: #eee;
  background: #222;
  height: 50px;
  line-height: 50px;
  text-align: center;
  visibility: hidden;
  border-radius: 5px;
  font-size:0.8em;
  box-shadow:0 0 5px rgba(0,0,0,0.3);
}
a.tooltips span:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -8px;
  width: 0; height: 0;
  border-right: 8px solid #222;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
a:hover.tooltips span {
  visibility: visible;
  opacity: 0.95;
  left: 100%;
  top: 50%;
  margin-top: -25px;
  margin-left: 20px;
  z-index: 999;
}

/** Top Tooltip **/

a.tooltip_t {
  position: relative;
  display: inline;
}
a.tooltip_t span {
  position: absolute;
  width:300px;
  color: #eee;
  background: #222;
  height: 30px;
  line-height: 30px;
  text-align: center;
  visibility: hidden;
  border-radius: 6px;
  font-size:0.9em;
  box-shadow:0 0 5px rgba(0,0,0,0.3);
}
a.tooltip_t span:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  width: 0; height: 0;
  border-top: 8px solid #222;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}
a:hover.tooltip_t span {
  visibility: visible;
  opacity: 1;
  bottom: 52px;
  left: 1%;
  margin-left: -76px;
  z-index: 999;
}




/* the course name info */

a.tooltip_cname {
  position: relative;
  display: inline;
  color:inherit;
}
a.tooltip_cname span {
  position: absolute;
  width:300px;
  color: #eee;
  background: #111;
  text-align: center;
  visibility: hidden;
  border-radius: 6px;
  font-size:0.9em;
  box-shadow:0 0 5px rgba(0,0,0,0.4);
  line-height:18px;
  padding:8px;
}
a.tooltip_cname span:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  width: 0; height: 0;
  border-top: 8px solid #222;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}
a:hover.tooltip_cname span {
  visibility: visible;
  opacity: 1;
  bottom: 30px;
  left: 50%;
  margin-left: -150px;
  z-index: 999;
}


/* bottom tooltip */

a.tooltips_bot {
  position: relative;
  display: inline;
}
a.tooltips_bot span {
  position: absolute;
  width:150px;
  color: #FFFFFF;
  background: #111;
  height: 30px;
  line-height: 30px;
  text-align: center;
  visibility: hidden;
  border-radius: 5px;
  font-size:0.8em;
  box-shadow:0 0 5px rgba(0,0,0,0.2);
  
}
a.tooltips_bot span:after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -8px;
  width: 0; height: 0;
  border-bottom: 8px solid #111;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}
a:hover.tooltips_bot span {
  visibility: visible;
  opacity: 0.8;
  top: 42px;
  left: 50%;
  margin-left: -75px;
  z-index: 999;
}

/* Skeleton
=========================================================*/

.row {clear:both;}
.row .col {float:left; display:block;}
.row .third {width:33%; padding:2% 1.5%;}
.row .fourth {width:25%; padding: 2% 1%;}
.row .half {width:50%; padding:2%;}
.row .two-thirds {width:66%; padding:2% 1.5%;}





/* Typography
==========================================================*/

.dark-headline {font-weight:400; color:#222; font-size:24px;}

.btn, .label, .narrow  {    
	font-family:"pt-sans-narrow",sans-serif;
	font-size:1.5rem;
	font-weight:normal;
	}

/* Typography
==========================================================*/
footer {
	font-size:0.8em;
}


/* Custom Stuff
===========================================================*/

.buttonised {
	display:block; border:1px solid #eee; padding:24px; background-color:white;
}

.buttonised:hover, .buttonised:focus {border:1px solid #777; cursor:pointer; box-shadow:0 0 3px rgba(0,0,0,0.2); }

.buttonised-btn {
	display:block; border:1px solid #333; padding:24px; background-color:#333; text-decoration:none !important; color:#fff;
}

.buttonised-btn:hover, .buttonised-btn:focus {border:1px solid #777; cursor:pointer; box-shadow:0 0 5px rgba(0,0,0,0.2); color:white; background-color:#444 }


/* Search Client Page
===========================================================*/

.custom-search {
	display:block;
	width:100%;
	background:url(../assets/icons/glass.png) no-repeat right;
	padding:18px;
	border:1px solid #eee;
	font-size:1.2em;
}

.custom-search:focus {border:1px solid #777; box-shadow:0 0 3px rgba(0,0,0,0.2); }

.client-search-result-info {padding:12px 24px; border:1px solid #ddd; margin-top:24px; background-color:#f8f8f8}
.client-search-result-info .client-name{ line-height:1; margin-top:0;}

.client-search-result-info:hover {background-color:#fdfdfd; border:1px solid #aaa;}

.view-client-details {position:absolute; top:32px; right:28px; display:inline-block;}
.view-client-details a {color:#999; margin-left:12px}
.view-client-details a:hover {color:inherit;}

/* Sectionised content
============================================================*/
.section {
	display:block;
	padding:24px 0;
}
.section-green {
	background-color:#4bd6c1;
	color:white ;
}
.section-blue {
	background-color:#80ddff;
	color:white ;
}
.section-red {
	background-color:#ff5e5e;
	color:white ;
}

.section-green .input, .section-blue .input, .section-red .input { border-color:white; color:#444;}
.section-grey {
	background-color:#f2f2f2;
}

/* Client info page
============================================================*/

.section-title {
padding:12px 24px;
border-left: 2px solid #ff5e5e;
}

.qual p {
	font-size:0.9em;
	margin:5px auto;
}
.qual-title {
padding:12px 18px;
border-left: 2px solid #80ddff;
font-weight:700;
}

.info-label {
	padding-left:24px;
	display:inline-block;
	color:#999;
	min-width:150px;
}
.payment-info-label {
	display:inline-block;
	color:#999;
	min-width:100px;
}


/* Add Client
============================================================*/

.big-input {
	padding:18px;
	border:1px solid #eee;
	font-size:1.2em;
}

.big-search:focus {border:1px solid #777; box-shadow:0 0 3px rgba(0,0,0,0.2); }



/* Utilities
============================================================*/

.top-marginer-8 {margin-top:8px;}
.top-marginer-20 {margin-top:20px;}

.input { border:1px solid #ccc; background-color:#fcfcfc;}
.input:focus { border:1px solid #777; box-shadow:0 0 3px rgba(0,0,0,0.2); }
.icon-margin-8 { margin-right:8px;}
.icon-margin-12 { margin-right:12px;}
.btn {padding:6px 18px;}
.icon-container-96 {display:inline-block; width:96px; height:96px; text-align:center; line-height:96px; border-radius:50px;}

.readonly {cursor:not-allowed;}

h1, h2, h3, h4 {margin-top:15px; margin-bottom:15px;}
label {font-weight:normal; font-size:1.2em;}

.selected, selected:hover { box-shadow:0 0 3px rgba(252,40,43,0.5) !important; border:1px solid rgba(252,40,43, 0.4) !important; color: white ; background-color: #E10101 !important }
input[type="radio"] {display:none;}

#cover { position:absolute; left:0; top:0; width:100%; display:block; z-index:99999; /*background-color:rgba(255,255,255,0.95)*/ background-color:#f7f7f7;}

.bigger {font-size:1.17em;}


/******* file upload style *******************/

#fileElem {
  visibility: hidden;
  width: 0;
  height: 0;
}
#fileSelect {
  /* The visible button*/
  background-color:transparent;
  border:1px solid #555;
  font-weight:400;
  color:#555;
  text-align:center;
  text-transform:uppercase;
}

#fileSelect:hover {
cursor:pointer;
}

#fakeupload {
background-color:transparent;
border:none;
font-size:1.1em;
width:100%;
overflow:visible;
}

/* progress bar
==============================================*/
.prog {
	position:relative;
	width:100%;
}
.prog-line {
	position:absolute;
	top:20px;
	left:10%;
	width:80%;
	height:1px;
	border-bottom:6px solid #959595;
	display:block;
	z-index:-1;
}
	
.prog-icon {
display : inline-block;
border-radius: 50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border:5px solid #959595;
text-align:center;
height:45px;
width:45px;
max-height:100%;
background-color:#fefefe;
line-height:35px;	
color:#959595;
font-weight:bold;
font-size:1.2em;
position:relative;
}
.completed-step {
	width:35px;
	height:35px;
	display:block;
	position:absolute;
	left:0px;
	top:0px;
	background-color:#e10101;
	color:#eee;;
border-radius: 50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
line-height:30px;
border:2px solid #eee;	
z-index:10000;
}

/*  UI customisation
============================================*/
.ui-menu .ui-menu-item {font-size:1.1em;}
.ui-widget { font-family: 'Open Sans', sans-serif !important; font-size:0.9em !important; }
.ui-state-focus {background-image:none !important; background-color:#aaa !important; font-weight:normal !important; color:#000 !important;}