/*************************************
* Author: Jordon Greene
* Company: For Liberty Communications
* Copyright 2014
* 
* Krissi.com
**************************************
* CSS STYLE SHEET PRIMARY
**************************************/

body
{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: 100vh;
	padding: 0px;
	margin: 0px;
	background-color: rgba(255,255,255,1);
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/******************
 * ACCENT STYLES *
 ******************/
em { font-style:italic; }
strong, label {
	font-weight: 700;
}
a img { border: 0px; }

/***********************
 * QUICK FLOAT OPTIONS *
 ***********************/
.floatRight { float: right !important; }
.floatLeft { float: left !important; }
.floatNone { float: none !important; }
.floatRightToLeft { float: right !important; }


/**************************
 * QUICK POSITION OPTIONS *
 **************************/
.relative { position: relative !important; }
.absolute { position: absolute !important; }


/*************************
 * QUICK DISPLAY OPTIONS *
 *************************/
.displayBlock { display: block !important; }
.displayHidden { display: none !important; }
.displayInline { display: inline !important; }
.displayFlex { display: flex !important; }
.flex_Wrap { flex-wrap: wrap !important; }
.flex_NoWrap { flex-wrap: nowrap !important; }
.flex_JustifyCenter { justify-content: center !important; }
.flex_JustifyEvenly { justify-content: space-evenly !important; }
.flex_JustifyBetween { justify-content: space-between !important; }
.overflow { overflow: hidden !important; }


/***********************
 * QUICK CLEAR OPTIONS *
 **********************/
.clear {	clear: both !important; }
.clearRight { clear: right !important; }
.clearLeft {	clear: left !important; }
.clearNone { clear: none !important; }


/*****************
 * QUICK MARGINS *
 ****************/
.noBottomMargin { margin-bottom: 0 !important; }
.noTopMargin { margin-top: 0 !important; }
.noRightMargin { margin-right: 0 !important; }
.noLeftMargin { margin-left: 0 !important; }


/*****************
 * QUICK PADDING *
 ****************/
.noBottomPadding { padding-bottom: 0 !important; }
.noTopPadding { padding-top: 0 !important; }
.noLeftPadding { padding-left: 0 !important; }
.noRightPadding { padding-right: 0 !important; }


/*********************
 * BACKGROUND COLORS *
 ********************/
 

/***********
 * BORDERS *
 **********/


/**************
 * FONT FIXES *
 **************/
.textAlignLeft { text-align: left !important; }
.textAlignCenter { text-align: center !important; }
.textAlignRight { text-align: right !important; }
.textAlignJustify { text-align: justify !important; }
.toUppercase{ text-transform: uppercase !important; }
.lineHeight_Small { line-height: 110% !important; }
.lineHeight_Medium { line-height: 140% !important; }
.noWrap { white-space: nowrap !important; }
.hideHorizOverflow { overflow-x: hidden !important; }
.smallText { font-size: 13px !important; }
.bold { font-weight: 500 !important; }



/***************
 * FONT COLORS *
 **************/
.fRed, .errors { color: #db1414 !important; }
.fGreen { color: #2ea080 !important; }
.fOrange { color: #be7d13 !important; }
		
		
/******************
 * GENERAL STYLES *
 ******************/

img, header, section, footer, main, wrapper-full, #footerLogo, #headerLogo, table-header, table-row, table-cell, maint-header {
	display: block;
}

required-field {
	display: inline;
}

header, nav, footer, main, hr, img, wrapper-full, table-header, table-row, maint-header {
	width: 100%;
}

header, nav, footer, main, hr, h1, h2, h3, h4, h5, h6, p, wrapper-full, #footerLogo, #headerLogo, table-header, table-row, table-cell, maint-header {
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
}

header, footer, main, nav, hr, wrapper-full, #footerLogo, #headerLogo, table-header, table-row, table-cell, maint-header {
	float: left;
}

/*****************
 * CURSORS FIXES *
 ****************/
.cursorDefault { cursor: default !important; }
button, a, news-box {
	cursor: pointer;
}

required-field {
	font-weight: 600;
	color: #db1414;
}

header {
	position: relative;
	padding: 2rem 3rem 2rem 3rem;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
	
	#headerLogo {
		width: 40%;
		max-width: 600px;
		cursor: pointer;
	}
	
	#headerLogo:hover {
		opacity: 0.9;
	}
	
	nav-login, nav-dashboard, nav-logout {
		position: absolute;
		top: 1.5rem;
		right: 1.5rem;
		cursor: pointer;
		color:#00afef;
		padding: 0.25rem;
	}
		
		nav-dashboard {
			right: 3.25rem;
		}
	
		nav-login > span, nav-dashboard > span , nav-logout > span {
			font-size: 18px;
		}
		
		nav-login:hover, nav-dashboard:hover , nav-logout:hover {
			color: #009ad2;
		}
	
