/***********************************************************************
Import Fonts
***********************************************************************/

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
/* ELEMENT STYLES */


/***********************************************************************
BEGIN:	Element Styles
***********************************************************************/

body 
{
	font-family: 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
	background-color: #13191e;
	color: #FFF;
}
/*Add body padding above xs(mobile) size*/
@media (min-width:768px) 
{
 body 
	{
	 padding-top: 30px;
 }
}
/*Match Kendo themebuilder*/
a:link, a:visited, a:active, a:hover 
{
	color: #d9def6;
}

/***********************************************************************
END:	Element Styles
***********************************************************************/


/***********************************************************************
BEGIN:	ID Selector Styles
***********************************************************************/

/*All panels default*/
#divAbout, div[id $= 'divLogin'], div[id $= 'divMessage'], #divTerms
{
 width: 100%;
	position: absolute;
 top: 0;
 left: 0;
	border: 1px solid #565966;
	padding: 30px;
 /*Enabling 3d space for the transforms*/
 -moz-transform-style: preserve-3d;
 -webkit-transform-style: preserve-3d;
 transform-style: preserve-3d;
 /*hide div when flipped*/
 -moz-backface-visibility: hidden;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 /*transition timing*/
 -moz-transition:0.8s;
 -webkit-transition:0.8s;
 transition:0.8s;
 /*keyframe animations*/
 -moz-animation: pulse 2s infinite;
 -webkit-animation: pulse 2s infinite;
}
/*About panel initial state*/
#divAbout
{
 z-index:1;
 opacity:0;
	background-color: #2F3640;
 -moz-transform:rotateY(180deg);
 -webkit-transform:rotateY(180deg);
 transform:rotateY(180deg);
}
#divContainer 
{
 /*Perspective properties needed for 3d transform, larger appears deeper*/
 -moz-perspective: 800px;
 -webkit-perspective: 800px;
 perspective: 800px;
}
/*About panel view*/
#divContainer.showAbout div[id $= 'divLogin']
{
 opacity:0;
 -moz-transform:rotateY(-180deg);
 -webkit-transform:rotateY(-180deg);
 transform:rotateY(-180deg);
}
/*About panel view*/
#divContainer.showAbout #divAbout
{
 opacity:1;
 -moz-transform:rotateY(0deg);
 -webkit-transform:rotateY(0deg);
 transform:rotateY(0deg);
}
/*About panel view*/
#divContainer.showAbout #divTerms
{
 opacity:0;
 -moz-transform:rotateY(-180deg);
 -webkit-transform:rotateY(-180deg);
 transform:rotateY(-180deg);
}
/*Terms panel view*/
#divContainer.showTerms div[id $= 'divLogin']
{
 opacity:0;
 -moz-transform:rotateY(-180deg);
 -webkit-transform:rotateY(-180deg);
 transform:rotateY(-180deg);
}
/*Terms panel view*/
#divContainer.showTerms #divAbout
{
 opacity:0;
 -moz-transform:rotateY(0deg);
 -webkit-transform:rotateY(0deg);
 transform:rotateY(0deg);
}
/*Terms panel view*/
#divContainer.showTerms #divTerms
{
 opacity:1;
 -moz-transform:rotateY(0deg);
 -webkit-transform:rotateY(0deg);
 transform:rotateY(0deg);
}
#divError 
{ 
 display: block;
	width: 100%;
	padding: 10px;
	/*To match kendo error notification color*/
	background-color: #BE5138; 
	margin-bottom: 10px;
}
/*Login panel initial state*/
div[id $= 'divLogin'], div[id $= 'divMessage']
{
 z-index:100;
	background-color: #2F3640;
}
div[id $= 'divLogin'] input
{ 
 width: 100%;
	background-color: #2F3640;
	margin-top: 10px;
	border: 1px solid #565966;
}
div[id $= 'divLogin'] input.error 
{
	/*To match kendo error notification color*/
	background-color: #BE5138;  
}
/*Terms panel initial state*/
#divTerms
{
 z-index:50;
 opacity:0;
	background-color: #000;
 -moz-transform:rotateY(180deg);
 -webkit-transform:rotateY(180deg);
 transform:rotateY(180deg);
}

/***********************************************************************
END:	ID Selector Styles
***********************************************************************/


/***********************************************************************
BEGIN:	Kendo Specific Overrides
***********************************************************************/

/*Button Overrides****************************************************/
#divContainer .k-button 
{
	color: #FFF;
	background-color: #212a33;
 border-color: #565966;
	border-top-left-radius: 0;
 border-top-right-radius: 0;
 border-bottom-right-radius: 0;
 border-bottom-left-radius: 0;
	width: 100%;
}
#divContainer .k-button:hover 
{
	color: #ffffff;
 border-color: #4a4e65;
 background-color: #4a4e65;
}
/*Dropdown Overrides****************************************************/
div[id $= 'divLogin'] .k-dropdown-wrap.k-state-default 
{
	background-color:#2F3640;
	border-color: #565966;
}
.k-list-container 
{
	border-color: #565966;
}

/***********************************************************************
END:	Kendo Specific Overrides
***********************************************************************/


/***********************************************************************
BEGIN:	Bootstrap Specific Overrides
***********************************************************************/

/*Bootstrap Element Style Overrides************************************/

/*Bootstrap headers are too big by default*/
h1 
{
	font-size: 18px;
	margin-top:0;
	line-height: 24px;
}
/*Bootstrap hr elements have margins, color and border by default*/
hr 
{
	color: #565966;
	border-color: #565966;
}

/*Bootstrap Class Selector Style Overrides*****************************/

/*Bootstrap row class has no margins - add this class to rows needing margins*/
.row-margin 
{
	margin-bottom: 10px;
}

/***********************************************************************
END:	Bootstrap Specific Overrides
***********************************************************************/