﻿@font-face {
    font-family: Kelson;
    src: url('/custompages/thebeano/font/Kelson_Rg.otf');
}

body {
    background-color: #2b3068;
    font-family: 'Open Sans', sans-serif;
}

#divHeader {
    max-width:100%;
    font-family:Kelson;
}

#divHeaderResize {
    max-width:100%;
    font-family:Kelson;
    display:none;
}

#divWrapper {
    max-width: 100%;
    margin: 0px auto;
    height:auto;
}

#divColumns {
    text-align:center;
    margin-top:20px;
}

#divCol1 {
    /*float: left;*/
    max-width: 200px;
    display:inline-block;
    padding-left:15px;
    padding-right:15px;
    padding-bottom:15px;
    margin-left:auto;
    margin-right:auto;
    vertical-align:top;
    text-align:left;
}

#divCol1Resize {
    /*float: left;*/
    max-width: 400px;
    display:none;
    padding-left:15px;
    padding-right:15px;
    margin-bottom:30px;
    margin-left:auto;
    margin-right:auto;
    vertical-align:top;
    text-align:left;
}

#divCol2 {
    /*float: right;*/
    max-width: 900px;
    display:inline-block;
    padding-left:15px;
    padding-right:15px;
    margin-left:auto;
    margin-right:auto;
    text-align:left;
}

.box {
    border: 2px solid #fff;
    padding: 20px;
    margin: 0px 0px 10px 0px;
    background-color: white;
    height:auto;
    color:#2b3068;
}

h1 {
    margin: 0px;
}

p {
    font-weight:400;
    margin: 0px 0px 10px;
}

ul {
    font-size:12px;
    font-weight:700;
    margin: 0px 0px 10px;
}

li {
    text-indent:20px;
    font-weight:400;
    list-style:none;
}

.label {
    font-size:16px;
    font-weight:700;
    width:300px;
}

.textbox {
    max-width:500px;
    min-width:67%;
    background-color:#fafec1;
    height:25px;
    padding-left:10px;
    padding-right:10px;
}

.loginTextbox {
    max-width:500px;
    min-width:67%;
    background-color:#fff;
    height:30px;
    padding-left:10px;
    padding-right:10px;
    border:none;
}

.loginBox {
    max-width:400px;
    background-color:#fafec1;
    height:25px;
    min-width:300px;
    padding-left:10px;
    padding-right:10px;
}

.divText {
    margin-bottom:15px;
    display:inline;
    text-align:left;
    width:80%;
}

.divLabel {
    display:inline; 
    text-align:right; 
    padding-right:40px;
    margin-bottom:15px;
}

.button {
    color:#bf1c39;
    font-size:16px;
    width:70px;
    color:#fff;
    cursor:pointer;
    background-color:#ea222f;
    border:solid 1px;
    border-color:#ea222f;
    height:40px;
}

.promoButton {
    background-color:#e8e8e8;
    color:#000;
    width:100px;
    font-size:12px;
    font-weight:700;
    border-radius: 5px;
    border: 1px solid #000;
    height:25px;
}

input[type=checkbox].css-checkbox {
	position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
}

input[type=checkbox].css-checkbox + label.css-label {
	padding-left:23px;
	height:18px;
	display:inline-block;
	/*line-height:18px;*/
	background-repeat:no-repeat;
	background-position: 0 0;
	font-size:11px;
	vertical-align:middle;
	cursor:pointer;
}

input[type=checkbox].css-checkbox:checked + label.css-label {
	background-position: 0 -18px;
}

label.css-label {
	background-image:url(https://subscriber.pagesuite-professional.co.uk/custompages/TheBeano/img/chkBox.png);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
    /*color:#bf1c39;*/
    /*font-size:13px;*/
    /*max-width:400px;*/
    /*text-align:left;*/
}

.priceBox {
    width:170px;
    display:inline-block;
    margin-bottom:20px;
    vertical-align:top;
    cursor:pointer;
}

.priceHeader {
    padding-top:10px;
    padding-bottom:10px;
    width:100%;
    background-color:#ed1b24;
    color:#FFF;
    text-align:center;
    border-bottom:solid 5px #2b3068;
    font-weight:700;
}

.priceContent {
    height:33px;
    background-color:#eae7d4;
    font-size:16px;
    text-align:center;
}

.priceContentTextSingle {
    background-color:#eae7d4;
    font-size:16px;
    font-weight:700;
    text-align:center;
    padding-bottom:10px;
    padding-top:10px;
    color:#2a3168;
}

.priceContentText {
    background-color:#eae7d4;
    font-size:16px;
    font-weight:700;
    text-align:center;
    padding-top:15px;
    padding-bottom:15px;
    color:#2a3168;
}

.priceContentSave {
    background-color:#fff;
    font-size:18px;
    font-weight:700;
    color:#ed1b24;
    text-align:center;
    padding-bottom:5px;
    padding-top:5px;
    border-top:10px solid #fff;
    border-bottom:10px solid #fff;
}

.bestpriceBox {
    width:170px;
    display:inline-block;
    margin-bottom:20px;
    vertical-align:top;
    margin-top:-20px;
    cursor:pointer;
}

.bestpriceHeader {
    padding-top:10px;
    padding-bottom:10px;
    width:100%;
    background-color:#ffe401;
    color:#2a3168;
    text-align:center;
    border-bottom:solid 5px #2b3068;
    font-weight:700;
}

.bestpriceContent {
    height:30px;
    background-color:#fff;
    font-size:16px;
    text-align:center;
}

.bestpriceContentText {
    background-color:#fff;
    font-size:16px;
    font-weight:700;
    text-align:center;
    padding-top:15px;
    padding-bottom:15px;
    color:#2a3168;
}

.bestpriceContentSave {
    background-color:#eae7d4;
    font-size:18px;
    font-weight:700;
    text-align:center;
    padding-bottom:5px;
    padding-top:5px;
    border-top:10px solid #eae7d4;
    border-bottom:10px solid #eae7d4;
    color:#ed1b24;
}

.bestpriceContentImg {
    background-color:#fff;
    padding-bottom:10px;
    padding-top:10px;
}

@media only screen and (max-width:1200px) {
    #divCol1 {
        display:none;
    }
    #divCol1Resize {
        display:inline;
    }
    #divHeader{
        display:none;
    }
    #divHeaderResize{
        display:block;
    }
}

@media only screen and (max-width:1200px) {
    .divLabel {
        text-align:center;
        padding-left:20px;
    }

    .textbox {
        text-align:center;
        margin-left:10px;
        margin-right:10px;
    }
}

@media only screen and (max-width:912px) {
    .bestpriceHeader{
        margin-top:20px;
    }
}