main {
	padding: 2rem 9rem;
	margin-left: auto;
	margin-right: auto;
	background-color: transparent;
}
	
	main#homeShortner {
		padding: 5rem 9rem;
	}

	flex-justify-column {
		width: 100%;
		float: left;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

footer {
	width: 100%;
	background: #F2F2F2;
	padding: 3rem 5rem 3rem 5rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

/******************
* FONT FORMATTING *
******************/

h1, h2, h3, h4, h5, h6, p, ul, li, nav, a, table-cell {
	font-family: 'WantedSans', Arial, Sans-serif;
	text-decoration: none;
	font-weight: 400;
	text-align: left;
}

li:not(:last-child) {
	margin-bottom: 3px;
}

a:link, a:visited, a:hover, a:active{
	text-decoration: none;
}

p, ul, li, table-cell {
	font-size: 16px;
	color: rgba(89,89,89,1);
	line-height: 160%;
	margin-bottom: 16px;
	word-wrap: break-word;
	text-align: justify;
}

	p:last-child, h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, table-cell {
		margin-bottom: 0 !important;
	}
	
	footer > p {
		color: #797979;
		font-size: 14px;
	}

h1, h2, h3, h4, h5, h6 {
	line-height: 120%;
	text-align: left;
}

h1 {
    color: #0098d0;
	font-size: 28px;
    text-align: center;
    margin-bottom: 0;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

h2, h3 {
	color: #565656;
	font-weight: 600;
	margin-bottom: 0.5rem;
}

h2 {
	font-size: 22px;
}

h3 {
	font-size: 18px;
}



/*******************
 * LINK FORMATTING *
 *******************/

 
a,a:link, a:visited, a:link h1, a:visited h1 {
	color: #00afef;
	font-weight: 600;
}

a:hover, a:active, a:hover h1, a:active h1 {
	color: #009ad2;
}

a.fGreen:hover, a.fGreen:active {
	color: #db1414 !important;
}

a.fRed:hover, a.fRed:active {
	color: #2ea080 !important;
}

a.fOrange:hover, a.fOrange:active {
	color: #ea9e21 !important;
}


/******************
* TABLE STRUCTURE *
******************/

table-header, table-row {
	clear: both;
}

table-header {
	background: #077da9;
}

table-row {
	background: #ffffff;
}

	table-row:nth-child(2n) {
		background: #f2fbff;
	}

	table-row:hover {
		background: #effaff;
	}
	
	table-cell {
		min-height: 5px;
		padding: 0.3rem 0.5rem;
	}
	
	table-header > table-cell {
		color: #ffffff;
		font-weight: 600;
	}


/**************
* FORM FIELDS *
**************/

input, select, textarea, button {
	font-family: 'WantedSans', Arial, Sans-serif;
}

input[type=checkbox], input[type=radio] {
	display: inline;
	width: auto;
	margin-bottom: auto;
}

input[type=text], input[type=password], input[type=number], select {
	font-size: 17px;
	width: 100%;
	padding: 0.75rem;
    width: 100%;
	text-align: center;
	border: solid 3px #00afef;
    border-radius: 100px;
	margin-bottom: 1.5rem;
}

	input#URLShortner, input#customURL, input#Login_Email, input#Login_Password, input#Account_FirstName, input#Account_LastName, input#Account_Email, input#Account_Password, input#Account_PasswordRepeat, input#Account_Website, input#Forgot_Email {
		font-size: 20px;
		letter-spacing: 1px;
		padding: 1rem;
	}

	input#URLShortner {
		width: 75%;
		margin-bottom:2.5rem;
	}

	input#customURL {
		margin-bottom:2.5rem;
	}

	input#customURL, input#Login_Email, input#Login_Password, input#Account_FirstName, input#Account_LastName, input#Account_Email, input#Account_Password, input#Account_PasswordRepeat, input#Account_Website, input#Forgot_Email {
		width: 50%;
	}

	input#URLShortner::placeholder, input#customURL::placeholder, input#Login_Email::placeholder, input#Login_Password::placeholder {
		color: #BFBFBF;
	}

	input.inputError {
		border-color: #db1414;
	}

