/*
html, body {
	background-color:#ffeadb;
	margin:0;
    font-family: 'ProximaNovaRegular', Helvetica, sans-serif;
}
*/

/*
#debugger {
    width:200px;
    min-height:50px;
    padding:15px;
    background-color:#e57e30;
    position:absolute;
    top:0px;
    left:0px;
    color:#ffeadb;
    opacity:.8
}
*/

.warning {
    width:100%;
    padding:15px;
    background-color:#e57e30;
    top:0px;
    left:0px;
    opacity:.8;
    color:#ffeadb;
    font-weight:bold;
    display:none;
}

.artikel {
	font-family: 'ArnhemProBlond', Georgia, serif;
    font-size: 19px;
    max-width:700px;
    margin:auto;
    line-height: 1.5em;
}

#contentwrapper { 
    width:100%;
    max-width: 700px;
    margin:auto;
}

/*
h1 {
    font-family: 'ArnhemProBold', Georgia, serif;
    font-size: 45px;
    margin-bottom: .3em;
}

p {margin:0.5em 0px 0.5em 0;}
*/

.GRintro {
    font-family: 'ArnhemProBlond', Georgia, serif;
    font-size: 28px;
    line-height: 1.2em;
    margin:0.1em 0px 1em 0;
}

.grKop {
    font-family: 'ArnhemProBlond', Georgia, serif;
    font-size: 25px;
    color:#4393ab;
    margin:0px;
    margin-top:15px;
}

.graphic {
    font-family: 'ProximaNovaRegular', Helvetica, sans-serif;
    font-size:17px;
/*    max-width:700px;*/
    margin:auto;
    padding-top: 10px;
}

.tussenkop {
    font-family:'ProximaNovaBold', Helvetica, sans-serif;
    margin:0px;
}

.onzichtbaar {
    visibility: hidden;
}

.grcredit {
    font-size:14px;
    text-align: right;
}

.infoicon {
    float:left;
    width:30px;
    height:30px;
}

.infodiv {
    position:relative;
}

.infopopup {
    position:absolute;
    left:15px;
    top:15px;
    width:300px;
    background-color: #756d67;
    color:#ffeadb;
    padding:5px;
    font-size:14px;
    visibility:hidden;
}

#infodiv1:hover #infopopup1 {
    visibility:visible;
}

.coalitielegenda {
    width:100%;
    margin-bottom:30px;
}

.vinkjeswrapper {
    float:left;
    width:95%;
    margin-bottom:20px;
    padding:15px;
    background-color:rgba(0,0,0,.1);
}

.vinkje {
    float:left;
    width:45%;
    margin:auto;
}

.check {
    float:left;
}

.graphic_checkbox {
    float:left;
    margin-bottom:5px;
}

.graphic_chb {
    float:left;
}

.graphic_input_label {
    float:left;
    line-height:1.5em;
}

.cijfer {
    font-family: 'Consort', Georgia, serif;
    font-size: 45px;
    color:#4393ab;
}

#coalitiegraphic {
    max-height:400px!important;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
}

/*
#puzzelbuttons {
    padding:10px;
    background-color:rgba(0,0,0,.1);
}
*/

.puzzelbutton {
    float:left;
    background-color: #a89c91;
    color:#ffeadb;
    padding:10px;
    border-radius:5px;
    margin:5px;
    cursor:pointer;
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
}

.pzinfowrap {
    float:left;
    width:100%;
    position:relative;
    padding:15px;
    background-color:rgba(0,0,0,.1);
}

.pzinfodiv {
    position:relative;
}

.pzinfo {
    float:left;
}

.pzinfo2 {
    float:right;
    margin-top:20px;
    margin-right:15px;
}

.pzinfopopup {
    position:absolute;
    right:0px;
    top:15px;
    width:130px;
    background-color: #756d67;
    color:#ffeadb;
    padding:5px;
    font-size:14px;
    visibility:hidden;
}

#pzinfodiv:hover #pzinfopopup {
    visibility:visible;
}

#puzzelbuttons {
    width:100%;
    float:left;
}

.GRbutton {
    display: inline-block;
    padding: 12px 25px;
    background: #677381;
    color: #ffeadb;
    border: none;
    text-align: center;
    border-radius: 3px;
    box-sizing: border-box;
    text-decoration: none;
    cursor: pointer;
    outline: none;
    -webkit-font-smoothing: antialiased;
    font-family: 'ProximaNovaBold',sans-serif;
    font-size: 16px;
    font-weight:bold;
    float:left;
}

#FDlezers {
    width:100%;
    padding:15px;
    background-color: rgba(0,0,0,.1);
    position:relative;
}

#FDLgraphic {
    width:100%;
}

.footnote {
    font-size:14px;
    color:#a89c91;
    margin-left:10px;
    float:left;
}

#verstuurd {
    display:none;
}

.keuzeButtonWrap {
    width:100%;
    float:left;
    margin-top:40px;
}

.GRloader {
    border: 3px solid #e8d6c8; /* Cirkel */
    border-top: 3px solid #756d67; /* Stukje */
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 2s linear infinite;
    display:none;
    float:left;
    margin-left:10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}