/**
*  Shared styles of the /users app: reset, typography, top bar, content area,
*  buttons and spacers. Page specific rules go into their own css file.
*  Every visible state change is driven by CSS transitions (see .transition*).
*/

:root{
	font-size: 18px;
	font-family:'Roboto', sans-serif;
	font-weight:300;
	color: #000;
	--page-margin: 1.1rem;
	--button-h: 2rem;
}

html{
	width:100%;
	height:100%;
	min-height:100%;
	min-width:100%;
	background:#ccc;
}

*{
	top:0;
	left:0;
	padding:0;
	margin:0;
	border:0;
	z-index:1;
	box-sizing:border-box;
	cursor:default;
}

body :not(noscript,span,p,u,b,i,h1,h2,h3,h4,h5,h6,h7){
	display:inline-block;
	position:relative;
	line-height:0;
	font-size:0;
}

body{
	width:100%;
	min-height:100%;
	-webkit-text-size-adjust:100%;
	-webkit-touch-callout:none !important;
	overflow:hidden;
}

img{
	-webkit-user-select:none !important;
}

a{
	text-decoration:none;
	color:#555;
}

ul,ol{
	list-style-type:none;
}

h1{
    display: block;
    width: 100%;
    font-size: 2.7rem;
    line-height: 4rem;
}

h2{
    display: block;
    width: 100%;
    font-size: 1rem;
    line-height: 1.5rem;
}

span{
	font-size:0.7rem;
	line-height:1rem;
}

div.noscript{
	position:fixed;
	width:100%;
	height:100%;
	background:#fff;
	z-index:1000;
}



/** --------------------------------------
              TEXTS
    --------------------------------------*/

.titles{
	font-family:'Roboto', sans-serif;
	font-size:1.6rem;
	font-weight:400;
	line-height:2.55rem;
	height:2.55rem;
}

p,span{
	font-family:'Roboto', sans-serif;
	font-size:1rem;
	line-height: 1.5rem;
	font-weight:300;
}

.commentary{
	font-style:italic;
}

.links{
	text-decoration:underline;
	color:#ff6600;
}

.links a{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	cursor:pointer;
}



/** --------------------------------------
              LAYOUT
    --------------------------------------*/

#main_layer{
	position:absolute;
	width:100%;
	height:100%;
	background:#ccc;
	overflow:auto;
}

.top_bar_bgs{
	width:100%;
	height:5.78rem;
	padding: 0 var(--page-margin);
	background:#777;
	z-index:10;
}

.top_bar_bgs.shadow{
	box-shadow:0px 0px 12px #333;
}
.floating{
	top:50%;
	width: 100%;
	height: 100%;
}
.floating>*{
	transform: translateY(-50%);
}

img.hdrs{
	float: left;
	height: 28%;
}

.hdr_singles{
	float:right;
	height: 80%;
}

.top_bars_spacers{
	display:block;
	width:100%;
	height:95px;
}

#outer_content{
	width:100%;
	background:#fff;
	overflow:hidden;
}

#content{
	display:block;
	max-width: 1196px;
	margin: 0 auto;
	padding: 1.27rem 0;
	background:#fff;
}

::-webkit-scrollbar{
	width:6px;
	height:6px;
	background-color:#fff;
}

::-webkit-scrollbar-thumb{
	background-color:#ccc;
}



/** --------------------------------------
              BUTTONS
    --------------------------------------*/

.buttons{
	box-sizing: content-box;
	border:2px solid #ff6600;
	background:#ff6600;
	height: var(--button-h);
	line-height: var(--button-h);
	border-radius:0.55rem;
	cursor:pointer;
}

.buttons span{
	position:absolute;
	width:100%;
	height: inherit;
	line-height: inherit;
	color:#fff;
	text-align:center;
	cursor:inherit;
}

.buttons a{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	cursor:inherit;
}

.buttons.empty{
	background:#fff;
}

.buttons.empty span{
	color:#ff6600;
}

.buttons:hover{
	background:#e65c00;
	border-color:#e65c00;
}

.buttons.empty:hover{
	background:#ff6600;
}

.buttons.empty:hover span{
	color:#fff;
}

.buttons.deactivated{
	background:#ccc;
	border-color:#ccc;
}

.buttons.deactivated a{
	display:none;
}



/** --------------------------------------
          GENERAL PURPOSE CLASSES
    --------------------------------------*/

.transition1000{
	transition:all 1000ms ease;
}

.transition500{
	transition:all 500ms ease;
}

.transition250{
	transition:all 250ms ease;
}

.opaque0{
	opacity:0;
}

.removed{
	display:none;
}