@import url("reset.css");
@import url("scrollable.css");

/* 
	Theme Name: KOSU Oklahoma State Public Radio
	Theme URL: http://www.kosu.org/
	Description: A Wordpress theme for the KOSU radio station
	Author: Lorien Faulkner
	Author URI:
	Version: 1.0	
	
	Last Updated: 
	
	LCF's brain refresher:
		
	CSS IDs are unique (i.e. #header, #wrap, #navabar) instances.  No duplicate IDs on a page!
*/

/* Table of Contents
----------------------------------------*/
/*
1. Color Glossary
2. Global
3. Masthead
4. Navigation
5. Content
6. Features
7. Footer
8. Page Templates
*/


/* Color Glossary
----------------------------------------*/

/*
# Bright Orange (-): #DD5900
# Dark Blue (links): #0084DD
# Medium Blue (-): #7FC1EE
# Light Blue (borders): #BFE0F6
# Faint Blue (carousel background, footer background): #E1EDFA
# Off-white (backgrounds): #F0F2FC
# Off-black (copy): #202020
*/

/* Global
----------------------------------------*/

body {

	background-color: #F0F2FC;
	background-image: url(../images/background.jpg);
	background-repeat: repeat-x;
	color: #202020;
	font-family: arial, sans-serif;
}

a:link, a:visited {

	color:#0084DD;
	text-decoration: none;

}

strong, b {

	font-weight: bold;
	
}

i, em {

	font-style: italic;
	
}

h1 {

	font-size: 24px;
	line-height: 90%;
	z-index: 150; 

}

/* Masthead
----------------------------------------*/

#masthead {

	background-image: url(../images/mastheadBackground.jpg);
	background-repeat: no-repeat;
	height: 275px;
	overflow: hidden;

}

#logo {

	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 100;
}

#mastheadLayer {

	position: absolute;
	top: 90px;
	left: 424px;
	z-index: 10;

}

.mastheadImage {

	float: left;
	position: relative;
}

.mastheadCopy {

	position: relative;
	width: 400px;
	z-index: 100;
	top: 30px;
	left: 15px;
}

.mastheadCopy p {

	font-size: 12px;
	margin-top: 10px;

}

#mastheadNav {

	position: relative;
	width: 400px;
	z-index: 30;
	top: -102px;
	left: 464px;
	
}

#mastheadNav ul {

}

#mastheadNav li {

	cursor:pointer;
	display: inline;
	width: 20px;
	height: 20px;
	margin: 0px 8px 0px 0px;
	background-image: url(../images/masthead_nav_default.png);
	background-repeat: no-repeat;

}

#mastheadNav .active {

	background-image: url(../images/masthead_nav_select.png);
	background-repeat: no-repeat;

}

/* Navigation
----------------------------------------*/


.announcement {

	margin: 0px 0px 10px 20px;
	padding: 3px 25px 0px 25px;
	height: 25px;
	background-image: url(../images/announcement.gif);
	background-repeat: no-repeat;
	color: white;
}

.announcement a{

	color: white;
	text-decoration: underline;
}


.navigation {

	position: relative;
	top: 10px;
	left: 256px;
	z-index: 100;
	height: 42px;
}

.navigation li {

	display: inline;
	list-style-type: none;
	margin-right: 15px;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;

}

.navigationFooter {

	margin: 0px 0px 10px 20px;
}

.navigationFooter li {

	display: inline;
	list-style-type: none;
	margin-right: 15px;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;

}

.altColor a {

	color: #F0F2FC !important;

}

#cse-search-box {

	position: relative;
	top: 3px;
	left: 400px;
	z-index: 100;
	
}

/* Contents
----------------------------------------*/

#content {

	clear: both;
	width: 880px;
	margin: 10px 20px 20px 0px;

}

#content.home {
	width: 1100px;	
}

#calendar { 

	float: left;
	
}

