/* =============================================================================
   HTML5 Boilerplate CSS: h5bp.com/css
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	background-color:#F8FAF7;
 url(http://www.peterrileymusic.co.uk/img/temp%20background%20image%20export%202.jpg);
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
		
		
/*HTML LEVEL BACKGROUND - RESIZES - NEED PROPER BACKGROUND IMAGE EXPORTED FOR WEB AND ALSO - NEED TO MAKE IE 6-8 FIX SEE - http://css-tricks.com/perfect-full-page-background-image/*/


html, button, input, select, textarea { font-family: sans-serif; color: #222; }
body { margin: 0; font-size: 100%; line-height: 1.4; }

::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }

a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }

abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 100%; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

ul, ol { margin: 1em 0; padding: 0 0 0 0; }
dd { margin: 0 0 0 5px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

svg:not(:root) { overflow: hidden; }

figure { margin: 0; }

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 1% 0; }


/* ===== Initializr Styles =====================================================
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
   ========================================================================== */

body{
	font:16px/26px, "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
   font-weight: 300;}

/*Set main font and size - but why are there three of them?*//*Have added background image to html instead*/

.wrapper{
	width: 100%;
	margin: auto;
}

/*What is this? Changed this margin to get logo and menu to be aligned hard left*/

/* ===================
    ALL: Orange Theme
   =================== */

#header-container{
	border-bottom: 0px solid #041263;
	width: 90%;
	margin: 1% auto; text-align: left;
}

/*Made header container not take up full width and added border radius - but want to center? margin centers this container - removed margins*/

img.prmlogo{width: 90%; height:auto;}

img.fblogo, img.twlogo, img.emlogo{width: 100%; height:auto;}

#facebook{
	float: right; margin: auto; padding: 1%; width: 8%; height: auto;
}

#twitter{
	float: right; margin: auto; padding: 1%; width: 8%; height: auto;
}

#email{
	float: right; margin: auto; padding: 1%; width: 8%; height: auto;
}


#main-container      {
	color: black;
	width: 90%;
	margin: auto; 
	text-align: left;
	background: rgb(153,51,255);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
	
/*Added this t to try to lighten the main area by using main container as an extra backgorund layer and filtering this.*/

#maingradientlayer      {
	color: black;
	width: 100%;
	margin: auto; 
	text-align: left;
	background: rgb(214,244,247);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0; /* IE9 SVG, needs conditional override of 'filter' to 'none' */

}
	
#main      {
	color: black;
	width: 100%;
	margin: auto; 
	text-align: left;
	background: rgba(255,255,255,0.0);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	
	border-left: 1px solid #FFF;
	border-right: 1px solid #FFF;
}

/*Added this to center min container. Colour is text colour. Have added rgba transparency, but to get whiter color would need to be clever with layers??? Have removed border radius for this element but left in css to redo if wanted*/

/*Added this t to try to lighten the main area by using main container as an extra backgorund layer and filtering this.*/


#footercontent{margin: 0% 2% 0% 2%; line-height: 100%}


#footercontent p {font-size: 90%;}


#footer-container{ 
	border-bottom-left-radius: 1em;
	border-bottom-right-radius: 1em;
	border-top-left-radius: 0;
	border-top-right-radius: 0;width: 90%; margin: 0% auto 2%;text-align: left;
	
	border-bottom: 1px solid #368DBE; 
	border-left: 1px solid #368DBE; 
	border-right: 1px solid #368DBE;
	
	-moz-box-shadow: 0 -1px 3px black;
	-webkit-box-shadow: 0 -1px 3px black;
	box-shadow: 0 -1px 3px black;
}

#main aside      { 
	border-top:    0px solid #844d26; 
	border-radius: 1em;
}

#navigation      { 
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-top-left-radius: 1em;
	border-top-right-radius: 1em; width: 90%;
	margin: auto; text-align: center;
	
	border-top: 1px solid #C4E0FF; 
	border-left: 1px solid #368DBE; 
	border-right: 1px solid #368DBE;
	 
	-moz-box-shadow: 0 1px 3px black;
	-webkit-box-shadow: 0 1px 3px black;
	box-shadow: 0 1px 3px black;
}

