@font-face{font-family:Simple-Line-Icons; src:url(../fonts/Simple-Line-Icons.woff);}
html{color:#333; font-family:Arial; font-size:16px; text-align:justify;}
html,body{height:100%; margin:0; padding:0; width:100%;}

a,button{transition:all 0.5s ease;}
button{background:#00BCD4; border:1px solid #666; color:#fff; cursor:pointer; font-size:1.1rem; padding:5px 15px; text-transform:uppercase;}
button:hover{background:#666; border:1px solid #000;}
button.close{display:block; margin:auto; margin-top:35px;}
input[type="password"],input[type="text"]{border:1px solid; font-size:1rem; line-height:30px; margin-bottom:15px; padding:0 5px; width:75%;}
li{margin-bottom:5px;}

#body{align-items:center; display:flex; flex-direction:column; height:100%; justify-content:space-around; width:100%;}
#encart{height:100%; position:relative; width:calc(75% - 165px);}
#error,#login{align-items:center; background:#f7f7f7; border:1px solid; display:flex; flex-flow:row wrap; font-size:1.2rem; margin:1% 0; padding:1%; max-width:480px; width:50%;}
#error>div{width:calc(100% - 60px);}
#error>.info{font-family:Simple-Line-Icons; font-size:2.5em; height:48px; margin-right:10px; width:48px;}
#error>.info:before{content:"\e08b";}
#error>button{margin:15px auto 0px;}
#header,#footer{align-items:center; background:#e0e9f1; display:flex; height:180px; justify-content:space-evenly; width:100%;}
#header{border-bottom:1px solid; box-shadow:0px 5px 20px #333;}
#footer{border-top:1px solid; box-shadow:0px -5px 20px #333; height:70px;}
#login>div{align-items:center; display:flex; flex-direction:column; position:relative; width:100%;}
#login>div.info{margin-bottom:10px; text-align:center;}
#login>div .bulle{background:#008eff; border:2px solid #2196F3; border-radius:50%; box-shadow:inset 0px -0px 0px 2px #fff; color:#fff; content:'?'; cursor:pointer; height:20px; padding:5px; position:absolute; right:calc(5% - 16px); text-align:center; text-shadow:0 0 5px black; top:-1px; width:20px;}
#login>div .bulle:after{content:'?';}
.infobulle {
    background: #fff;
    border-radius: 5px;
    border: 1px solid #999;
    font-size: 1rem;
    padding: 5px 10px;
    position: absolute;
    //right: 0;
    top: -50%;
    width: 240px;
}
#logo{background-image:url(../img/urstbf_logo_tiny.png); background-size:contain; cursor:pointer; height:175px; width:125px;}
#menu{background:#fff; border-right:1px solid; box-shadow:5px 0 20px #333; display:none; height:100%; left:0; min-width:240px; max-width:480px; position:fixed; top:0; width:30%;}
#menu_open{cursor:pointer; display:flex; flex-direction:column; height:30px; justify-content:space-evenly; width:40px;}
#menu_open>div{border-top:2px solid; height:2px; transition:all 0.5s ease; width:100%;}
#menu_open:hover>div:nth-child(2){width:75%;}
#menu_open.open>div:first-child{transform:rotate(-45deg);}
#menu_open.open>div:nth-child(2){display:none;}
#menu_open.open>div:last-child{margin-top:-18px; transform:rotate(45deg);}
#page{align-items:center; display:flex; height:calc(100% - 250px); justify-content:center; overflow-y:scroll; width:100%;}
#pop{background:#fff; border:1px solid; box-shadow:0px 0px 30px 0px #000; display:none; left:calc(50% - 400px); max-height:80%; max-width:800px; position:fixed; top:10%; width:80%;}
#pop .barre{align-content:center; align-items:center; background:#333; color:#fff; display:flex; flex-flow:row wrap; font-size:1.5rem; height:35px; justify-content:space-between; width:100%;}
#pop .barre:before{font-family:Simple-Line-Icons; margin-left:10px; width:30px;}
#pop.error .barre:before{content:"\e08b";}
#pop .barre .titre{width:calc(100% - 75px);}
#pop .barre .close{cursor:pointer; font-size:50px; line-height:30px; margin-top:-7px; text-align:center; width:30px;}
#pop .barre .close:hover{color:#F44336;}
#pop .content{height:calc(100% - 60px); overflow-y:scroll; padding:0 2%; padding-bottom:25px; width:96%;}
#pop .content p+h2{margin-top:35px;}
#timer{background:#fff; border:1px solid #9aaaa9; border-radius:5px; font-size:1.5em; font-weight:bold; line-height:35px; padding:6px 10px 3px 14px; position:absolute; right:0; top:-4px; width:250px;}
#timer>div{display:inline-block; margin-left:5px; text-align:left;}

@media screen and (max-width:800px){
	#pop{left:10%;}
	#timer{right:-85px;}
}