/* ************************************************************
===============================================================
#	 
#	Courier - 01.01.2016
#                                                                             
===============================================================
************************************************************ */

/* Imports
   ============================= */
@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,100italic,300italic,400italic,700italic);
@import url(font-awesome.min.css);
	/* Responsive */
	@import url(main1024x740.css) (min-width : 740px) and (max-width : 1023px);
	@import url(main740x500.css) (min-width : 520px) and (max-width : 739px);
	@import url(mainUnder500.css) (max-width : 519px);

@media only screen 
and (min-width : 1024px) {

/* Form Elements */
form .row { margin-bottom:20px; }
form .row.col1 { width:100%; float:none; clear:both; }
	form .row.col1 input[type=checkbox] { margin: 0px 5px 0px 0px; }
form .row.col2 { width:48%; float:left; }
form .row.col2.left { float:left; }
form .row.col2.right { float:right; }

form .form-area { margin-bottom:30px; }

form .row label { display: block; font-size: 14px; margin: 0px 0px 10px 0px; color: #333333; }
form .row label small { font-size: 12px; font-weight:500; margin-bottom:0; }

form .row input[type=text], form .row input[type=password], form .row input[type=file] { background:#FFF; border:1px solid #c5c5c5; font-size:12px; font-weight:400; font-family:'Open Sans',sans-serif; padding:10px; display:block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width:98%; height:35px; }
form .row input[type=text]:focus, form .row input[type=password]:focus, form .row input[type=file]:focus { border-color:#7f7f7f; }
	form .row input[type=text].small { width: 48%; }
	form .row input[type=text].disabled { background: #ededed; }

form .row select { background:#FFF url(../img/icon-dropdown-arrow.png) no-repeat right 10px center; border:1px solid #c5c5c5; font-size: 12px; font-weight:400; font-family:'Open Sans',sans-serif; padding:10px; display:block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width:98%; height:35px; -webkit-appearance: none;border-radius: 0; }
form .row select:focus { border-color:#7f7f7f; }
form .row select.small { width:48%; height:35px; }


form .row textarea { background:#FFF; border:1px solid #c5c5c5; font-size:0.9em; font-weight:400; font-family:'Open Sans',sans-serif; padding:10px; display:block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; min-height:150px; line-height:2.2em; }
form .row.col1 textarea { min-width:99%; max-width:99%; }
form .row.col2 textarea { min-width:100%; max-width:100%; }
form .row textarea:focus { border-color:#7f7f7f; }

input[type=text], input[type=password], textarea, select, input[type=submit], input[type=file] { outline:0; -webkit-appearance: none; border-radius:0; }
input[type=submit], input[type=button] { width: 100px; height: 30px; line-height: 28px; border: none; outline: none; font-size: 12px; text-transform: uppercase; background: #609bc8; color: #ffffff; margin: 0px 0px 0px 0px; float: right; }
	input[type=submit]:hover, input[type=button]:hover { background: #4886b4; cursor: pointer; }
	input[type=submit].alt { width: 150px; height: 35px; line-height: 33px; display: inline-block; }
	
.anotherFormButton { width: 100px; height: 30px; line-height: 30px; border: none; outline: none; font-size: 12px; text-align: center; text-transform: uppercase; background: #b44848; color: #ffffff; margin: 0px 0px 0px 0px; float: left; }
	.anotherFormButton:hover { background: #9f3737; cursor: pointer; }

/* Messages */
.success, .notification, .error { padding: 20px 30px 20px 30px; font-size: 12px; font-weight:500; margin-bottom: 10px; line-height: 24px; }
.success { background:#d7f8d7; color:#3c773c; } .notification { background:#ccd4db; color:#4a5054; } .error { background:#f8d7d7; color:#773c3c; }
	.success a, .notification a, .error a { font-weight: 600; color: #333; }

/* Customer Portal */
#portal-container { display:table; min-height:400px; margin: 30px auto 30px auto; }
	#portal-container .col-left { background:#eeeeee; width:260px; display:table-cell; float:none; padding:0; vertical-align:top; }
	#portal-container .col-main { background:#f7f7f7; width:730px; display:table-cell; float:none; padding:0; vertical-align:top; }
	#portal-container .padding { padding: 30px; }

/* Left */
	#portal-container .col-left ul#customer-portal-nav { list-style:none; margin:0px 0px 20px 0px; }
		#portal-container .col-left ul#customer-portal-nav li.sub { margin-left: 20px; display: none; }
			#portal-container .col-left ul#customer-portal-nav li.sub a { font-size: 11px; }
		#portal-container .col-left ul#customer-portal-nav li a { display:block; text-transform:uppercase; font-weight:400; line-height:normal; padding:10px 0; border-bottom:1px solid #171717; font-size: 12px; color:#171717; }
			#portal-container .col-left ul#customer-portal-nav li a:hover { color:#609bc8; }
			#portal-container .col-left ul#customer-portal-nav li a.selected { color: #609bc8; }
			#portal-container .col-left ul#customer-portal-nav li a span { margin-right:5px; font-weight:normal; }
		
		#portal-container .col-left .stepOpener { display: none; }
		#portal-container .col-left .stepHolder { margin: 0px 0px 0px 0px; }
			#portal-container .col-left .stepHolder .step { margin: 0px 0px 20px 0px; }
				#portal-container .col-left .stepHolder .step .title { font-size: 14px; color: #8abce1; font-weight: 600; text-transform: uppercase; border-bottom: 2px solid #8abce1; padding-bottom: 5px; margin: 0px 0px 10px 0px; }
				#portal-container .col-left .stepHolder .step .label { font-size: 14px; color: #171717; font-weight: 400; margin: 8px 0px 5px 0px; }
				#portal-container .col-left .stepHolder .step .input { font-size: 12px; color: #333333; font-weight: 300; line-height: 18px; }

		#portal-container .col-left .leftNote { }
			#portal-container .col-left .leftNote h7 { font-size: 18px; color: #4e4982; font-weight: 400; margin: 0px 0px 10px 0px; display: block; }
			#portal-container .col-left .leftNote p { font-size: 13px; color: #171717; line-height: 20px; }
			#portal-container .col-left .leftNote a { color: #4e4982; font-size: 13px; margin: 10px 0px 0px 0px; display: block; }
				#portal-container .col-left .leftNote a:hover { color: #171717; }

/* Main */
	#portal-container .col-main h1 { font-size: 22px; text-transform: uppercase; margin: 10px 0px 20px 0px; font-weight: 400; color: #609bc8; }
	#portal-container .col-main h2 { font-size: 16px; text-transform: uppercase; margin: 30px 0px 10px 0px; font-weight: 400; color: #609bc8; }
		#portal-container .col-main h2.moreBottom { margin-bottom: 20px; }
		#portal-container .col-main h2 span { font-size: 12px; margin-left: 10px; text-decoration: underline; text-transform: none; color: #171717; font-weight: 300; }
	#portal-container .col-main h3 { font-size: 14px; text-transform: uppercase; margin: 0px 0px 10px 0px; font-weight: 400; color: #4e4982; }
	#portal-container .col-main p { font-size: 14px; font-weight: 300; margin: 10px 0px 0px 0px; line-height: 26px; }
		#portal-container .col-main p strong { font-weight: 400; }
		#portal-container .col-main p a { text-decoration: underline; }
	#portal-container .col-main .actionButton { float: right; width: auto; height: 30px; padding: 0px 10px 0px 10px; line-height: 30px; font-size: 12px; border: 2px solid #aaaaaa; color: #aaaaaa; text-align: center; font-weight: 600; margin-top: 5px; }
		#portal-container .col-main .actionButton:hover { border-color: #333333; color: #333333; cursor: pointer; }
		#portal-container .col-main .actionButton span { margin: 0px 5px 0px 0px; }
	#portal-container .col-main .infoBlock { margin: 20px 0px 0px 0px; padding: 20px; background: #8abce1; color: #ffffff; font-size: 13px; line-height: 20px; font-weight: 300; }
		#portal-container .col-main .infoBlock strong { font-weight: 400; text-decoration: underline; }
		
	#portal-container .col-main .paymentLogos { width: 185px; height: 30px; margin: 0px 0px 0px 20px; }
		
	#portal-container .col-main .serviceRow { width: 670px; padding: 10px 10px 10px 10px; margin: 10px 0px 10px 0px; }
		#portal-container .col-main .serviceRow:hover, #portal-container .col-main .serviceRow.selected { background: #ededed; }
			#portal-container .col-main .serviceRow.selected .circle { background-color: #59a959; }
		#portal-container .col-main .serviceRow .circle { float: left; width: 80px; height: 80px; -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; background: #4e4982; color: #ffffff; font-size: 30px; line-height: 80px; text-align: center; }
		#portal-container .col-main .serviceRow .details { width: 420px; float: left; margin: 20px 0px 0px 20px; }
			#portal-container .col-main .serviceRow .details .heading { font-size: 18px; color: #171717; font-weight: 400; }
			#portal-container .col-main .serviceRow .details .desc { color: #5a5a5a; font-size: 14px; margin: 10px 0px 0px 0px; font-weight: 300; }
		#portal-container .col-main .serviceRow .price { width: 150px; float: right; font-size: 20px; color: #8abce1; text-align: right; margin: 20px 0px 0px 0px; }
			#portal-container .col-main .serviceRow .price .note { font-size: 13px; color: #171717; margin: 10px 0px 0px 0px; font-weight: 300; }
				#portal-container .col-main .serviceRow .price .note strong { font-weight: 400; }
				
		#portal-container .col-main .priceReview { width: 280px; margin: 0px 0px 20px 0px; }
			#portal-container .col-main .priceReview .row { border-bottom: 1px solid #cccccc; padding: 10px 0px 10px 0px; font-size: 14px; font-weight: 600; }
				#portal-container .col-main .priceReview .row .amount { float: right; font-weight: 400; }
				
		/* Table Stuff */
		table.dataTable tr.red td { background: #f8d7d7; }
		
		.totalHolder { width: 200px; float: right; }
			.totalHolder .totalCol { width: 180px; height: 40px; line-height: 40px; border-bottom: 1px solid #cccccc; text-align: right; font-size: 12px; padding: 0px 20px 0px 0px; }
				.totalHolder .totalCol .heading { float: left; font-size: 12px; height: 40px; line-height: 43px; color: #777777; }
				 
				.totalHolder .totalCol.main { font-size: 14px; font-weight: 600; }
				
			.totalHolder .paidButton { margin: 20px 0px 0px 0px; width: 200px; height: 40px; line-height: 38px; color: #ffffff; background: #56af64; text-align: center; font-size: 13px; cursor: pointer; text-transform: none; }
				.totalHolder .paidButton:hover { background: #44a353; }
					
	/* Login */
	#portal-container .col-main .loginBox { margin: 30px 0px 0px 0px; }
		#portal-container .col-main .loginBox .inputCont { width: 330px; }
			#portal-container .col-main .loginBox .inputCont label { display: block; font-size: 14px; margin: 0px 0px 10px 0px; }
			#portal-container .col-main .loginBox .inputCont input[type=text], #portal-container .col-main .loginBox .inputCont input[type=password] { width: 288px; height: 28px; border: 1px solid #cccccc; }
				#portal-container .col-main .loginBox .inputCont input[type=text]:focus, #portal-container .col-main .loginBox .inputCont input[type=password]:focus { border-color: #171717; }
		#portal-container .col-main .loginBox input[type=submit] { width: 100px; height: 30px; line-height: 28px; border: none; outline: none; font-size: 12px; text-transform: uppercase; background: #609bc8; color: #ffffff; margin: 20px 0px 0px 0px; }
			#portal-container .col-main .loginBox input[type=submit]:hover { background: #4886b4; cursor: pointer; }

/* Dashboard */
#portal-container .dashboard-box { display:block; background:#FFF; border:1px solid #FFF; padding:20px; float:left; margin-right:20px; max-width:200px; min-height:140px; }
	#portal-container .dashboard-box:hover { border-color:#BBBBBB; }
	#portal-container .dashboard-box p { margin-bottom: 0; color: #333; font-size: 12px; }
	
/* My Account */
#portal-container .account-box { display:block; background:#FFF; border:1px solid #FFF; float:left; margin:0 5% 20px 0; width:47%; min-height:162px; }
#portal-container .account-box:hover { border-color:#BBBBBB; }
#portal-container .account-box p { margin-bottom:0; color:#333; }

.status-container .row { margin:0; padding:20px; width:auto !important; }
.status-container .row .left { width:65%; }
.status-container .row .right { width:30%; }
.status-container .row.even {background:#E6E6E6; }

}