.story {

	float: left;	
	width: 400px;
	margin: 0px 20px 20px 20px;

}

.story img {

	border: 1px solid black;
	
}

.copy p {

	color:#202020;
	font-size:12px;
	margin:10px 0 0;

}

.storyAds {

	margin: 0px 0px 0px 0px;
	float: left;
	border: none !important;
}

.column {

	width: 200px;
	margin: 0px 0px 40px 20px;
	float: left;
	
}

.columnAd {

	width: 200px;
	margin: 0px 0px 20px 00px;
	
}

.column img {

	border: 1px solid black;
	
}

.attrib {

	float: right;
	font-size: 9px;
	color: #999999;
	
}

.columnSingle {

	width: 200px;
	margin: 0px 0px 40px 20px;
	float: left;
	
}

.columnSingle img {

	border: 1px solid black;
	margin: 0px 0px 10px 0px;
	
}

.columnSingle li {

	font-size: 12px;
	margin: 7px 0px 0px 13px;
	

}

.section {

	margin: 13px 0px 0px 0px;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;

}

.sectionSingle {

	margin: 2px 0px 10px 0px;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;

}

.related {

	margin: 0px 0px 0px 0px;
	font-size: 14px;
	font-weight: bold;

}

.more {

	margin: 3px 0px 0px 0px;
	float: right;
	font-size: 10px;

}

.headline {

	font-size: 12px;
	margin: 15px 0px 0px 0px;
	height: 2em;

}

.headlineStory {

	font-size: 14px;
	margin: 0px 0px 0px 0px;
	font-weight: bold;
}

.headlineStoryImage {

	margin: 15px 0px 0px 0px;

}

.lede {

	font-size: 12px;
	color: #202020;
	margin: 10px 0px 10px 0px;
	height: 4em;
	overflow: hidden;
}

.column ul {

}

.column li {

	font-size: 12px;
	margin: 3px 0px 0px 13px;

}

.sidebar1 {

	float: left;
	width: 200px;
	margin: 0px 0px 0px 10px;

}

.sidebar1 ul {

	margin: 0px 0px 20px 0px;
	
}

.sidebar1 li {

	font-size: 12px;
	margin: 10px 0px 0px 13px;
	
}

.sidebar2 {

	float: right;
	width: 200px;

}

.widgetTitle {

	font-size: 14px;
	margin: 0px 0px 0px 0px;
	font-weight: bold;
}

.archive {

	width: 400px;
	margin: 0px 20px 20px 20px;
	float: left;

}

.archiveImage {

	min-height: 80px;
	margin: 10px 0px 0px 0px;
	
}

.archiveImage img {

	border: 1px solid black;
	margin: 0px 0px 0px 10px;
	float: right;

}

.archiveNoImage {

	min-height: 80px;
	margin: 10px 0px 0px 0px;

}

.archiveCat {

	font-size: 14px;
	margin: 0px 0px 0px 0px;
	font-weight: bold;

}

.archive h1 {

	font-size: 12px;

}

.archive p {

	font-size: 12px;

}

.columnArchive {

	width: 200px;
	margin: 0px 0px 40px 20px;
	float: left;
	
}

.columnArchive img {

	border: 1px solid black;
	margin: 0px 0px 10px 0px;
	
}

.columnArchive li {

	font-size: 12px;
	margin: 7px 0px 0px 13px;
	
}

#printableGuide {

	margin: 20px 0px 0px 25px;
	width: 619px;
	clear: both;
	float: left;
	border: 1px solid #7FC1EE;
	background-color: #BFE0F6;
	font-size: 12px;
	padding: 5px;
	
}

#pGuide2 {

	margin: 20px 0px 20px 20px;
	width: 641px;
	clear: both;
	float: left;
	background-image: url(../images/pGuide2Background.png);
	background-repeat: repeat-y;
	
}

#pGuide2Nav {

	height: 25px;
	background-image: url(../images/pGuide2NavBackground.png);
	background-repeat: no-repeat;
	
}

