@charset "utf-8";
/*
 *	some very basic styles
 */

:root{

	--skin-main-color:#404952;
	--skin-secondary-color:#515c67;
	--skin-third-color:#202a33;
	--skin-fourth-color:#2f3740;
	--skin-text-color:#b5b9bf;
}

.hidden{
	display:none;	
}

.visible-block{
	display:block;
}
.visible-inline{
	.display:inline;	
}

/*
 *	response styles
 */

#response{
	width:400px;
	margin:20px auto;
	background-color:#222;
	-webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.3);
	box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.3);
	padding:20px;
}

#response #title{
		position:relative;
	text-align:center;

	font-size:28px;
	padding:6px;
	color:#fff;
	background-color:#111;
font-family: 'Alegreya Sans SC', sans-serif;
	text-outline:1px #000;
}

#response .message{
	font-family: 'Alegreya Sans SC', sans-serif;
	font-size:18px;
	color:#fff;
	margin:20px;	
}


.validationError{
		font-family: 'Alegreya Sans SC', sans-serif;
		color:#F00;
		text-align:right;
		font-size:12px;
		padding-right:20px;
}

.validationSuccess{
		font-family: 'Alegreya Sans SC', sans-serif;
		color:#0F3;
		text-align:right;
		font-size:12px;
		padding-right:20px;
}



/*
 * Notification Window styles
 *
 */
 
 .notificationModal {

    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modalHidden{
    display: none; /* Hidden by default */
}

.modalVisible{
	display:block;	
}

.notificationMessage{
	font-family: 'Alegreya Sans SC', sans-serif;
	font-size:18px;
	color:#fff;
	margin:20px;
}
.buttonContainer{
	width:220px;
	margin:20px auto;
}
 .notificationWindow{

	width:400px;
	margin:10% auto;
	background-color:#222;
	-webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.3);
	box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.3);
	padding:20px;	 
 }
 
 .notificationWindow input[type=button]{
	position:relative;
	width:200px;
	padding:10px;
	font-family: 'Alegreya Sans SC', sans-serif;
	font-size:18px;
	color:#fff;
	margin:0px auto;
	
	-webkit-border-top-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;

	border-left:1px solid #111;
	border-top:1px solid #111;
	border-bottom:1px solid #111;
	border-right:none;
	background: rgb(255,175,75); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,175,75,1) 0%, rgba(255,146,10,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,175,75,1) 0%,rgba(255,146,10,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,175,75,1) 0%,rgba(255,146,10,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf4b', endColorstr='#ff920a',GradientType=0 );
	
 }
 
 
 
 /*
  *	Profile Page Styles
  */
  
.profile-container{
	width:100%;
	height:100%;
	font-family: 'Open Sans', sans-serif;
	background-color:#666666;
	border-width:0;
	margin:0;
	padding:0;


}

.profile-sidebar{
height:100%;
width:200px;
background-color:var(--skin-main-color);
border-right:1px solid var(--skin-third-color);
color:var(--skin-text-color);
	vertical-align: top;
}

.profile-content{
	margin-left:200px;
	background-color:#666666;
}

.sidebar-header{
	height:22px;
	background-color:var(--skin-fourth-color);
	line-height:22px;
	text-align:left;
	font-size:16px;
	color:var(--skin-text-color);
	padding-left:10px;
	
}

.sidebar-item, .sidebar-action{
	height:35px;

	line-height:35px;
	text-align:left;
	padding-left:20px;
	
	font-size:12px;
	/*border-top:1px solid #191919;*/		//this needs to have same color bas bg-color. Prevents jitter when :hover turns border on
	/*border-bottom:1px solid #191919;*/
	
}


.sidebar-action a{
	text-decoration:none;
	color:var(--skin-text-color);

	font-size:12px;

		
}

.sidebar-action:hover a{
	text-decoration:none;



		
}
  
.sidebar-action:hover{
	background-color:var(--skin-secondary-color);
	border-top:1px solid var(--skin-third-color);
	border-bottom:1px solid var(--skin-third-color);
}