/*Container border colours. Could add more of these, or remove them, or add curves etc? removed borders for now*/

#navigation ul	{
	list-style: none;
	padding: 0%;
	margin: auto; text-align: center;
}

/*What is this?* Margin seems to add amount of space at top, padding pushes right*/

#navigation li	{
	float: left;
	margin: auto; text-align: center;
}

/*What is this?*/

#navigation li a	{
	height: 105%;
	line-height: 140%;
	float: none;
	width: auto;
	display: block;
	border: 50% solid #dddc19;
	color: #81C9E3;
	text-decoration: none;
	text-align: center;
	font-size: 100%;
	border-radius: 0.5em;
	margin: auto; 
	
	background: #81C9E3;
	
	 
	-moz-border-radius: 0.5em;
	-webkit-border-radius: 0.5em;
	border-radius: 0.5em;

	 border: 1px solid #368DBE;
	 border-top: 1px solid #c3d6df;
	 
	 text-shadow: 1px 1px 1px black;
	 
	 -moz-box-shadow: 0 1px 3px black;
	 -webkit-box-shadow: 0 1px 3px black;
	 box-shadow: 0 1px 3px black;
}

/*Navigation box colours, size and alignment etc. width is width of box compared to text.*/

#navigation li a:hover, #submit:hover{
		background: #014464;
	 
}
	
#navigation li a:active {
		-moz-box-shadow: 0 2px 6px black;
		-webkit-box-shadow: 0 2px 6px black;
}

#navigation,
#footer-container,
#main aside	{
	background:rgb(251,238,248);
}

/*Colour of navigation, header container, footer container and main aside*/

#navigationgradient{ padding: 1.5% 0% 1.5% 0%;
border-bottom:    0px solid #041263; border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-top-left-radius: 1em;
	border-top-right-radius: 1em;
	

}

/*Added div layer (with matching corner radius) with gradient overlay*/

#footergradient{
	
	border-top:    0px solid #041263; border-bottom-left-radius: 1em;
	border-bottom-right-radius: 1em;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	

}


/*Added div layer (with matching corner radius) with gradient overlay as with navigation, but this time reversing gradient*/

#header-container{
	background: rgba(255, 255, 255, 0.0)
}   


/*Didnt do what I wrote next - instead used rgba - but this doesnt work in earlier versions of browsers! Should really do complicated version as follows - Separate header container so that I can change opacitiy - but need to isolate container from contents. also need to add IE5 fix from http://www.stevenyork.com/tutorial/pure_css_opacity_and_how_to_have_opaque_children*/

#title{
	color:white;
}

