/*
   Copyright (c) 2013, Emy Library
   Version 1.1
*/
body {
  font-size:        100%;
  overflow-x:    hidden;
  -webkit-text-size-adjust: none;
}
input, select, button, textarea {
	font-family:	inherit;
}
input, textarea, select, button,
.button, .whiteButton, .redButton, .grayButton, .toggle,
body section li > a {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-ms-touch-action: 	pan-y;
	-ms-user-select:       text;
	user-select:                text;
}
button { border: 0 }
img {
	-ms-interpolation-mode: bicubic;
}
a {
	color:  inherit;
}
::selection { background: transparent; }
::-moz-selection { background: transparent; }

body * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: 	    border-box;
    box-sizing: 		            border-box;
    margin:		0;
    padding:	    0;
    border:		    0;
    -webkit-backface-visibility:    hidden;
}

body > *:not(.toolbar) {
	width: 			100%;
	height: 		auto;
	vertical-align:	top;
	-webkit-animation-duration:   300ms;
	-moz-animation-duration:        300ms;
	animation-duration:                    300ms;
	-webkit-animation-timing-function:    ease-in-out;
	-moz-animation-timing-function:         ease-in-out;
	animation-timing-function:                     ease-in-out;
	-webkit-animation-fill-mode:   forwards;
	-moz-animation-fill-mode:        forwards;
	animation-fill-mode:                    forwards;
}
.no-js body > *:not(.toolbar):not([selected]) {
	padding-top:	0;
	padding-bottom:	1em;
	border-bottom:	1px solid rgba(50,50,50,.6);
}
.no-js body > *:not(.toolbar):not([selected]).panel {
	border-bottom:	1px solid rgba(255,255,255,.6);
}
.js body > *:not(.toolbar) {
	display:		none;
	position: 	  	absolute;
	z-index:        -1;
}

.no-js body > *,
.js body > *[selected] {
	display:	  inline-block;
}

/************************************************************************************************/

header.toolbar {
    position:           	absolute;
    top:					0px;
    left:					0px;
    width:					100%;
    z-index:				999;
    overflow:         	hidden;
}
header.toolbar > div {
    display:            	block;
}
header.toolbar h1 {
    position:           	absolute;
    overflow:          	hidden;
    left:                     	50%;
    width:					40%;
    margin:             	0 0 0 -20%;
    text-overflow:  	ellipsis;
    white-space:    	nowrap;
}

header.toolbar h1,
header.toolbar .button,
header.toolbar #backButton {
	display:	block;
	text-decoration:	none;
	overflow: 			    hidden;
	white-space: 			nowrap;
	text-overflow: 		ellipsis;
}
header.toolbar .button,
header.toolbar #backButton {
	max-width:			6em;
    -ms-user-select: none;
    user-select:    none;
}
header.toolbar #backButton {
	display: 		  	none;
	text-align:		left;
}
@media only screen and (min-width: 480px) {
	header.toolbar h1 {
		width:					60%;
		margin:             	0 0 0 -30%;
	}
	header.toolbar .button,
	header.toolbar #backButton {
		max-width:			7em;
	}
}


/************************************************************************************************/
body ul > li {
	display:		inline-block;
	float:			    left;
	width:			100%;
}
body ul > li,
body ul > li.group {
  position: 		relative;
}

section ul > li,
section ul > li > a {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: 	    border-box;
    box-sizing: 		            border-box;
}

/************************************************************************************************/

body .panel > h2 {
  font-size:		inherit;
}
body .panel > ul,
body .panel > fieldset,
body .panel > ul > li,
.row  {
  position: 		relative;
}
.row  {
  overflow: 		hidden;
}

.row > label,
.row > span,
.row > .toggle {
  position:         absolute;
  overflow:	     hidden;
}

/************************************************************************************************/
body > .dialog {
  z-index:  10;
}

/************************************************************************************************/
body > section[emy-transition='slidein'] {
    -webkit-transform:    translateX(100%);
    -moz-transform:         translateX(100%);
    transform:                     translateX(100%);
    -webkit-animation-name:   'anim-slidein';
    -moz-animation-name:        'anim-slidein';
    animation-name:                    anim-slidein;
}
body > section[emy-transition='slideout'] {
    -webkit-animation-name:    'anim-slideout';
    -moz-animation-name:         'anim-slideout';
    animation-name:                     anim-slideout;
    z-index:  -2;
}
body > section[emy-transition='slidebackin'] {
    -webkit-animation-name:   'anim-slidebackin';
    -moz-animation-name:        'anim-slidebackin';
    animation-name:                    anim-slidebackin;
    z-index:  -2;
}
body > section[emy-transition='slidebackout'] {
    -webkit-animation-name:   'anim-slidebackout';
    -moz-animation-name:        'anim-slidebackout';
    animation-name:                    anim-slidebackout;
}

@-webkit-keyframes 'anim-slidein' {
    0%      { -webkit-transform: translateX(100%);      }
    100% { -webkit-transform: translateX(0%);           }
}
@-webkit-keyframes 'anim-slidebackin' {
    0%      { -webkit-transform: translateX(-100%);     }
    100% { -webkit-transform: translateX(0%);            }
}
@-webkit-keyframes 'anim-slideout' {
    0%      { -webkit-transform: translateX(0%);           }
    100% { -webkit-transform: translateX(-100%);     }
}
@-webkit-keyframes 'anim-slidebackout' {
    0%      { -webkit-transform: translateX(0%);          }
    100% { -webkit-transform: translateX(100%);     }
}
@keyframes anim-slidein {
    0%      { transform: translateX(100%);      }
    100% { transform: translateX(0%);           }
}
@keyframes anim-slidebackin {
    0%      { transform: translateX(-100%);     }
    100% { transform: translateX(0%);            }
}
@keyframes anim-slideout {
    0%      { transform: translateX(0%);           }
    100% { transform: translateX(-100%);     }
}
@keyframes anim-slidebackout {
    0%      { transform: translateX(0%);          }
    100% { transform: translateX(100%);     }
}
/************************************************************************************************/

*[data-hide='true'] {
    display:    none!important;
}

#preloader {
    display: none;
}