/*.sidebar-action:hover:after {
	content: "";
	width:0px;
	height:0px;
    display: block;
    border: 17px solid #1C1C1C;
    border-right-color: #222;
    position: relative;
    top: -35px;
    left: 157px;
	z-index:1;

}*/


  
  
/*
 *	Form Style
 *
 */
 
 .accountForm{
	background-color:#222;
	width:400px;
	margin:20px auto;
	-webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.3);
	box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.3);
	padding:20px;
	font-family: 'Alegreya Sans SC', sans-serif;
}

.accountForm .title{
	position:relative;
	padding:6px;
	color:#fff;
	text-outline:1px #000;	
	text-align:center;
	font-size:28px;
	background-color:#111;
}

.accountForm .label{
		font-size:26px;
		color:#fff;
		width:110px;
		display:inline-block;
}

.accountForm .input-details{
		color:#C90;
		text-align:right;
		font-size:12px;
		padding-right:20px;
}

.accountForm .input-details a{
		text-decoration:none;
		color:#C90;
}

.accountForm .input-details a:hover{
		text-decoration:none;
		color:#F60;
}

.accountForm input[type=text], .accountForm input[type=password], .accountForm input[type=email] {
	width:240px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	opacity:0.5;
	padding:10px;
	margin:10px;
	background-color:#111;
	color:#fff;
	border:1px solid #ccc;
	font-family: 'Alegreya Sans SC', sans-serif;
	font-size:18px;
	opacity:0.1;
}

.accountForm input[type=text]:focus, .accountForm input[type=password]:focus, .accountForm input[type=text]:focus{
	opacity:1;	
	transition:ease-in 0.3s;
}

.accountForm input:required:valid {
  box-shadow: 0 0 5px #0F3;
  border: 1px solid #090;
}

.accountForm input:required:valid:focus{
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  border: 1px solid rgba(81, 203, 238, 1);
}

.accountForm input:required:invalid{
  box-shadow: 0 0 5px #F00;
  border: 1px solid #900;
}

.accountForm input:required:invalid:focus{
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  border: 1px solid rgba(81, 203, 238, 1);
}

.accountForm input:focus{
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);

  border: 1px solid rgba(81, 203, 238, 1);
}



.accountForm .left-button{
	width:190px;
	height:41px;
	line-height:38px;
	display:inline-block;
	float:left;
	border-left:1px solid #111;
	border-top:1px solid #111;
	border-bottom:1px solid #111;
	border-right:none;
	font-size:18px;
	color:#fff;;
		text-align:center;

	-webkit-border-top-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;

	border-left:1px solid #111;
	border-top:1px solid #111;
	border-bottom:1px solid #111;
	border-right:none;
	background: rgb(255,175,75); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(255,175,75,1) 0%, rgba(255,146,10,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(255,175,75,1) 0%,rgba(255,146,10,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(255,175,75,1) 0%,rgba(255,146,10,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf4b', endColorstr='#ff920a',GradientType=0 );
	opacity:0.3;	
}
  
.accountForm .left-button:hover{
	opacity:1;
}
.accountForm .left-button a{
	text-decoration:none;
	color:#fff;	
} 

.accountForm .right-button{

	width:200px;
	padding:10px;
	font-family: 'Alegreya Sans SC', sans-serif;
	font-size:18px;
	color:#fff;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	border:1px solid #111;
	background: rgb(184,198,223); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(184,198,223,1) 0%, rgba(109,136,183,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(184,198,223,1) 0%,rgba(109,136,183,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(184,198,223,1) 0%,rgba(109,136,183,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8c6df', endColorstr='#6d88b7',GradientType=0 );
	opacity:0.3;
}
.accountForm .right-button:hover{
	opacity:1;
}

.accountForm .right-button:disabled{
	background: rgb(221,221,221); /* Old browsers */
background: -moz-linear-gradient(top, rgba(221,221,221,1) 0%, rgba(56,56,56,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(221,221,221,1) 0%,rgba(56,56,56,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(221,221,221,1) 0%,rgba(56,56,56,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#383838',GradientType=0 ); /* IE6-9 */

}