/* ========================================================

	EXTRA STYLES

	Styles for extra content elements, such as home page items, news articles etc.
	This files should not be linked to directly from a web page. Link to 'extras.css' instead.
	This is to hide the styles from older browsers.
	
	Styles defined here include:
	
		News panel,
		Oyster and Congestion charge promotional panels,
		Small promotional slots,
		Modal links panel,
		Service update board,
		Live travel news elements,
		Modal homepage styles,
		Landing page navigation,
		3D panel styles,
		Error page styles
*/


/* NEWS PANEL */
/* This is the area at the top of the home and landing pages. It features:
   * Main story image, title and teaser
   * Other story links
   The news panel is also used on the modal landing pages.
*/
.news{
	float: left;
	padding-bottom: 19px;
	/*border-bottom: 1px solid #CCC;*/
	width: 520px;
}
.news .left{
	margin-right: 18px;
	margin-bottom: 0;
}
.news h1{
	font-size: 1.5em;
	border: 0 solid;
	padding: 0;
	margin-bottom: 8px;
}
.news p{
	padding-bottom: 10px;
	margin-bottom: 10px;
	line-height: 1.2em;
}

/* added due to issue in IE8*/
.news div p{
	float:left;
	width:248px
}


.news .linklist{
	margin-bottom: 0;
	float: left;
}
.news .timestamp{
	margin-top: 0;
}

/* BIG PROMOTIONS (homepage speech-bubble promos) */
.big-promotions {clear:both; background-image:  url('../images/promotional-speech-bubble.gif'); padding: 0; background: none; border-top: 0; margin-top: -17px;}
.big-promotions img{float: right;}
.bubble-promo {margin-top: 16px; float: left; background-image: url("/tfl-global/images/promotional-speech-bubble-shorter.gif"); padding: 0; background-position: 0px -13px; width: 256px;}
.bubble-promo.right {margin: 16px 0 0 7px;}
.bubble-promo div {display: inline-block; padding: 15px 0 7px 16px; background: url("/tfl-global/images/promotional-speech-bubble-bottom.gif") no-repeat bottom; width: 162px;}
.bubble-promo h2 {border: 0 solid; margin-bottom: 0;}
.big-promotions ul.linklist{margin-bottom: 9px;}




/* SMALL PROMOTIONS */
/* This is the area below the big promotions on the home page.
   Small promotions are also used on modal landing pages.
*/ 
.small-promotions{ 
	float: left;
	border-top: 1px solid #CCC;
	padding-top: 19px;
}
	
/* these styles are actually to close the speech bubbles of the 'big promotions' area on the homepage */
.small-promotions.homepage{
	border-top: 0 solid;
	background: url('../images/promotional-speech-bubble-b.gif') repeat-x;
	padding-top: 42px;
}
.small-promotions div{
	float: left;
	width: 251px;
}
.small-promotions h2{
	border: 0 solid;
	line-height: 1em;
	margin-bottom: 0px;
}
.small-promotions a.left{
	margin-right: 8px;
}
.small-promotions p{
	line-height: 1.2em;
}
#small-promo-1, /* legacy */
.small-promotions .first-item{
	margin-right: 18px;
}

.small-promotions ul.linklist.with-promo-img {margin-left: 0; width: 160px; float: right}

/* Small promotions (panel style) - classes .panel and .content added */
.small-promotions .panel {margin-bottom:0px;}
.small-promotions .panel a.left {margin: 0 7px 0 0; position: relative; top: -2px}
.small-promotions .panel a img {width: 67px; height: 67px;}
.small-promotions .panel h2 {line-height: 1em; border-bottom: 1px solid #ccc;}
.small-promotions .panel h2 a {top: 0;}
.small-promotions .panel p {margin-top: 6px; margin-right: 0; margin-bottom: 0;}
.small-promotions .panel ul.linklist.with-promo-img {width: 163px;}
.small-promotions div:first-child {margin-right: 18px;}
.small-promotions {margin-bottom: 17px;}
.small-promotions.homepage  {background: none;  padding-top: 1.7em;}
.column-full.small-promotions {padding-top: 0; border-top:0; overflow: hidden;}


/* MODAL LINKS */
/* The grey panel of links to the modal landing pages.
*/
#modelinks {
	background-color: #F2F2F1;
	padding: 9px;
	clear: both;
	margin-bottom: 12px;
	/*padding-bottom: 3.8em;*/
	
}
#modelinks div.clear{
	height:0px;
	overflow:hidden;
}
#modelinks ul li{
	float: left;
	width: 117px;
}
#modelinks ul.linklist { /* to remove grey space at bottom of mode links */
	margin-bottom: 0;
}

#modelinks li a,
#modelinks li a:visited {
	color: #000;
}

/* Generic panel .linklist-panel with columnar links eg. Getting around London panels */
.linklist-panel ul.linklist {float:left; margin-top:0;}	
.template-4 #main-content .linklist-panel.columns-3 ul li {float: left; width: 158px;}
.template-4 #main-content .linklist-panel.columns-4 ul li {float: left; width: 117px;}


/* SERVICE UPDATE BOARD  specific to right column (#supporting-content) */
#service-board.panel > * {margin: 0;}
#service-board.panel {position: relative; margin-bottom: 19px; background: none;}
#supporting-content #service-board.panel h2, #service-board.panel h2  {border-bottom:0; padding-left:8px; box-shadow: none; margin-bottom: 0; background-color: #f7f7f7;}
#service-board.panel .service-board-tabs h3 span {margin-right: 3px;}
#service-board.panel  p.update {margin:0; color: #3E3E3E; position: absolute; right: 7px; top: 3px; font-size: .9em;}

/* Tabs*/
#service-board.panel .service-board-tabs h3 {background-image:url(../images/service-board-tab-bg.gif)}
#service-board.panel .service-board-tabs h3 span, #service-board.panel .service-board-tabs h3, #service-board.panel .service-board-tabs h3 a {padding: 4px 5px 6px 5px;}
#service-board.panel .service-board-tabs h3 span { background: #fff; border-top: 1px solid #ccc;border-right: 1px solid #ccc; border-left: 1px solid #ccc; padding-top: 2px;}
#service-board.panel .service-board-tabs h3 a {font-weight:400; padding-left: 4px;}

/* Tube lines and more links */
#service-board.panel #lines {font-family:Arial,Helvetica,sans-serif;margin-bottom: 0;background: #fff; position:relative; top: -1px;}
#service-board.panel #lines li {border-bottom:1px solid #FFF;float:left;padding:0;}
#service-board.panel #lines h3 {width:7.6em;float: left;padding: 0 0 0 2px;}
#service-board.panel #lines div.status {width:8.6em; padding-left:2px; background: #fff; color: #565656;float: left;padding-left:2px; border-bottom: 1px solid #dbdbdb;}
#service-board.panel #lines div.status h4 a {color: #113B92; font-weight: 400;} /* All Disruptions */
#service-board.panel #lines div.status.problem h4 a {color: #113B92; font-weight: 700;} /* Excluding minor disruptions */
#service-board.panel p.service-board-more {clear:both; margin-left: 5px;}
#service-board.panel p.service-board-more span{font-weight: 700;}

/* Tube line colours extended to lower level tags (h3,a) on RH column service board */
.bakerloo h3,.bakerloo h3 a{background:#AE6118;color:#FFF}
.central h3,.central h3 a{background:#E41F1F;color:#FFF}
.circle h3,.circle h3 a{background:#F8D42D;color:#113B92}
.district h3,.district h3 a{background:#00A575;color:#FFF}
.hammersmithandcity	h3,.hammersmithandcity h3 a{background:#E899A8;color:#113B92}
.jubilee h3,.jubilee h3 a{background:#8F989E;color:#FFF}
.metropolitan	h3,.metropolitan h3 a{background:#893267;color:#FFF}
.northern h3,.northern h3 a{background:#000;color:#FFF}
.piccadilly	h3,.piccadilly h3 a{background:#0450A1;color:#FFF}
.victoria h3,.victoria h3 a{background:#009FE0;color:#FFF}
.waterlooandcity h3,.waterlooandcity h3 a{background:#70C3CE;color:#113B92}
.dlr h3,.dlr h3 a{background:#00BBB4;color:#FFF}
.overground h3,.overground h3 a{background:#F86C00;color:#FFF}

.bakerloo h3 a:hover{background:#AE6118;color:#FFF;text-decoration:underline}
.central h3 a:hover{background:#E41F1F;color:#FFF;text-decoration:underline}
.circle h3 a:hover{background:#F8D42D;color:#113B92;text-decoration:underline}
.district h3 a:hover{background:#00A575;color:#FFF;text-decoration:underline}
.hammersmithandcity h3 a:hover{background:#E899A8;color:#113B92;text-decoration:underline}
.jubilee h3 a:hover{background:#8F989E;color:#FFF;text-decoration:underline}
.metropolitan h3 a:hover{background:#893267;color:#FFF;text-decoration:underline}
.northern h3 a:hover{background:#000;color:#FFF;text-decoration:underline}
.piccadilly h3 a:hover{background:#0450A1;color:#FFF;text-decoration:underline}
.victoria h3 a:hover{background:#009FE0;color:#FFF;text-decoration:underline}
.waterlooandcity h3 a:hover{background:#70C3CE;color:#113B92;text-decoration:underline}
.dlr h3 a:hover{background:#00BBB4;color:#FFF;text-decoration:underline}
.overground h3 a:hover{background:#F86C00;color:#FFF;text-decoration:underline}

/* Bus service board */
#service-board-buses{
	background-color: #FFF;
	text-align: center;
	margin-bottom: 0;
	padding: 8px 0;
}
#service-board-buses label{
	font-weight: bold;
}
#service-board-buses #bus-route{
	width: 55px;
	margin: 4px 35px;
}
/* Detail */
#service-board .detail{
	font-family: Arial;
	font-weight: bold;
	color: #000;
	line-height: 1.2em;
	background: #FFF url('../images/tab-background.gif') left bottom repeat-x;
	margin-left: -93px;
	padding: 8px;
	border: 0 solid;
}
/* MODAL PAGE STYLES */
/* The following styles colour-code the modal homepages */
#main-content.dlr, #main-content.overground{
	/* Overwrites the .dlr and .overground styles in typography.css */
	background-color: #FFF !important;
}

.dlr-home 
{
   /* Overwrites the .dlr in typography.css for IE6 */
   background-color: #FFF !important; 
}

.overground-home p
{
   color: #565656 !important; 
}

#main-content.dlr p{
	color:#565656;
}
/* Coloured headers*/
.tube #modal-header,	
.dlr #modal-header,	
.buses #modal-header,	
.rail #modal-header,	
.overground #modal-header,	
.river #modal-header,	
.trams #modal-header,	
.driving #modal-header,	
.cycling #modal-header,	
.walking #modal-header,	
.dialaride #modal-header,	
.taxis #modal-header,	
.coaches #modal-header{
	padding-right: 39px; color: #113B92;
	border-bottom: 1px solid #113B92;
	font-size: 1.55em;	
}		
.tube 		#modal-header	{background:  url('../images/roundel-small-tube.gif') no-repeat right; border-bottom: #113B92 solid;}	
.dlr 		#modal-header	{background:  url('../images/roundel-small-dlr.gif') no-repeat right; border-bottom: #00BBB4 solid;}	
.buses  	#modal-header	{background:  url('../images/roundel-small-buses.gif') no-repeat right; border-bottom: #E41F1F solid;}	
.rail  		#modal-header	{background:  url('../images/roundel-small-rail.gif') no-repeat right; border-bottom: #AE6119 solid;}
.overground #modal-header	{background:  url('../images/roundel-small-overground.gif') no-repeat right; border-bottom: #F86C00 solid;}	
.river  	#modal-header 	{background:  url('../images/roundel-small-river.gif') no-repeat right; border-bottom: #0076BD solid;}	
.trams  	#modal-header	{background:  url('../images/roundel-small-trams.gif') no-repeat right; border-bottom: #0A9900 solid;}	
.driving  	#modal-header	{background:  url('../images/roundel-small-driving.gif') no-repeat right; border-bottom: #96A297 solid;}	
.cycling  	#modal-header	{background:  url('../images/roundel-small-cycling.gif') no-repeat right; border-bottom: #96A297 solid;}	
.walking  	#modal-header	{background:  url('../images/roundel-small-walking.gif') no-repeat right; border-bottom: #96A297 solid;}	
.dialaride	#modal-header	{background:  url('../images/roundel-small-dialaride.gif') no-repeat right; border-bottom: #9C3D97 solid;}	
.taxis  	#modal-header	{background:  url('../images/roundel-small-taxis.gif') no-repeat right; border-bottom: #8080B9 solid;}	
.coaches  	#modal-header	{background:  url('../images/roundel-small-coaches.gif') no-repeat right; border-bottom: #FFA102 solid;}
/* Coloured footers */
.tube 		#modelinks 		{border-bottom: #113B92 solid 8px;}	
.dlr 		#modelinks 		{border-bottom: #00BBB4 solid 8px;}	
.buses 		#modelinks 		{border-bottom: #E41F1F solid 8px;}	
.rail 		#modelinks 		{border-bottom: #AE6119 solid 8px;}	
.overground #modelinks 		{border-bottom: #F86C00 solid 8px;}	
.river 		#modelinks 		{border-bottom: #0076BD solid 8px;}	
.trams 		#modelinks 		{border-bottom: #0A9900 solid 8px;}	
.driving 	#modelinks 		{border-bottom: #96A297 solid 8px;}	
.cycling 	#modelinks 		{border-bottom: #96A297 solid 8px;}	
.walking 	#modelinks 		{border-bottom: #96A297 solid 8px;}	
.dialaride 	#modelinks 		{border-bottom: #9C3D97 solid 8px;}	
.taxis 		#modelinks 		{border-bottom: #8080B9 solid 8px;}	
.coaches 	#modelinks 		{border-bottom: #FFA102 solid 8px;}

.river .search-tool.column-full select {width: 85%}
.river .search-tool.column-full label {position: absolute; left: -999px}
.river .search-tool.column-full p {left: 12em;}

/* LANDING PAGE NAVIGATION */
.landing-page-nav {
  	background:  url('../images/column-seperators.gif') repeat-y;
	padding: 19px 0;
	float: left;
	border-top: 1px solid #CCC;
}
.landing-page-nav h2{
	border-bottom: 0 solid;
	margin-bottom: 0;
}
.col1,
.col2,
.col3{
	float: left;
	padding: 0 19px;
	width: 147px;
}
.col1{
	padding-left: 0;
}
.col3{
	padding-right: 0;
}
.just-two-columns{
	width: 332px;
}

/* remove whitespace from bottom of modal homepage navigation */
.tube 	 	.landing-page-nav div ul,
.dlr 	 	.landing-page-nav div ul,
.buses 	 	.landing-page-nav div ul,
.rail 	 	.landing-page-nav div ul,
.overground .landing-page-nav div ul,
.river 	 	.landing-page-nav div ul,
.trams 	 	.landing-page-nav div ul,
.driving 	.landing-page-nav div ul,
.cycling 	.landing-page-nav div ul,
.walking 	.landing-page-nav div ul,
.dialaride 	.landing-page-nav div ul,
.taxis 		.landing-page-nav div ul,
.coaches	.landing-page-nav div ul{
	margin-bottom: 0;
}

/* 3D PANEL STYLES */
.three-d-panel{
	background:  url('../images/3d-panel-top.gif') top left no-repeat;
}
.panel h1{
	border-bottom: 0 solid;
	padding: 5px;
	background-color: #3497D5;
}

/* ERROR PAGE STYLES */
#page-not-found{
	background:  url('../images/3d-panel-query.gif') top left no-repeat;
}
#page-error{
	background:  url('../images/3d-panel-alert.gif') top left no-repeat;
}
#page-error div,
#page-not-found div{
	background:  url('../images/3d-panel-bottom.gif') bottom left no-repeat;
	padding: 19px 24px 38px 160px;
}
#page-error div li,
#page-not-found div li{
	float: left;
	margin-right: 19px;
}
#page-error div ul,
#page-not-found div ul{
	float: left;
	margin-bottom: 19px;
}
#page-error h1,
#page-not-found h1{
	color: #FFF;
	border: none;
	padding-left: 10px;
}

/* BIG BUTTONS */
.big-button:hover,
.big-button-2line:hover{
	color: #FFF;
}
.big-button,
.big-button-2line{
	display: block;
	width: 250px;
	background:  url('../images/big-button-2line-green-top.gif') top left no-repeat;
	color: #FFF;
	font-family: Arial;
	font-size: 1.4em;
	line-height: 1.3em;
	font-weight: bold;
	margin-bottom: 19px;
}
.big-button{
	background:  url('../images/big-button-green-top.gif') top left no-repeat;
}
.big-button span,
.big-button-2line span{
	display: block;
	padding: 8px;
	background:  url('../images/big-button-green-bottom.gif') bottom left no-repeat;
	text-align: center;
}
.carnival .big-button{
    font-size:1.3em;
}
/* PROCESS FLOW DIAGRAMS */
	#process-flow .select{
		font-weight: bold;
		background: #EEE url('../images/down-arrow.gif') no-repeat center right !important;
		height: 50px !important;
	}
	#process-flow .highlight-box dd.select a,
	#process-flow .highlight-box dd.select a:focus, 
	#process-flow .highlight-box dd.select a:active{
		background-color: #EEE !important;
		color: #000 !important;
	}
	
	#process-flow .highlight-box{padding-bottom: 8px}
	#process-flow .highlight-box{padding-bottom: 8px}
	
	#process-flow .highlight-box dt{margin-bottom: 8px}
	
/* LEZ HOMEPAGE */
.lez-landing{
	height:177px;
	background:url(/tfl/roadusers/lez/images/lez-background.gif) no-repeat;	
	position:relative;
}

.lez-landing #lez-title{
	position:absolute;
	top:6px;
	left:115px;
}

.lez-landing .linklist{
	position:absolute;
	top:57px;
	left:121px;
}

.lez-landing .linklist li{
	float:left;
	margin-right:20px;
}

.lez-countdown{
	width:186px;
	overflow:hidden;
	margin-top:20px;
}

.lez-countdown p{
	text-align:center;
	line-height:1.2em;
}

/* GENERIC OTHER LANGUAGES PANEL */
div.other-languages{
	/*margin:0 !important;
	padding:0 !important;*/	
	padding-bottom: 19px !important;
	overflow:hidden;
	position:relative;
	background:url(/tfl-global/images/panel-shadow.gif) repeat-x #f7f7f7 bottom left;
	line-height:150%;
	display: inline-block;
	height: auto !important;
}

.language-list{
	background:url(/tfl-global/images/home-panel-bottom.gif) bottom left;
	margin-bottom:5px;
}

.language-list div{
	background:url(/tfl-global/images/home-panel-top.gif) no-repeat;
	padding:16px 0 0 100px;
	height:7.5em;
}

.language-list h2{
	border:0;
	padding-bottom:.3em;
	margin-bottom:0;
}

.language-list ul{
	width:420px;
	margin:0 !important;
	padding:0 !important;
}

.language-list li{
	float:left;
	width:75px;
	margin:0 !important;
	height:1.7em;
	position:relative;
}

.language-list .languages li{
	position:relative;
	height:10px;
	width:300px;
}

.content-list li{
	position:relative;
	height:1.7em;
}

.languages a.asian{
	display:block;
	text-indent:-999em;
	overflow:hidden;
	width:32px;
	position:absolute;
	top:0;
	left:8px;
}

.languages a {
	background: url(/tfl-global/images/language-sprite.gif) no-repeat;
}

.languages a[lang="pl"], .languages a[lang="fr"], .languages a[lang="es"], .languages a[lang="it"], .languages a[lang="de"], .languages a[lang="el"], .languages a[lang="tr"] {
	background: none;
}

.languages a.arabic{
	background-position: 0 -20px;
	width:40px !important;
	font-family:Arial, Helvetica, sans-serif;
	height:18px;
}

.languages a.hindi{
	background-position: 0 -40px;
	width:27px !important;	
}

.languages a.urdu{
	background-position: 0 -60px;
	width:27px !important;	
	height:18px;
}

.languages a.gujarati{
	background-position: 0 -80px;
	height:18px;
}

.languages a.tamil{
	background-position: 0 -100px;
}

.languages a.chinese{
	width:27px !important;	
}

.languages a.punjabi{
	background-position: 0 -120px;
}

.languages a.bengali{
	background-position: 0 -140px;
}

.languages a.asian:hover{
	text-decoration:none !important;
	border-bottom:1px solid #246cce;
}

.other-languages ul.linklist{
	float:left;
	margin:0 !important;
	padding:0px 5px 9px 14px !important;
}

.other-languages li{
	float:left;
	display:block;
	width:44%;
	min-width:44%;
	height:1.6em;
	margin:0;
	position:relative;
}

.other-languages .more{
	width: 60%;
	margin: 5px 0;
}
	
/* Thumbnail list */
.person-list{
	margin:0;
}
.person-list li{
	float:left;
	width:30%;
	margin-right:1%;
	background:none;
	padding:0;
	height:13em;
	text-align:center;
}
.person-list li img{
	display:block;
	border:1px solid #cccccc;
}

.validation p{
	background:url(/tfl-global/images/alert-exclaim.gif) no-repeat;
	padding:0 0 0 25px;
	margin:0 0 .5em 0 !important;
}

/* supporting content Travel Tools start */

#supporting-content .travelToolsArea,
#main-content-sidebar .travelToolsArea{
	float:left;
	width:100%;
	margin-bottom:20px;
	background:#4f4f4f;
}
#supporting-content .travelToolsArea h2,
#supporting-content .travelToolsArea p,
#main-content-sidebar .travelToolsArea h2,
#main-content-sidebar .travelToolsArea p {
	background:url(/tfl-global/images/traveltools/title-bg.png) repeat-x top left;
	height:19px;
	color:#fff;
	padding-left:5px;
	border:0;
	margin:0;
	clear:both;
}
#main-content-sidebar .travelToolsArea h2{
	padding-top:5px
}
#supporting-content .travelToolsArea h2 a,
#main-content-sidebar .travelToolsArea h2 a{
	color:#fff;
}
#supporting-content .travelToolsArea li a,
#main-content-sidebar .travelToolsArea li a{
	float:left;
	color:#9bd0ff;
	border:0;
}
#supporting-content .travelToolsArea li a img,
#main-content-sidebar .travelToolsArea li a img{
	border:0;
}
#supporting-content .travelToolsArea li a.toollink,
#main-content-sidebar .travelToolsArea li a.toollink{
	padding-bottom:10px;
	padding-left:3px;
	
}
#supporting-content .travelToolsArea ul,
#main-content-sidebar .travelToolsArea ul{
	margin:5px 0;
}
#supporting-content .travelToolsArea ul li,
#main-content-sidebar .travelToolsArea ul li{
	clear:both;
	background:none;
	margin-bottom:5px;
	overflow:hidden;
}
#supporting-content .travelToolsArea p a,
#main-content-sidebar .travelToolsArea p a{
	display:block;
	text-align:right;
	color:#b0cbe6;
	padding-right:5px;
	font-size:0.8em;
}


/* supporting content Travel Tools end */

/* custom footer NOT USED AS YET*/
#customFooter{
	background-color:#F2F2F1;
	clear:both;
	float:left;
	width:100%;
}
#customFooter .divider{
	border-right:1px solid #CCCCCC
}
#customFooter .linklist{
	width:48%;
	float:left;
	padding:10px 0 10px 10px;
	margin:0
}
#customFooter .linklist li{
	width:100px;
	float:left;
}
#customFooter .linklist li a{
	display:block
}
/* custom footer */


/* GRID/COLUM DIVIDERS */
.column-full, .column-half, .column-third, .column-two-thirds, .column-quarter {float:left; margin-right: 18px; overflow: visible;}
.column-full {margin-right: 0; width: 100%; float: none; clear: both;}
.column-last {margin-right: 0;}

#main-content.percentage-grid .column-half, #main-content.percentage-grid .column-third , #main-content.percentage-grid .column-two-thirds, #main-content.percentage-grid .column-quarter {margin-right: 2.5%;}
#main-content.percentage-grid .column-last {margin-right: 0}

/* Half-column */
.template-3 #main-content div.column-half {width: 259px;}
.template-4 #main-content div.column-half {width: 251px;}
.template-5 #main-content div.column-half {width: 363px;}
.template-6 #main-content div.column-half {width: 344px;}

/* Third-column */
.template-3 #main-content div.column-third {width: 167px;}
.template-4 #main-content div.column-third {width: 161px;}
.template-5 #main-content div.column-third {width: 236px;}
.template-6 #main-content div.column-third {width: 223px;}	

/* Two-Thirds-column */
.template-3 #main-content div.column-two-thirds {width: 352px;}
.template-4 #main-content div.column-two-thirds {width: 341px;}
.template-5 #main-content div.column-two-thirds {width: 490px;}
.template-6 #main-content div.column-two-thirds {width: 464px;}

/* Quarter-column */
.template-3 #main-content div.column-quarter {width: 120px;}
.template-4 #main-content div.column-quarter {width: 116px;}
.template-5 #main-content div.column-quarter {width: 172px;}
.template-6 #main-content div.column-quarter {width: 163px;}

/* Percentage based column */
#main-content.percentage-grid div.column-half {width: 48.70%;}
#main-content.percentage-grid div.column-third {width: 31.65%;}
#main-content.percentage-grid div.column-two-thirds {width: 65.8%;}
#main-content.percentage-grid div.column-quarter {width: 23%;}