textarea {
	font-size: 14px;
	color: rgba(89,89,89,1);
	line-height: 180%;
	text-align: left;
	margin-bottom: 1.5rem;
	word-wrap: break-word;
	width: 100%;
}

textarea.xTallTxtBox {
	height: 400px;
}

textarea.tallTxtBox {
	height: 300px;
}

textarea.medTxtBox {
	height: 100px;
}

textarea.smTxtBox {
	height: 60px;
}

button, input[type=submit] {
	font-size: 15px;
	line-height: 100%;
	font-weight: 700;
	color: #FFFFFF;
	padding: 0.5rem 1rem;
	background-color: #0098d0;
	border: solid 2px #0098d0;
	cursor: pointer;
	border-radius: 60px;
}

button:hover, input[type=submit]:hover {
	background-color: #FFFFFF;
	color: #0098d0;
}

	button#getYourShortLink, button#loginBtn, button#createAccountBtn, button#resetPasswordBtn, button#goRegisterBtn {
		font-size: 20px;
		padding: 0.75rem 1.25rem;
	}

/*************
 * WEB FONTS *
 *************/

@font-face {
    font-family: 'WantedSans';
    src: url('font/WantedSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'WantedSans';
    src: url('font/WantedSans-ExtraBold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'WantedSans';
    src: url('font/WantedSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'WantedSans';
    src: url('font/WantedSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@media only screen 
and (max-width : 1000px) {
	
	input#Login_Email, input#Login_Password, input#Account_FirstName, input#Account_LastName, input#Account_Email, input#Account_Password, input#Account_PasswordRepeat, input#Account_Website, input#Forgot_Email {
		width: 65%;
	}
	
}

@media only screen 
and (max-width : 800px) {
	
	#headerLogo {
		width: 65%;
		max-width: unset;
	}
	
	main, main#homeShortner {
		padding: 2rem 3rem;
	}
	
	input#Login_Email, input#Login_Password, input#Account_FirstName, input#Account_LastName, input#Account_Email, input#Account_Password, input#Account_PasswordRepeat, input#Account_Website, input#Forgot_Email {
		width: 75%;
	}
	
	#headerLogo {
		width: 65%;
		max-width: unset;
	}
	
}

@media only screen 
and (max-width : 650px) {
	
	input#URLShortner {
		width: 85%;
	}
	
	input#customURL {
		width: 70%;
	}
	
	input#Login_Email, input#Login_Password, input#Account_FirstName, input#Account_LastName, input#Account_Email, input#Account_Password, input#Account_PasswordRepeat, input#Account_Website, input#Forgot_Email {
		width: 85%;
	}
	
}

@media only screen 
and (max-width : 550px) {
	
	#headerLogo {
		width: 80%;
	}
	
	main, main#homeShortner {
		padding: 2rem 1.5rem;
	}
	
	input#URLShortner, input#customURL, input#Login_Email, input#Login_Password, input#Account_FirstName, input#Account_LastName, input#Account_Email, input#Account_Password, input#Account_PasswordRepeat, input#Account_Website, input#Forgot_Email {
		font-size: 17px;
		letter-spacing: 0.5px;
	}
	
	input#URLShortner {
		width: 100%;
	}
	
	input#customURL {
		width: 85%;
	}
	
	h1 {
		font-size: 23px;
	}
	
	h2 {
		font-size: 21px;
	}
	
}

@media only screen 
and (max-width : 400px) {
	
	#headerLogo {
		width: 100%;
		max-width: unset;
	}
	
	input#customURL, input#Login_Email, input#Login_Password, input#Account_FirstName, input#Account_LastName, input#Account_Email, input#Account_Password, input#Account_PasswordRepeat, input#Account_Website, input#Forgot_Email {
		width: 100%;
	}
	
	h1 {
		font-size: 21px;
	}
	
	h2 {
		font-size: 19px;
	}
	
	h3 {
		font-size: 17px;
	}
	
}