.pGuide2NavText {

	float: right;
	margin: 5px 15px 0 0;

}

#pGuide2OnAir h1 {

	margin: 0 0 10px 22px;
	font-size: 24px;
	font-weight: bold;
	text-transform: uppercase;
	color: #0084DD;

}

#pGuide2OnAirFeature {

	margin: 0 0 0 15px;

}

#pGuide2OnAirFeature h2 {

	font-weight: bold;

}

#pGuide2Programs {

	width: 641px;
	clear: both;
	float: left;
	background-image: url(../images/pGuide2ProgramsBackground.png);
	background-repeat: repeat-y;

}

#pGuide2Morning {

	margin: 0 0 0 22px;
	width: 288px;
	float: left;
	
}

.morning {
	
	margin: 0 0 10px 22px !important;
	padding: 0 0 10px 0;
	font-size: 24px;
	font-weight: bold;
	text-transform: uppercase;
	color: #0084DD;
	border-bottom: 1px solid #7BBDED;
	
}

#pGuide2Evening {

	margin: 0 0 0 22px;
	width: 288px;
	float: left;

}

.evening {
	
	margin: 0 0 10px 22px !important;
	padding: 0 0 10px 0;
	font-size: 24px;
	font-weight: bold;
	text-transform: uppercase;
	color: #0084DD;
	border-bottom: 1px solid #7BBDED;
	
}

.pGuide2Entry {

	height: 80px;
	margin: 10px 0 0 0;
	line-height: 100%;

}

.pGuide2EntryTime {

	padding: 0 0 0 20px;
	background-image: url(../images/pGuide2Clock.png);
	background-repeat: no-repeat;
	font-size: .7em;
	font-weight: bold;

}

.pGuide2EntryTitle {

	font-size: .9em;
	font-weight: bold;
	font-style: italic; 

}

.pGuide2EntryDesc {

	font-size: .75em;
	line-height: 1em;

}

#pGuide2Footer {

	float: left;
	width: 641px;
	height: 10px;
	background-image: url(../images/pGuide2Footer.png);
	background-repeat: no-repeat;
	
}

.pGuide2panesUpcoming {

	padding: 0px 10px 0px 10px;
	width: 570px;
	margin-bottom: 5px;
	float: left;

}

.pGuide2panesUpcoming h1 {

	margin: 0px 0px 10px 0px;
	font-size:14px;
	font-weight:100;
	text-transform:uppercase;

}

.pGuide2panesUpcoming img {

	margin: 0px 10px 10px 0px !important;
	top: 0 !important;
	float: left;

}

.pGuide2panesUpcoming p {

	font-size: 12px;
	text-transform: none;
	font-weight: 100;

}

/* Features
----------------------------------------*/

#featuresBackground {

	clear: both;
	background-image: url(../images/features_background.png);
	background-repeat: repeat-x;
	
}

#features {

	height: 500px;
	width: 900px;
	font-size: 12px;
	font-weight: bold;
	background-image: url(../images/features_panel_background.png);
	background-repeat: no-repeat;
	text-transform: uppercase;

}

#features img {

	margin: 0px 10px 0px 0px;
	clear: both;
	position: relative;
	top: 3px;

}

#featureAdSpace {

	float: left;
	width: 200px;
	margin: 20px 0px 0px 20px;

}

.featuresAd {

	margin-top: 10px;
	
}

.panes {

	margin: 55px 0px 0px 50px;
	width: 600px;
	float: left;
	position:relative;

}

.paneFirst {

	position:absolute;
	top: 0px;
	left: 0px;

}

.paneHidden {

	position:absolute;
	top: 0px;
	left: 0px;
	display:none;

}

.panesTitle {

	margin: 0px 0px 10px 10px;
	font-size:14px;
	font-weight:bold;
	text-transform:uppercase;

}

