/* ------------------------------------------ 
   Reset
------------------------------------------ */

    html, body, div, span, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    abbr, address, cite, code,
    del, dfn, em, img, insul , kbd, q, samp,
    small, strong, sub, sup, var,
    b, i,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section, summary,
    time, mark, audio, video {
        margin:0;
        padding:0;
        border:0;
        outline:0;
        font-size:100%;
        vertical-align:baseline;
        background:transparent;
    }

    body {
        line-height:1.438em;
    }

    article,aside,details,figcaption,figure,
    footer,header,hgroup,menu,nav,section {
        display:block;
    }


    blockquote, q {
        quotes:none;
    }

    blockquote:before, blockquote:after,
    q:before, q:after {
        content:'';
        content:none;
    }

    a {
        margin:0;
        padding:0;
        vertical-align:baseline;
        background:transparent;
    }

    ins {
        background-color:#ff9;
        color:#000;
        text-decoration:none;
    }

    mark {
        background-color:#ff9;
        color:#000;
        font-style:italic;
        font-weight:bold;
    }

    del {
        text-decoration: line-through;
    }

    abbr[title], dfn[title] {
        border-bottom:1px dotted;
        cursor:help;
    }
    
    table {
        border-collapse:collapse;
        border-spacing:0;
    }

    hr {
        display:block;
        height:1px;
        border:0;
        border-top:1px solid #CDCFCF;
        margin:1em 0;
        padding:0;
    }
    
    input, select {
        vertical-align:middle;
    }
    

/* -------------------------------------------------------------------
   Clear Fix
   http://css-tricks.com/snippets/css/clear-fix/
------------------------------------------------------------------- */

    .cf:after { visibility: hidden; display: block; content: ""; clear: both; height: 0;}     
    /* *:first-child+html .group { zoom: 1; }  IE7 */
    
/* ------------------------------------------ 
   Body
------------------------------------------ */

    body { 
        color: #222222; /* #charcoal */
        font-family: Verdana, Geneva, sans-serif;
        font-size: 0.875em; /*14px equiv*/
		line-height: 1.5;
		-webkit-text-size-adjust: none;
		background-color: #720000;
	}

/* ------------------------------------------ 
   Structure
------------------------------------------ */

	
	header, footer, nav, .container { 
		width: 1000px;
	}
	
    .container {
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        margin: 0 auto;
		background-color:#a5a5a5;
    }
 	
    .content-100, .content-66, .content-75, .content-50, .content-33, .content-25  { 
	    -webkit-box-sizing: border-box;
	    -moz-box-sizing: border-box;
	    box-sizing: border-box; 
	}
	
	
	
	.content-75 { width: 75%; } 
    .content-50 { width: 50%; }
    .content-66 { width: 66%; } 
    .content-33 { width: 34%; } 	
	.content-25 { width: 25%; }
	
	section {
		background: #ffffff;
		padding: 1em;
	}
	
	section.secondary-color {
		background: #a5a5a5;
		}
	

	.page-header,
	.page-footer,
	.page-container {
		min-width: 1000px;
	}
	
	header {
		background-color: #FFFFFF;
		}
	
    .page-container { 
		padding: 0; 
		background-color: #720000;
	}
	 	
	a.site-logo { 
		width: 351px; 
		height: 71px; 
		background: url('../images/big-logo.gif') no-repeat; 
		background-size: 100%; 
		display: inline-block; 
		text-indent: -9000px; 
		margin: 0.5em;
		}
	
	header, footer { 
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
		margin: 0 auto; 
	}
	
	.left { float:left; }
	.right { float:right; }
	
	
	h1 {
		font-size: 1.7em;
		font-weight: bold;
	}
	
	h1.resize-h1 { font-size: 1em; } /*there are a few pages where the pagetitle is pulled in as the H1, can't change it cause of perl so shrink the size*/
	
	h2 {
		font-size: 1.5em;
		font-weight: bold;
	}
	
	h3 {
		color:#444;
		font-weight: bold;
		border-bottom: 1px solid #A5A5A5;
		margin: 1.5em 0 0.5em 0;
	}
	
	h4 {
		color:#444;
		font-weight:bold;
		margin-bottom: 1em;
	}
	

/* ------------------------------------------ 
   Nav Bar (desktop/tablet)
------------------------------------------ */ 
	
	nav { 
		background: rgb(50, 50, 50);
		background: -moz-linear-gradient(90deg, #202020 30%, #404040 50%)  ;
		background: -webkit-linear-gradient(90deg, #202020 30%, #404040 50%);
		background: -o-linear-gradient(90deg, #202020 30%, #404040 50%);
		background: -ms-linear-gradient(90deg, #202020 30%, #404040 50%);
		background: linear-gradient(180deg, #202020 30%, #404040 90%);
	 }
	 
	nav ul { margin-left: 0; }
	
	nav ul li { display: inline; } /*show li as a horizontal list */
	
	nav ul li a {
		padding: 0.7em 10px; /*sets height and width of each nav item */
		font-size: 0.95em;
		color:#FFF;
		text-decoration: none;
		display: inline-block;
		border-right: 1px solid #400;
			}
	
	nav ul li a:hover { /* text hover colour  */
		color:#BF6000;
		}
		
	
	.search_bar {
		float: right;
		padding: 0.5em 10px;
	}
	
	.search {
		margin-left: 20px;
		text-align:right;
		vertical-align:middle;
	}
	
	.button {
 		border-radius: 3px; 
        font-size: 0.750em;
        text-decoration: none;
        padding: 0.4em 1em;
        display: inline-block;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box; 
		border: none;
		color: #ffffff;
		width: auto;
		text-align: center;
		cursor: pointer;
        text-shadow: 0px -1px #647c37;
        color: #ffffff;
        background: #ffc477;
        background-image: linear-gradient(#ffc477 0%,#ffc477 3%, #fb9e25 100%);
        background-image: -o-linear-gradient(#ffc477 0%,#ffc477 3%, #fb9e25 100%);
        background-image: -moz-linear-gradient(#ffc477 0%,#ffc477 3%, #fb9e25 100%);
        background-image: -webkit-linear-gradient(#ffc477 0%,#ffc477 3%, #fb9e25 100%);
        background-image: -ms-linear-gradient(#ffc477 0%,#ffc477 3%, #fb9e25 100%);
        background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0, #ffc477),
            color-stop(0.03,#ffc477),
            color-stop(1, #fb9e25)
        );
    }
	
	.button:hover {
		background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477) );
		background:-moz-linear-gradient( center top, #fb9e25 5%, #ffc477 100% );
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477');
		background-color:#fb9e25;

	}
	
	.button:active {
		position:relative;
		top:1px;
	}





/* ------------------------------------------ 
   Login box
------------------------------------------ */ 
.login_box {
	text-align: right;
	background-color:#720000;
	margin-bottom: 5px;
	border-bottom: #720000 5px solid;
	
}

.login_box p {
	color:#BBBBBB;
    font-size: 12px;
    font-weight: normal;
	float: left;
	}
	
.login_box a {
	text-decoration: underline;
	color:#FFFFFF;
	}
	
.login_box a:hover {
	color:#BBBBBB;
	}
	
	
	


/* ------------------------------------------ 
   Index Page
------------------------------------------ */ 
	.landing-page { 
		background-color: #FFFFFF; 
		}
		
	.landing-page .content-100, .landing-page .content-33 {
		margin-bottom: 2em;
		padding-top: 1em;
	}	
	
	.landing-page .border, .landing-page .content-100 {
		/*: 1px solid #cdcfcf;
		border-top: 1px solid #cdcfcf;*/
		margin: -0.5em 0 2em -0.5;
		padding: 1em 0 0 1em;
		}
		
	.landing-page hr {
		width: 95%;
	}
	
	.landing-page h2 {
		color: #720000;
		}
		
	.landing-page p, .landing-page .text {
		font-size: 0.750em;
		margin-bottom: 0.5em;
		}
		
	.landing-page img {
		height: 110px;
		width: 110px;
		border: 1px solid #a5a5a5;
		margin: 0 1em 1em 0;
	}

	.large_snippet {
		padding: 1em 1em 1em 0;
	}
	
	.large_snippet img {
		float: left;
	}
	
	
	.large_snippet .date {
		font-size: 0.75em;
		font-style: oblique;
		color:#999999;	
	}	


	.horizontal_snippet {
		margin: 0 10px;
		float: left;
		width: 20%;
		}
	
	.mb { margin-bottom: 2em; }

	
	
/* ------------------------------------------ 
   Articles
------------------------------------------ */ 
	p { margin-bottom: 1em; font-size: 0.857em; } /*12px equic*/
	
	strong { font-weight:bold; }
	a { color:#720000; text-decoration:none; }
	a:hover { color:#BF6000; }
	/* specifying as they are entered into CMS */
	i { font-style:italic; }
	b { font-weight:bold; }

	.banner a img { float: right; margin: 0 0 1em 0; }
	.bio-banner { border-bottom: 5px solid #720000; margin-bottom:1em; }
	.bio-banner p, .banner p {font-size: 0.875em; }
	.bio-banner a img { margin: 0 1em 0 0; max-width:110px; }
	
	.article-tracks { font-size: 0.875em; }
	.article-tracks ul li { list-style: none; }
	
	.shareblock { /*used on article pages */
		margin-bottom: 1em;
		border-top: 1px solid #e5e5e5; 
		border-bottom: 1px solid #e5e5e5; 
		padding-top: 0.5em; 
		font-size: 0.875em; 
	}
	
	.rating {
		width: auto;
		height: auto;
		border: none;
		float: left;
		margin-right: 1em;
	}
	
	.rating-list li { margin-bottom: 1em; }
	.rating-list li img {
		display: inline-block;
		height: 30px;
		margin: 0 0.5em 0 0;
		vertical-align: middle;
		width: 30px;
	}
	
	.festival-stage-list { margin-bottom: 1em; }
	
	.pagination { 
		text-align: center; 
		margin-top: 1em;
		}
		
	.article-video {
		margin: 1em 0;
		}


/* ------------------------------------------ 
   Gallery
------------------------------------------ */ 
	.gallery-table ul { margin-bottom: 1em; margin-left: 0; }
	.gallery-table li { float: left; margin-right: 1em; list-style: none; }
	.gallery-table li p { font-size: 0.875em; }

	.photo { text-align: center; background-color: #FFFFFF; }
	.photo img { height: auto; width: auto; margin-top: 1em; }
	
	
	

/* ------------------------------------------ 
   Lists
------------------------------------------ */ 	
	.list-filter { border-bottom: 1px solid #A5A5A5; margin-bottom: 1em; }
	.list-filter form { margin: 1em 0; }
	.list { margin-bottom: 0.5em; }
	.list a { float: left; min-width: 150px; }
	.list p { float: left; }
	
	
	
	
/* ------------------------------------------ 
   Adverts
------------------------------------------ */ 	
	.adblock {
		padding:4px;
		border: 1px solid #b5b5b5;
		font-size:0.7em;
		color:#b5b5b5;
		text-align: center;
		 box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
	}
	
	.adblock_top {
		border: 1px solid #DDD;
		float: right;
		margin: 10px;
	}



/* ------------------------------------------ 
   Footer
------------------------------------------ */ 	
	
	footer {
		background-color: #222222;
		color: #FFFFFF;
		padding: 1em;
		} 
		
	footer h4 {
		color: #EE0000;
		}
	
	footer .social img {
		width: 48px;
		height: 48px;
		border: none;
		padding: 2px;
		}
	
	footer ul {
		margin-left: 0 
		}
		
	footer ul li {
		list-style-type: none;
		color:#E00;
		font-size: 0.875em;
		}
	
	footer a {
		color: #FFFFFF;
		}
		
	footer .legal {
		text-align: right;
		color:#444;
		font-size:0.750em;
		}
	



/* ------------------------------------------ 
   Content toggling
------------------------------------------ */ 

	.toggle { position: relative; }
	.toggle.row-open .row-arrow  { 
		-webkit-transform:rotate(90deg);
		-moz-transform:rotate(90deg);
		-o-transform:rotate(90deg);
		/* filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1.5); */
		-ms-transform:rotate(90deg);
	 }
	
	
/* ------------------------------------------ 
   Media queries 
------------------------------------------ */ 
			/* --------- Desktop --------- */
			/* this is the default view so no actual media query here */
			.desktop-tablet { display: block; }
			.tablet-mobile { display: none; }
				
				
			/* --------- Tablet --------- */

			@media all and (max-width:1023px) { 

				/* t --------- Structure --------- */
				
				header, footer, .container, nav { width: 100%; }
				
				.page-header,
				.page-footer,
				.page-container {
					min-width: 0;
				}
				
				.content-100, .content-75, .content-50, .landing-page .content-66, .landing-page .content-33 { 
					width: 100%;
					display: block;
				}
				
				.tablet-mobile { display: block; }
				
				.content-66 { width: 58%; }
				.content-33 { width: 40%; min-width: 310px; } 
				
				header { padding: 0.5em 0 0 0; }
				header a.site-logo { margin: 0.5em 1em 1em 1em; }
				footer { padding: 1em 20px; }
			
				
				/* set widths/padding */
				.container { padding: 0; min-height: 0; /* Resets spacing that pushes footer down on larger viewports */ }
				section { padding-top: 0; }
				.adblock { border: 0px; margin: 0 0 0 -10px; } /*offset section padding */
				.shareblock {padding: 0.5em 0; margin: 0.5em 0; }
				.photo img { max-width: 600px; }
				
				.large_snippet {
					margin: 0 10px;
					float: left;
					width: 20%;
				}
				
				
				/* hide things */
				.login_box,
				 .adblock_top,
				 footer .left,
				 .share,
				 .desktop-only,
				 .row-arrow
				 { display: none; }
				 
				 /* change floats */
				 footer .legal { float: right; }
				 footer .social { float: left; }
				 .bio-banner a img { float: right; margin: 0 0 1em 0; }
				 
				 /* resize */
				 .author { font-size: 0.75em; }
				 
				 
				 /*landing page */
				 
				 .landing-page p {
					 float: right;
					font-size: 1.125em;
					margin-right: 20px;
				 }
				 
				 .large_snippet {
					margin: 0 10px;
					float: left;
					width: 20%;
				}
	
				.landing-page .border, .landing-page .content-100 {
					border-left: none;
					border-top: none;
					margin: 0 0 2em 0;
					}
				 
				 .landing-page .content-100 .toggle-content {
					background-image: linear-gradient(bottom, #F4F4F4 49%, #FFFFFF 100%, #FFFFFF 88%);
					background-image: -o-linear-gradient(bottom, #F4F4F4 49%, #FFFFFF 100%, #FFFFFF 88%);
					background-image: -moz-linear-gradient(bottom, #F4F4F4 49%, #FFFFFF 100%, #FFFFFF 88%);
					background-image: -webkit-linear-gradient(bottom, #F4F4F4 49%, #FFFFFF 100%, #FFFFFF 88%);
					background-image: -ms-linear-gradient(bottom, #F4F4F4 49%, #FFFFFF 100%, #FFFFFF 88%);
					
					background-image: -webkit-gradient(
						linear,
						left bottom,
						left top,
						color-stop(0.49, #F4F4F4),
						color-stop(1, #FFFFFF),
						color-stop(0.88, #FFFFFF)
					);
					padding: 0 1em 1em 1em;
					}
				 
				 .landing-page hr { width: 100% ;}
				
				
			}
			
			
				
			/* --------- Mobile --------- */

			@media screen and (max-width:720px) {

				/* --------- Structure --------- */
				
					
					
				/* set widths/padding */
				.shareblock {padding: 0.5em 0; margin: 0.5em 0; }
				footer { max-width: 100%; text-align: center; }
				.page-header { padding-bottom: 0.5em; }
				header a.site-logo {
					background: url('../images/big-logo.gif');
					background-size: 100%;
					background-repeat: no-repeat;
					display: block;
					max-width: 160px;
					max-height: 45px;
					width: 100%;
					background-position: auto;
					float: right;
				}
				.container { padding: 0; min-height: 0; /* Resets spacing that pushes footer down on larger viewports */ }
				section { padding: 0.5em 20px 20px 20px; }
				.adblock { border: 0px; margin: 0; padding: 1em 0 0 0; } /*offset section 0 padding */
				.photo img { max-width: 260px; }
				 
				.content-66, .content-33, .content-25 {  /*add the rest of the widths to be 100% */
					width: 100%;
					display: block;
					min-width: 0;
				}
				
				
				/* landing page */
				
				.horizontal_snippet {
					padding: 1em 1em 1em 0;
					width: auto;
				}
				
				.horizontal_snippet img {
					float: left;
				}
				
				.large_snippet {
					padding: 1em 1em 1em 0;
					margin: 0;
					float: none;
					width: auto;
				}
				
				.landing-page .border, .landing-page .content-100 {
					padding: 0;
					border: none;
					}
				
				.landing-page p {
					float: none;
				 }
				 
				 .landing-page .content-100 .toggle-content {
					 margin: 0 -10px; /*offset padding*/
					 }
					 
				.row-arrow {
					display:block;
					}
				
				/* hide things */
				.login_box,
				 .adblock_top,
				 footer .left,
				 .share,
				 .desktop-tablet,
				 .toggle-content 
				 { display: none; }
				 
				 /* remove floats */
				 footer .right,
				 footer .legal,
				 footer .social,
				 .right,
				 .left,
				 .list a,
				 .list p 
				 { float: none; }
				 
				 /* resize */
				 .author { font-size: 0.75em; }
				 footer .legal { text-align: center; }
				
				/* header/nav */
				header a.mobile-menu { 
					position: absolute; 
					left: 20px; 
					top: 15px; 
					background: url('../images/menu-closed.png') 4px 4px no-repeat; 
					width: 18px; 
					height: 18px; 
					background-size: 18px; 
					padding: 4px;
				}
				
				header a.mobile-menu-open { 
					background: url('../images/menu-open.png') 4px 4px no-repeat; 
					background-size: 18px; 
					width: 18px; 
					height: 45px;
					padding: 4px;
				}
				
				 
				 /* show/hide*/
				.toggle { position: relative; }
				.toggle.row-open .row-arrow  { 
					-webkit-transform:rotate(90deg);
					-moz-transform:rotate(90deg);
					-o-transform:rotate(90deg);
					/* filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1.5); */
					-ms-transform:rotate(90deg);
				 }
				.toggle-content { padding-top: 1em; }
				.toggle h2 { cursor: pointer; padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
				
				.row-arrow { 
					position: absolute;
					right: 0;
					top:0.5em; /*sits next to a title that is 1.5em - so the 0.5 brings it to the centre of the text */
					width: 21px; 
					height: 21px; 
					background-image: url('../images/arrow-right.png'); 
					background-size: 100%; 
					background-repeat: no-repeat;
				}
				
			}
				

		@media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min-device-pixel-ratio: 1.5) {
			
			a.site-logo {
				background: url('../images/big-logo.gif'); /*need to get an image to be 2x to use properly ../images/big-logo@2x.gif */
				height: 62px;
				background-size: 100% 100%;
				max-width: 225px;
				width: 100%;
			}
			
		}