::-moz-selection { background: #f16529; color: #fff; text-shadow: none; }
::selection      { background: #f16529; color: #fff; text-shadow: none; }

/*contact form*/

label {
    display:inline-block;
    margin-top:5%;
    letter-spacing:0.5%;
}


/* SForm percentage is border */
form {
    margin:1em 2em 1em 2em;
padding:0%;
font-size:80%;
 font:16px/26px, Myriad Pro, Myriad, Arial;;
}

/* Style the text boxes */
input, textarea {
	width:100%;
	height:7%;
	background:#efefef;
	border:1% solid #dedede;
	margin-top:1%;
	font-size:90%;
	color:#3a3a3a;
}

textarea {
	height:5%;
	background:rgba(204,204,204,0.5);
}

input, textarea {
    width:100%;
    height:5%;
    background:#efefef;
    border:1px solid #dedede;
    padding:2% 0% 2% 0%;
    margin-top:2%;
    font-size:90%;
    color:#3a3a3a;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

input:focus, textarea:focus {
    border:1px solid #97d6eb;
}

#submit 
   	{
	height: 105%;
	line-height: 140%;
	float: none;
	padding: 2%;
	width: auto;
	display: block;
	border: 50% solid #dddc19;
	color: #81C9E3;
	text-decoration: none;
	text-align: center;
	font-size: 100%;
	border-radius: 0.5em;
	margin: 10% 5% 5% 0%; 
	
	background: #81C9E3;
	background: -moz-linear-gradient(top, #0D658E, #0C577A 50%, #014D71 51%, #003E5C);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0E658E), color-stop(.5, #0C577A), color-stop(.5, #014D71), to(#003E5C)); 
	 
	-moz-border-radius: 0.5em;
	-webkit-border-radius: 0.5em;
	border-radius: 0.5em;

	 border: 1px solid #368DBE;
	 border-top: 1px solid #c3d6df;
	 
	 text-shadow: 1px 1px 1px black;
	 
	 -moz-box-shadow: 0 1px 3px black;
	 -webkit-box-shadow: 0 1px 3px black;
	 box-shadow: 0 1px 3px black;

}


/* ==============
    MOBILE: Menu
   ============== */

/*MOBILE Formatting for box around old navigation bar*/

#navigation li
{
	float: none;
	margin: 8% auto;
	width: 90%; padding: 0%;
}


/*Important to have float as none. Have adjusted margins to make text/block fit as I want, but need to move it left? Also - Have copied and pasted this later changing none to left so that it becomes normal bar. Also margin 8% auto gives cenetered effect but with space at top and bottom.*/
 
#navigation li a
{
	width: 90%; text-align:center; margin:auto; font-size: 120%;
}
nav a{
	display:block;
	margin-bottom:2%;
	margin-top:2%;
	margin-right:2%;
	margin-left:2%;
	padding:2%;
	background:#e44d26;
	color:#0CC;
	text-align:center;
	text-decoration:none; 
	font-weight:bold; 
}

/*MOBILE Formatting for box around new navigation bar*/



nav a:hover, nav a:visited{
	color:white;
}

nav a:hover{
	text-decoration:underline;
}

/*Content stuff*/

#content1 p {font-size: 110%;}



/*Content stuff*/


h2 {
margin:6% 6%  6% 6%;
padding:0%;
vertical-align:center;
}

h4 {
margin: 1em 2em 1em 2em;
padding:0%;
vertical-align:center;
font-size: 80%;
}

h5 {
margin:1% 0%  1% 0%;
padding:0%;
vertical-align:center;
}

#content22, #content21, #content20, #content19, #content18, #content17, #content16, #content15, #content14,  #content13,#content12, #content11, #content10, #content9, #content8, #content7, #content6, #content5, #content4, #content3, #content2, #content1     {
	margin:2%;
	padding: 0%;
	display: inline-block;
	float: left;
	width: 96%;
	background: rgba(255,255,255,0.8);
	border-radius: 1em;
	font-size: 100%;
	
	 -moz-box-shadow: 0 1px 3px black;
	 -webkit-box-shadow: 0 1px 3px black;
	 box-shadow: 0 1px 3px black;
	 
	}
	

#content22, #content19, #content14, #content1     {
	background-color:#FEFEFE;
	color:#FFFFFF;
	background-repeat:no-repeat;
	background-size:cover;
}


#contenth22, #contenth21, #contenth20, #contenth19, #contenth18,#contenth17, #contenth16, #contenth15, #contenth14,#contenth13,#contenth12, #contenth11, #contenth10, #contenth9, #contenth8, #contenth7, #contenth6, #contenth5, #contenth4, #contenth3, #contenth2, #contenth1 {
	display: inline-block;
	float: left;
	width: 100%;
	height: auto;
	background: rgb(0,204,255);
	border-radius: 0;
	font-size: 100%;
	color:rgba(255,255,255,1);
	
	 -moz-box-shadow: 0 1px 3px black;
	 -webkit-box-shadow: 0 1px 3px black;
	 box-shadow: 0 1px 3px black;
	 
	}


 #contentp21, #contentp20, #contentp18,#contentp17, #contentp16, #contentp15, #contentp13,#contentp12, #contentp11, #contentp10, #contentp9, #contentp8, #contentp7, #contentp6, #contentp5, #contentp4, #contentp3, #contentp2 {
	display: inline-block;
	float: left;
	width: 100%;
	height: auto;
	font-size: 100%;
	color:rgba(0,0,0,1);
	border-radius: 0;
	}

#contentp22, #contentp19, #contentp14, #contentp1 {
	display: inline-block;
	float: left;
	width: 100%;
	height: auto;
	font-size: 100%;
	color:rgb(0,0,0);
	border-radius: 0;
	}


#content22 p, #contenth21 p, #contenth20 p, #content19 p, #content18 p,#content17 p, #content16 p, #content15 p, #content14 p, #content13 p,#content12 p, #content11 p, #content10 p, #contentp9 p, #contentp8 p, #contentp7 p, #contentp6 p, #contentp5 p, #contentp4 p, #contentp3 p, #contentp2 p{
	margin:1em 2em 1em 2em;
padding:0%;
font-size:80%;
	}

#contentp1 p{
	margin:1em 2em 1em 2em;
padding:0%;
font-size:120%;
	}

#contentp19 p{
	margin:1em 2em 1em 2em;
padding:0%;
font-size:100%;
	}

/*MOBILE These don't seem to work for my navigation bar, but they did for the old one*/

/* ==============
    MOBILE: Main
   ============== */

#main{
	padding:0 0; 
}


#main article h1{
	font-size:200%;
}

#main aside{
	color:white;
	padding:0px 5% 10px;
}

#footer-container footer{
	color:black;
	padding:1% 1%;
}

/* iNDEX Content stuff*/

img.qeh{display:block; width: 90%; height:auto; margin:auto; padding: 4%;}

img.glasto{display:block; width: 90%; height:auto; margin:auto; padding: 4%;}

img.freud{display:block; width: 90%; height:auto; margin:auto;padding: 9% 4% 8% 4%;}

img.filmgrab{display:block; width: 90%; height:auto; margin:auto;padding: 6% 4% 7% 4%;}

img.score2{display:block; width: 90%; height:auto; margin:auto;padding: 8% 4% 9% 4%;}

img.score{display:block; width: 45%; height:auto; margin:auto;padding: 0% 0% 0% 4%;}

/*Contact page stuff*/

img.fblogocontact, img.sclogocontact {display: block; width: 50%; height:auto; padding: 0; margin: auto;}

img.twlogocontact, img.ytlogocontact {display: block; width: 50%; height:auto; padding: 0; margin: auto;}

#fbcontact, #sccontact {
	float: left; margin: auto; padding: 2% 0%; width: 50%; text-align: center;
}

#twcontact, #ytcontact {
	float: left; margin: auto; padding: 2% 0%; width: 50%; text-align: center;
}

#youtube1 {margin:5% auto; width: 90%; display:block; text-align:center  overflow:hidden;}

#youtube2 {margin:5% auto; width: 90%; height:auto; display:block; text-align:center}

#youtube1, #youtube2 {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

#youtube1 iframe, #youtube2 iframe,  
#youtube1 object, #youtube2 object,  
#youtube1 embed, #youtube2 embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ===============
    ALL: IE Fixes
   =============== */

.ie7 #title{ padding-top:2%; }


/* ===== Primary Styles ========================================================
   Author:
   ========================================================================== */











/* =============================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 641px){
	
/*Content stuff*/

img.imageshow {width: 80%; height: auto;}

#content1      {
	width: 96%;	
	}

#content2      {
	width: 46%;
	}

#content3      {
	width: 46%;
	}
	
#content4      {
	width: 46%;
	}

#content5     {
	width: 46%;
	}

#content6     {
	width: 96%;
	}

#content7     {
	width: 46%;
	}

#content8     {
	width: 46%;
	}

#content9     {
	width: 96%;
	}
	
#content10     {
	width: 36%;
	}

#content11     {
	width: 96%;
	}
	
#content12     {
	width: 56%;
	}
	
#content13     {
	width: 36%;
	}

#content14     {
	width: 96%;
	}

#content15     {
	width: 36%;
	}

#content16     {
	width: 56%;
	}

#content17     {
	width: 56%;
	}

#content18     {
	width: 36%;
	}
	
#content19    {
	width: 96%;
	}
	
#content20    {
	width: 46%;
	}

#content21    {
	width: 46%;
	}

#content22    {
	width: 56%;
	}
	
	
	
/*Content stuff*/

img.prmlogo{width: 40%; height:auto;}

img.fblogo, img.twlogo, img.emlogo{width: 40%; height:auto;}


#facebook{
	float: right; margin: auto; padding: 1%; width: 14%;
}

#twitter{
	float: right; margin: auto; padding: 1%; width: 14%;
}

#email{
	float: right; margin: auto; padding: 1%; width: 14%;
}




/* ====================
    INTERMEDIATE: Menu
   ==================== */
	
	#navigation
{
	display: block;
	margin: auto;
	width: 90%;
	text-align: center;
	position:relative;
}

#navigation li a
{
	font-size: 60%; 
}

	nav a{
	display: block;
	width: auto;
	margin: auto;
	padding: 4%;
	}
	
	#navigation li
{
	display: inline-block;
	margin: auto;
	width: 16%;
	padding: 0% 0.1% 0% 0.1%;
	text-align: center;
	position:relative; font-size: 130%;
}

/*Changed to using percentages.*/
	
	nav li:first-child a{ margin-left:0;  }
	nav li:last-child  a{ margin-right:0; }
	
/* ========================
    INTERMEDIATE: IE Fixes
   ======================== */

	nav ul li{
	display:block;
	font-size: 100%; width: auto;
	}	
	.oldie nav a{
		margin:0 0.0%;		
	}
}

/*Changed ul i display to block*/
@media only screen and (min-width: 941px){


/*Added landscape orentation option.*/
/*Content stuff*/

img.imageshow {width: 80%; height: auto;}

#content1      {
	width: 56%;
	}

#content2      {
	width: 36%;
	}

#content3      {
	width: 29%;
	}
	
#content4      {
	width: 30%;
	}

#content5     {
	width: 29%; 
	}

#content6     {
	width: 96%; 
	}

#content7     {
	width: 46%;
	}

#content8     {
	width: 46%;
	}

#content9     {
	width: 96%;
	}

#content10     {
	width: 36%;
	}

#content11     {
	width: 96%;
	}
	
#content12     {
	width: 46%;
	}
	
#content13     {
	width: 46%;
	}

#content14     {
	width: 96%;
	}

#content15     {
	width: 36%;
	}

#content16     {
	width: 56%;
	}

#content17     {
	width: 46%;
	}

#content18     {
	width: 46%;
	}
	
#content19    {
	width: 96%;
	}

#content20    {
	width: 46%;
	}

#content21    {
	width: 46%;
	}

#content22    {
	width: 56%;
	}
	
	
	
/*Content stuff*/

img.prmlogo{width: 30%; height:auto;}

img.fblogo, img.twlogo, img.emlogo{width: 25%; height:auto;}

/* ====================
    WIDE: CSS3 Effects
   ==================== */


	#main aside{
		-webkit-box-shadow:0 5px 10px #aaa;
		   -moz-box-shadow:0 5px 10px #aaa;
		        box-shadow:0 5px 10px #aaa;
	}
	
	/*This adds a box shadow to main aside - currently not being used!*/

/* ============
    WIDE: Menu
   ============ */
	
	#title{
	float:left;
	}
/*Presume this is left from when I had title and nav bar in same container, does this still work?*/	
	#navigation li a
{
	font-size: 60%;
}

	
/*Change font size of nav bar for wide view*/

	nav{
	float:left;
	width:100%;
	}
	
		nav ul li{
	display:block;
	font-size: 100%;
	}
	

/*Sets navigation to float left, and to take up full width*/

/* ============
    WIDE: Main
   ============ */

	#main article{
		float:left;
		width:57%;
	}
		
	#main aside{
		float:right;
		width:28%;
	}
}

@media only screen and (min-width: 1140px) {

/* ===============
    Maximal Width
   =============== */

	.wrapper{
		width:100%; /* 1140px - 10% for margins. CHANGED THIS FROM 1026 TO 100% */
		margin:auto;
	}
}

/* =============================================================================
   Non-Semantic Helper Classes
   ========================================================================== */

.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

/* =============================================================================
   Print Styles
   ========================================================================== */
 
@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}