.panesFeature {

	clear: both;
	padding: 10px;
	margin-bottom: 15px;
	width: 570px;
	height: 110px;
	background-image: url(../images/panes_feature_background.png);
	background-repeat: no-repeat;

}

.panesFeature h1 {

	clear: both;
	font-size: 24px;
	color: #F0F2FC;
	margin-bottom: 10px;

}

.panesFeature img {

	margin: 0px 10px 10px 0px !important;
	top: 0 !important;
	float: left;

}

.panesFeature p {

	font-size: 12px;
	text-transform: none;
	font-weight: 100;
	margin-top: 5px;

}

.panesUpcoming {

	padding: 0px 10px 0px 10px;
	width: 570px;
	height: 110px;
	margin-bottom: 5px;

}

.panesUpcoming h1 {

	margin: 0px 0px 10px 0px;
	font-size:14px;
	font-weight:100;
	text-transform:uppercase;

}

.panesUpcoming img {

	margin: 0px 10px 10px 0px !important;
	top: 0 !important;
	float: left;

}

.panesUpcoming p {

	font-size: 12px;
	text-transform: none;
	font-weight: 100;
	margin-top: 5px;

}

.panesEvent {

	padding: 0px 10px 0px 10px;
	width: 570px;
	margin-bottom: 5px;

}

.panesEvent h1 {

	margin: 10px 0px 0px 0px;
	font-size:14px;
	font-weight:100;
	text-transform:uppercase;

}

.panesEvent img {

	margin: 0px 10px 10px 0px !important;
	top: 0 !important;
	float: left;

}

.panesEvent p {

	font-size: 12px;
	text-transform: none;
	font-weight: 100;
	margin-top: 5px;

}

/* root element for tabs  */
ul.tabs { 
	list-style:none; 
	top: 35px;
	left: 30px;
	height:30px;
	position: relative;
	width: 600px;
	float: left;
}

/* single tab */
ul.tabs li { 
	float:left;	 
	text-indent:0;
	padding:0px 0px 0px 0px;
	width: 120px;
	margin:1px 0px 0px 0px !important;
	list-style-image:none !important; 
}

/* link inside the tab. uses a background image */
ul.tabs a { 
	background-image: none;
	display:block;
	height: 26px;
	width: 120px;  
	line-height:26px;
	text-decoration:none;
	padding:0px;
	margin:0px;	
	right: 3px;
	text-align: center;
	vertical-align: middle;
	color: #7FC1EE;
}

ul.tabs a:active {
	outline:none;		
}

/* when mouse enters the tab move the background image */
ul.tabs a:hover {

}

/* active tab uses a class name "current". it's highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {	
	
	background-image: url(../images/feature_tab_select.png);
	background-repeat: no-repeat;
	cursor:default !important; 
	color:#F0F2FC !important;
}

/* initially all panes are hidden */ 
div.panes div.pane {
	display:none;
}

/* Footer
----------------------------------------*/

#footer {

	width: 100%;
	height: 110px;
	background-color: #0084DD;
	margin: 0px 0px 0px 0px;
	padding: 10px 0px 0px 0px;
	clear: both;

}

.info {

	float: left;
	width: 450px;

}

.logos {

	position: relative;
	bottom: 1px;
	float: left;
	width: 430px;

}

#footer p {

	font-size: 10px;
	color: #BFE0F6;
	margin: 0px 0px 0px 20px;

}


#footer img {

	float: right;
	margin: 0px 0px 0px 20px;
	
}


/* Page Templates
----------------------------------------*/

#tableOfContents {

	width: 50%;
	margin: 20px;
	padding: 10px;
	background-color: #E1EDFA;
	border: 1px solid #BFE0F6;

}

#tableOfContents h1{

	color: #DD5900;
	font-size:14px;
	margin-bottom: 5px;
	font-weight:bold;
	text-transform:uppercase;
	
}

#tableOfContents li{

	margin-left:20px;
	font-size:12px;
	font-weight:100;

}

#page {

	width: 100%;
	padding: 0px 20px 0px 20px;
}

#page h1 {

	color: #DD5900;
	margin: 20px 0px 0px 10px;
	font-size:24px;
	font-weight:bold;
	text-transform:uppercase;
	
}
#page h2 {

	padding: 10px 10px 0px 10px;
	font-size:14px;
	font-weight:bold;
	text-transform:uppercase;
	
}

#page p {

	padding: 10px 10px 0px 10px;
	font-size:12px;
	font-weight:100;
	
}

#programGuide {

	width: 100%;
	padding: 0px 20px 0px 20px;
}

#programGuide h1 {

	color: #DD5900;
	margin: 20px 0px 0px 10px;
	font-size:24px;
	font-weight:bold;
	text-transform:uppercase;
	
}
#programGuide h2 {

	padding: 5px;
	font-size:14px;
	font-weight:bold;
	text-transform:uppercase;
	
}

#programGuide p {

	padding: 5px;
	font-size:12px;
	font-weight:100;
	
}
.programList {

	width: 100%;
	padding: 5px;

}

.programListAlt {

	width: 100%;
	padding: 5px;
	background-color: #E1EDFA;
	border-top: 1px solid #BFE0F6;
	
}

ul.event-list, ul.event-list li {
	list-style-type: none;
	list-style-image: none;
	background: none;
	margin: 0;
	padding: 0;
}

ul.event-list {
	margin: 0 0 0 10px;
}

ul.event-list li {
	display: block;
	margin: 15px 0 0 0;
	padding: 0 0 0 22px;
	background: url(../images/calendar_icon.png) no-repeat left 3px;
}

.event-title a {
	font-weight: bold;	
}

.event-details {
	font-size: 12px;
	color: #555555;
}

.event-venue {
	color: #888888;	
}
.start-over-link {
	font-size: 12px;
	margin: 0 0 0 10px;
}

#eom label {
	font-weight: bold;	
}

#eom .email {
	margin: 0 0 15px 0;	
}

#eom .enter-email {
	margin: 15px 0 0 10px;
	font-size: 12px;
	background: url(../images/email_48.png) no-repeat top left;
	height: 48px;
	padding: 0 0 0 55px;
}

#eom .recurrence {
	font-size: 12px;	
	margin: 12px 0 0 10px;
	background: url(../images/sync_icon.png) no-repeat left 3px;
	min-height: 27px;
	padding: 0 0 0 35px;
}

#page #eom .recurrence p {
	margin: 0px;	
	padding: 0px;
}

#eom h3 {
	display: block;
	padding: 0 0 0 10px;
	font-weight: bold;
	margin: 15px 0 0 0;
}

#eom img {
	padding: 0 0 0 10px;
}

#eom p.dates, #eom p.venue-address {
	padding-top: 0px;	
	color: #666666;
}

#features ul.tabs li.event {
	display: none;
}

.date-container {
	width: 50px;
	height: 50px;
	position: relative;
	float: left;
	background: #49c0f0;
	background: -moz-linear-gradient(top,  #49c0f0 0%, #268cbf 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#49c0f0), color-stop(100%,#268cbf));
	background: -webkit-linear-gradient(top,  #49c0f0 0%,#268cbf 100%);
	background: -o-linear-gradient(top,  #49c0f0 0%,#268cbf 100%);
	background: -ms-linear-gradient(top,  #49c0f0 0%,#268cbf 100%);
	background: linear-gradient(top,  #49c0f0 0%,#268cbf 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#49c0f0', endColorstr='#268cbf',GradientType=0 );
	color: white;
	font-size: 26px;
	font-weight: bold;
	text-align: right;
	margin: 5px 0 5px 5px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	text-shadow: 0px -1px 0px rgba(0,0,0,0.8);
	box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.day {
	position: absolute;
	right: 9px;
	top: 3px;
}

.month-year {
	color: white;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	background: black;
	width: 50px;
	margin-top: -12px;
	position: absolute;
	bottom: 0;
	left: 0;
	padding-top: 2px;
	padding-bottom: 3px;
	border-radius: 0px 0px 5px 5px;
	-moz-border-radius: 0px 0px 5px 5px;
	-webkit-border-radius: 0px 0px 5px 5px;
	-o-border-radius: 0px 0px 5px 5px;
}

.clearfix {
    clear: both;
}

#page .event-listing-container p.event-info {
    margin-left: 15px;
    position: relative;
    top: 3px;
    font-size: 12px;
    left: 10px;
    color: #666;
}

#page .event-listing-container p.event-info a {
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}

#page .event-listing-container p.event-info a:hover {
    color: #0060a6;
    text-decoration: underline;
} 

#page ul.events-list-container {
    background: white;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    border: 1px solid #ccc;
    clear: both;
}

#page ul li.events-list {
    list-style: none;
}

#page ul li.events-list:nth-child(even) {
    background: #f3f3f3;
}

#page ul li.events-list:first-child {
    border-radius: 5px 5px 0px 0px;
    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    -o-border-radius: 5px 5px 0px 0px;
}


#page ul li.events-list:last-child {
    border-radius: 0px 0px 5px 5px;
    -moz-border-radius: 0px 0px 5px 5px;
    -webkit-border-radius: 0px 0px 5px 5px;
    -o-border-radius: 0px 0px 5px 5px;
}

#page p.count-events {
    padding-left: 0px;
    font-size: 14px;
    margin-bottom: -25px;
    color: #666;
}

#page a.add-event-button {
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    border: 1px solid #81bde1;
    background: #e1ffff;
    color: #005b9c;
    background: -moz-linear-gradient(top,  #e1ffff 0%, #e1ffff 7%, #e1ffff 12%, #fdffff 12%, #e6f8fd 30%, #c8eefb 54%, #bee4f8 75%, #b1d8f5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e1ffff), color-stop(7%,#e1ffff), color-stop(12%,#e1ffff), color-stop(12%,#fdffff), color-stop(30%,#e6f8fd), color-stop(54%,#c8eefb), color-stop(75%,#bee4f8), color-stop(100%,#b1d8f5));
    background: -webkit-linear-gradient(top,  #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%);
    background: -o-linear-gradient(top,  #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%);
    background: -ms-linear-gradient(top,  #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%);
    background: linear-gradient(top,  #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1ffff', endColorstr='#b1d8f5',GradientType=0 );
}

#page a.add-event-button:hover {
    background: #b2e1ff;
    background: -moz-linear-gradient(top,  #b2e1ff 0%, #66b6fc 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2e1ff), color-stop(100%,#66b6fc));
    background: -webkit-linear-gradient(top,  #b2e1ff 0%,#66b6fc 100%);
    background: -o-linear-gradient(top,  #b2e1ff 0%,#66b6fc 100%);
    background: -ms-linear-gradient(top,  #b2e1ff 0%,#66b6fc 100%);
    background: linear-gradient(top,  #b2e1ff 0%,#66b6fc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2e1ff', endColorstr='#66b6fc',GradientType=0 );
    cursor: pointer;
}

#page p.fix-margin {
    padding-left: 0;
}

div.pagination {
    margin: 8px 0;
    float: right;
}

.pagination a, a.prev, a.next {
    padding: 3px 5px;
    background: #7abede;
    color: white;
    border-radius: 3px;
    margin: 3px;
}

.pagination a:hover, a.prev:hover, a.next:hover {
    padding: 3px 5px;
    background: #18a5d2;
    color: white;
    border-radius: 3px;
    margin: 3px;
}

.pagination span.current, .pagination span.disabled {
    padding: 3px 5px;
    background: #ccc;
    color: white;
    border-radius: 3px;
    margin: 3px;
}