/*
		File: 	styles.css
		Auth:	Creativeink Design Group | web@creativeink.ca
		~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
/*---------------------------------------------------------------------------- 
	FONTS
-----------------------------------------------------------------------------*/
.LoginStyles {
	font-family:Tahoma, Geneva, sans-serif !important;
}

.LoginBoxTitle {
	font-size:18px;
	text-transform:uppercase;
	font-weight:bold;
	color:#D31F27;
}

.LoginUnderline {
	border-bottom: thin dotted #D31F27;	
}





/*---------------------------------------------------------------------------- 
	SIGNUP FORM
-----------------------------------------------------------------------------*/
.FormColLeft {	
	width:40%;
}
.FormColRight {
	padding-right:55px;
}



/*---------------------------------------------------------------------------- 
	FIELDS
-----------------------------------------------------------------------------*/
input, textarea, select { 
	padding: 5px;
	border: solid 1px #c4c4c4;
	outline: 0;
	font: normal 12px/100% Verdana, Tahoma, sans-serif;
	background: #FFFFFF url('../images/bg_form.png') left top repeat-x;
	background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
	background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
	box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}

textarea {
	outline:none;
	width:90%;
	resize:vertical; 
	overflow:hidden; /* FOR IE */
}


/* ERROR */
.textfieldRequiredState .textfieldRequiredMsg, 
.textfieldInvalidFormatState .textfieldInvalidFormatMsg, 
.textfieldMinValueState .textfieldMinValueMsg,
.textfieldMaxValueState .textfieldMaxValueMsg,
.textfieldMinCharsState .textfieldMinCharsMsg,
.textfieldMaxCharsState .textfieldMaxCharsMsg
{
	font-size:13px; line-height:13px;
}




/*---------------------------------------------------------------------------- 
	LOGIN PANEL
-----------------------------------------------------------------------------*/
.FormStyle {
	padding:10px;
	width:100%;
}
.FormHeader {
	font-size:25px;
	text-transform: uppercase;
	height:55px;
	background-color:#000000;
	background-image:url(../images/tile_login.png);
	background-repeat:repeat-x;
	color:#FFFFFF;
	cursor:default;
}
.FormBtn {
	margin:5px 0px;
	padding:10px 35px;
	font-weight:bold;
	text-transform:uppercase;
	font-size:110%;
	cursor:pointer;
}


.ErrorMsg {
	font-family:Arial, sans-serif;
	color:#F00;
	font-weight:bold;
	text-align:center;
	font-size:14px;
}

.LoginHover a:hover {
	border-bottom: thin dotted #202020;
}


/*---------------------------------------------------------------------------- 
	UPLOAD IMAGE PREVIEW
-----------------------------------------------------------------------------*/
a img.image_thumbs {
	border: 1px solid #CCCCCC;
	padding: 1px;
	margin: 0px;
	background:#FFFFFF;
}
.image_thumbs {
	background:url('../images/loading.gif') no-repeat center;
	height: expression(this.height > 100 ? 100: true); max-height:100px;
	max-width:130px;
}

a:hover img.image_thumbs {
	background-color: #969696;
}





/*---------------------------------------------------------------------------- 
	BREADCRUMB
-----------------------------------------------------------------------------*/
#Breadcrumb {
	cursor:default;
	height:50px;
	table-layout:fixed;
}
#Breadcrumb a:hover {
	border-bottom: thin dotted #202020;	
}





/*---------------------------------------------------------------------------- 
	DIV CONTAINER
-----------------------------------------------------------------------------*/
.form-styles {	
    /* Size and position */
    padding: 0px; /* PADDING */
    position: relative;
    margin: 0px;
    overflow: hidden;

    /* Styles */
    background: #FFFFFF; /* BG COLOR */ 
    border: 1px solid #191919;
    box-shadow: 
        inset 0 0 2px 1px rgba(255,255,255,0.08), 
        0 16px 10px -8px rgba(0, 0, 0, 0.6);
}

.form-styles input[type=submit], .form-back-btn {
    /* Width and position */
    padding: 20px 0px;
  
    /* Styles */
    border: 1px solid #0273dd; /* Fallback */
    border: 1px solid rgba(0,0,0,0.4);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.3),
        inset 0 10px 10px rgba(255,255,255,0.1);
    /* background: #ef242d; - SUBMIT BACKGROUND COLOR */
    cursor:pointer;
  
    /* Font styles */
    font-family: 'Ubuntu', 'Lato', sans-serif;
    color: white;
    font-weight: 700;
    font-size: 18px;
	text-transform:uppercase;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
	color: #FFF;
}

.form-styles input[type=submit]:hover {
	background-color:#333; /* HOVER COLOR */
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
	color: #FFF;
}

.form-styles input[type=submit]:active { 
    background: #666666; /* SUBMIT BTN HOVER */
    box-shadow: inset 0 0 3px rgba(0,0,0,0.6);
    border-color: #000; /* Fallback */
    border-color: rgba(0,0,0,0.9);
	color: #FFF;
}

.no-boxshadow .form-styles input[type=submit]:hover {
    background: #222222; /* SUBMIT BTN HOVER */
}
.form-styles:after {
    /* Size and position */
    content: "";
    height: 1px;
    position: absolute;
    left: 20%;
    top: 0;

    /* Styles */
    background: -moz-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
    background: -ms-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
    background: -o-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
    background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), color-stop(0.25, #444), color-stop(0.5, #b6b6b8), color-stop(0.75, #444), to(transparent));
    background: -webkit-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
    background: linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
	color: #FFF;
}

.form-styles:before {
    /* Size and position */
    content: "";
    width: 8px;
    height: 5px;
    position: absolute;
    left: 34%;
    top: -7px;
	color: #FFF;
}

.form-styles p:nth-child(1):before{
    /* Size and position */
    content:"";
    height:100px;
    position:absolute;
    top:0;
    left:45px;

    /* Styles */
    -webkit-transform: rotate(75deg);
    -moz-transform: rotate(75deg);
    -ms-transform: rotate(75deg);
    -o-transform: rotate(75deg);
    transform: rotate(75deg);
    background: -moz-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
    background: -ms-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
    background: -o-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
    background: -webkit-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
    background: linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
    pointer-events:none;
	color: #FFF;
}

.no-pointerevents .form-styles p:nth-child(1):before {
    display: none;
	color: #FFF;
}



/*---------------------------------------------------------------------------- 
	FADE IN BOX
-----------------------------------------------------------------------------*/
#DivHolder {
	margin:20px 0px 0px 0px;
}
#DivHolder  {
	opacity:0;
	-webkit-animation:fadeIn ease-in 1;
	-moz-animation:fadeIn ease-in 1;
	-o-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	-o-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
}
#DivHolder  {
	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	-o-animation-duration:1s;
	animation-duration:1s;
}
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }