@font-face {
    font-family: 'Battlefield';
    src:url('../fonts/Battlefield.ttf.woff') format('woff'),
        url('../fonts/Battlefield.ttf.svg#Battlefield') format('svg'),
        url('../fonts/Battlefield.ttf.eot'),
        url('../fonts/Battlefield.ttf.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
}
body {
    margin: 10px 20px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 18px;
    background-color:#ff0000;
}

body>* {
    background-color:#ffffff;
    max-width:1150px;
    margin:15px auto;
}

main {
    position:relative;
}

a {
    text-decoration:none;
    color:#666666;
}
a[href*="/one-liners/"] {
    color:#FF0000;
}
a[href*="/shaggy-dog-stories/"] {
    color:#000099;
}
a[href*="/punter-comic/"] {
    color:#009900;
}
a[href*="/dotty-definitions/"] {
    color:#333333;
}

.header {
    position:relative;
}

.bpdc-logo {
    font-family: 'Battlefield';
    position:relative;
    text-decoration:none;
    display:block;
    color:rgba(245,200,200,0.98);
    font-size:45px;
    height:1.4em;
    width:9em;
    margin:0 auto;
    background: radial-gradient(ellipse at center, rgba(255,127,127,0.10) 0%,rgba(255,256,256,0.10) 60%,rgba(255,255,255,0) 100%);
}
.bpdc-logo>span {
    text-shadow: -1px 1px 3px rgba(0,0,0,0.7), 1px -1px 3px rgba(0,0,0,0.7);
    position:absolute;
    background: radial-gradient(ellipse at center, rgba(255,0,0,0.10) 0%,rgba(255,256,256,0.10) 75%,rgba(255,255,255,0) 100%);
    min-height: 0.75em;
}
.bpdc-logo>span:first-child {
    font-size:1em;
    top:0;
    left:0;
}
.bpdc-logo>span:nth-child(2) {
    font-size:1.2em;
    color: rgba(255,255,255,0.98);
    top:0.25em;
    left:1.9em;
    transform: rotate(-2deg);
}
.bpdc-logo>span:nth-child(3) {
    font-size:0.8em;
    top:0.80em;
    left:7.75em;
}
.bpdc-strapline {
    display:block;
    text-align: center;
    font-weight: bold;
    font-size: 1.2em;
    line-height: 2em;
}

.bpdc-topleft {
    position:absolute;
    top:0;
    left:0;
    width:20%;
    height:100px;
}

.bpdc-topright {
    position:absolute;
    top:0;
    right:0;
    width:20%;
    height:100px;
}

.bpdc-search {
    display:block;
    margin:auto;
    width:70%;
    padding-top:2em;
    position:relative;
}

.finder>label {
    display:none;
}

.finder>input {
    width:80%;
}
.bpdc-search button {
    font-size:0;
    width:2rem;
    padding:5px;
    margin:0;
    border:0;
    position:absolute;
    top:calc(2rem - 5px);
    left:calc(80% - 1rem);
    background:none;
}
.bpdc-search button>span {
    font-size:1rem;
}

.breadcrumb a, .bpdc-topleft a, .bpdc-topright a {
    text-decoration:none;
    color:#666666;
}

.bpdc-topleft>ul {
    padding:22px 60px;
}

.bpdc-topleft li {
    list-style:none;
    white-space:nowrap;
}

.container {
    padding: 5px 0;
    clear:both;
}

.fields-container {
    font-size:1.5em;
    position:relative;
}
.joke-title {
    font-size:1.35em;
    font-weight:bold;
    line-height:1.5em;
}

.when-jotd {
    position: absolute;
    bottom: -4.5em;
}

.container>* {
    padding: 0 40px;
}

dl, dd, ul, li {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

.article-body ul, .article-body dl {
    padding: 0 40px;
}

.article-info, .when-jotd {
    color:#666666;
    font-size:0.8rem;
    display:inline-block;
}
.article-info>dd {
    display:inline-block;
    padding-right:10px;
}
.article-info a {
    color:#666666;
}

.breadcrumb>li {
    list-style:none;
    display:inline-block;
}

.pager>li {
    margin:10px 0;
    list-style:none;
    display:inline-block;
    width:calc(50% - 20px);
}
.pager>li>a {
    padding:5px 10px;
    border-radius:5px;
    background:#ff0000;
    color:#ffffff;
    text-decoration:none;
}
.pager>li>a.disabled {
    background:#cccccc;
    color:#dddddd;
}
.pager>li>a:not(.disabled):hover {
    background:#dd0000;
    border:solid 1px #ff0000;
}
.pager>li.previous {
    text-align:left;
}
.pager>li.next {
    text-align:right;
}
.pager>li.next:first-child {
    width:calc(100% - 40px);
}

.quick-links-menu {
    text-align:center;
    margin:auto;
}
.quick-links-menu a {
    text-decoration:none;
    color:#660000;
}
.quick-links-menu a:hover {
    text-decoration:none;
    color:#660000;
    text-shadow: -1px -1px 0 #ffdddd, 1px -1px 0 #ffdddd, -1px 1px 0 #ffdddd, 1px 1px 0 #ffdddd;
}
.quick-links-menu>li {
    list-style:none;
    display:inline-block;
    position:relative;
    margin:10px;
    padding:0;
}
.quick-links-menu>li>span {
    display:block;
    position:relative;
    overflow:hidden;
    width:100px;
    height:100px;
}

.quick-links-menu>li>span>span {
    position:absolute;
    width:100px;
    height:100px;
    font-family:battlefield;
    font-size:13px;
    left:0;
    top:0;
    bottom:0;
    right:0;
    padding-top:24px;
    margin:auto;
    color:#ee0000;
    text-shadow: -1px -1px 0 #ffdddd, 1px -1px 0 #ffdddd, -1px 1px 0 #ffdddd, 1px 1px 0 #ffdddd;
    text-align: center;
    background:rgba(255,255,255,0.4);
}
.quick-links-menu>li>ul {
    position:absolute;
    display:block;
    left:0;
    top:0;
    bottom:0;
    right:0;
    overflow:hidden;
}
.quick-links-menu>li>ul>li:first-child {
    list-style:none;
    position:absolute;
    width: 150px;
    height: 75px;
    top: -15px;
    left: -51px;
    text-align: center;
    transform: rotate(-45deg);
    font-size:1.2em;
    font-weight:bold;
    opacity:0;
}
.quick-links-menu>li>ul>li:first-child:hover {
    opacity:1;
}
.quick-links-menu>li>ul>li:first-child>a {
    display:block;
    background:rgba(255,200,200,0.7);
    padding-top: 40px;
    height:calc(100% - 40px);
    width:100%;
}

.quick-links-menu>li>ul>li:nth-child(2) {
    list-style:none;
    position:absolute;
    width: 150px;
    height: 170px;
    top: 25px;
    left: 35px;
    text-align: center;
    transform: rotate(-45deg);
    font-size:1.2em;
    font-weight:bold;
    opacity:0;
}
.quick-links-menu>li>ul>li:nth-child(2):hover {
    opacity:1;
}
.quick-links-menu>li>ul>li:nth-child(2)>a {
    display:block;
    background:rgba(255,200,200,0.7);
    padding-top: 20px;
    height:calc(100% - 40px);
    width:100%;
}

.bpdc-belowmain>div {
    vertical-align: top;
    border:solid 5px #ff0000;
    border-radius:10px;
    margin:10px;
    width:calc(60% - 40px);
    min-height:180px;
    position:relative;
    padding:0 25px 0 60px;
    display:inline-block;
}
.bpdc-belowmain>div:nth-child(2), .bpdc-belowmain>div:nth-child(3) {
    width:calc(20% - 40px);
}

.latest-jokes li, .front-page-favourites li, .weblink-category li {
    list-style:none;
    font-size:1.5em;
    line-height: 1.5em;
}

.jotd .jokeoftheday {
    padding: 10px;
}

.bpdc-belowmain .jotd-header, .bpdc-belowmain .page-header {
    position:absolute;
    font-family:battlefield;
    transform: rotate(-90deg);
    color:rgb(255,100,100);
    text-shadow: -1px 1px 1px rgba(0,0,0,0.9), 1px -1px 3px rgba(0,0,0,0.9);
    font-size:1.5em;
    left:-50px;
    top:45px;
    width:8em;
}
.jotd .when-jotd {
    display:none;
}

div.rss-feed {
    position: absolute;
    top: -35px;
    right: 50px;
    z-index: 1;
}

.feedslist {
    padding:10px 5px;
}

.item-pagebpdc-comic .item-image {
    text-align:center;
}
.item-pagebpdc-comic .item-image>img {
    max-width:100%;
}

footer>div {
    padding:20px 40px;
    text-align: center;
    color:#666666;
}

.footer-menus>ul.menu {
    display:inline-block;
    vertical-align: top;
    width:300px;
    margin:0;
    padding: 2em 0 0 0;
}
.footer-menus>ul.menu>li {
    list-style:none;
    padding:0 20%;
    text-align:left;
}
.footer-menus>ul.menu>li>a {
    text-decoration:none;
    color:#666666;
}

#finder-search {
    padding: 10px;
    border:solid 1px black;
}
#finder-search>fieldset {
    border:none;
}
#finder-search>fieldset, #finder-search>div {
    display:inline-block;
}
#advancedSearch {
    padding: 0 10px;
}

.pagination {
    font-size:1.2em;
    color:#666666;
    text-align: center;
}
.pagination>* {
    display:inline-block;
    padding:0 10px;
}
.pagination li {
    display:inline-block;
    list-style:none;
}
.pagination a {
    padding: 2px 4px 2px 2px;
    color:#666666;
    text-decoration:none;
    display:inline-block;
    width:1em;
    height:1em;
}
.pagination .active a {
    background: radial-gradient(ellipse at center, rgba(255,0,0,0.50) 0%,rgba(255,256,256,0.30) 85%,rgba(255,255,255,0) 100%);
    color:#333333;
}

.content-rating, .content-rating+form {
    display:inline-block;
}
.content-rating+form select, .content-rating+form input {
    padding: 5px 10px;
    border-radius: 5px;
    background: #ff0000;
    color: #ffffff;
    border:none;
}
.content-rating+form select {
    padding-right:25px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance:none;
    background-image:
        linear-gradient(45deg, transparent 50%, #ffffff 50%),
        linear-gradient(135deg, #ffffff 50%, transparent 50%);
    background-position:
        calc(100% - 15px) calc(1em + 1px),
        calc(100% - 10px) calc(1em + 1px);
    background-size:
        5px 5px,
        5px 5px;
    background-repeat: no-repeat;
}
.content-rating {
    color:#666666;
    padding-right:10px;
}
.content-rating .icon-star {
    color:#DDDD00;
}
.content-rating .icon-star-empty {
    color:#CCCCCC;
}
.readmore-pl {
    display:inline-block;
    margin: 0;
}
.readmore {
    color:#666666;
    padding-right:10px;
}
.readmore a {
    color:#666666;
}
.tooltip {
	position: absolute;
	z-index: 1030;
	display: block;
	visibility: visible;
	font-size: 11px;
	line-height: 1.4;
	opacity: 0;
	filter: alpha(opacity=0);
}
.tooltip.in {
	opacity: 0.8;
	filter: alpha(opacity=80);
}
.tooltip.top {
	margin-top: -3px;
	padding: 5px 0;
}
.tooltip.right {
	margin-left: 3px;
	padding: 0 5px;
}
.tooltip.bottom {
	margin-top: 3px;
	padding: 5px 0;
}
.tooltip.left {
	margin-left: -3px;
	padding: 0 5px;
}
.tooltip-inner {
	max-width: 200px;
	padding: 8px;
	color: #fff;
	text-align: center;
	text-decoration: none;
	background-color: #000;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.tooltip-arrow {
	position: absolute;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
}
.tooltip.top .tooltip-arrow {
	bottom: 0;
	left: 50%;
	margin-left: -5px;
	border-width: 5px 5px 0;
	border-top-color: #000;
}
.tooltip.right .tooltip-arrow {
	top: 50%;
	left: 0;
	margin-top: -5px;
	border-width: 5px 5px 5px 0;
	border-right-color: #000;
}
.tooltip.left .tooltip-arrow {
	top: 50%;
	right: 0;
	margin-top: -5px;
	border-width: 5px 0 5px 5px;
	border-left-color: #000;
}
.tooltip.bottom .tooltip-arrow {
	top: 0;
	left: 50%;
	margin-left: -5px;
	border-width: 0 5px 5px;
	border-bottom-color: #000;
}

@media(max-width:1130px) {
    .quick-links-menu {
        max-width: 708px;
    }
    .footer-menus > ul.menu {
        width:230px;
    }
    
}
@media(max-width:875px) {
    .bpdc-belowmain>div {
        display:block;
        width:auto;
    }
    .bpdc-belowmain>div:nth-child(2), .bpdc-belowmain>div:nth-child(3) {
        width:auto;
    }
}
@media(max-width:850px) {
    .bpdc-topleft {
        float: left;
    }
    .bpdc-topright {
        float:right;
    }
    .bpdc-topleft, .bpdc-topright {
        position:relative;
        width: 50%;
        background: #ffffff;
        margin-bottom: 20px;
    }
    .footer-menus > ul.menu {
        width:185px;
    }
    .footer-menus > ul.menu>li {
        padding:0 5%;
    }
    .container > * {
        padding: 0 30px;
    }
}
@media(max-width:475px) {
    .bpdc-logo {
        font-size:38px;
    }
    .quick-links-menu > li {
        margin:5px;
    }
    .latest-jokes li, .front-page-favourites li, .weblink-category li {
        font-size:1.25em;
    }
    .joke-title {
        font-size:1.25em;
    }
    .fields-container {
        font-size: 1.25em;
    }
    .bpdc-belowmain>div {
        margin-left:1px;
        margin-right:1px;
    }
    .container > * {
        padding: 0 20px;
    }
}
@media(max-width:380px) {
    .bpdc-logo {
        font-size:32px;
    }
    .quick-links-menu > li {
        margin:1px;
    }
}