/*
** Elements that are safe to style are listed here.
** You can style other elements but things might break if I change the mark-up
** I may have left elements off this list. If you think something's safe to style and isn't
** listed here, email me at clashfinder@halvin.co.uk and I'll look into it.
**
** Just change styling (colour, font, backgrounds etc) not layout (position, block type, margins etc)
** There's nothing stopping you changing layout but, again, things might break at a later date.
*/

/* Import required fonts */
/* @import url(http://fonts.googleapis.com/css?family=Cabin:700&subset=latin,latin-ext,cyrillic,greek); */

/* .pageContainer is a wrapper around each page. Use this to control the default font on the page. */
/* .pageContainer, .pageContainer p, .pageContainer td, .pageContainer h6 	{ font-family: Century Gothic, helvetica, arial, sans-serif; } */

/* .header is the strip where the page title is held. It's a fixed height (although there is a smaller variant: .smallHeader) and has overflow:hidden to stop it spilling over the clashfinder. */
.header h1	{ line-height: 1.6em; font-size: 24pt; padding-bottom: 3px; font-family: Century Gothic, raleway, helvetica, arial, sans-serif; color: #edf4fa; }
/* .header > div controls the background of the header strip. */ 
.header > div	{ border-bottom: 1px solid #252e58; background: #364bb2; }
/* Chrome won't print background gradients if the element has a border. You can fudge a border with a shadow with 1px spread. */
/*.chrome .header > div	{ border: none; margin: 1px; box-shadow: 0 0 0 1px rgba(255,255,255,0.5) inset, 0 0 10px rgba(23,54,93,0.1) inset, 0 0 0 1px #6c6c6a; }*/
/* .pageHeading is the span that wraps around the heading text. */
.pageHeading	{ color: #ffffff; font-weight: normal; padding: 0 5px; text-shadow: 0 1px 0 rgba(0,0,0,0.9); }
.headingCfName	{ }
.headingDayName	{ color: #ffffff; font-weight: bold; padding: 0 5px; text-shadow: 0 1px 0 rgba(0,0,0,0.9); }
/* .pageRight and .pageLeft hold the page numbers when a day is split over several pages. */
.header .pageRight, .header .pageLeft { top: -4px; }
.header .pageRight span, .header .pageLeft span	{ font-size: 16pt; -webkit-border-radius: 999em; border-radius: 999em; color: #ffffff; box-shadow: 0 1px 0 rgba(0,0,0,0.9); border:3px solid #ffffff; padding: 0 0.4em 4px 0.4em; }

/* .smallHeader is a smaller title strip used when a page contains several days (and so has several title strips on the page). */
.header.smallHeader	h1	{ font-size: 18pt; }
.header.smallHeader	h1 span	{ -webkit-border-radius: 8px; border-radius: 8px; }

/* .timeText is the wrapper for the time scale shown across the clashfinder. */
.timeText { font-weight: 500; }
/* .timeLines is the wrapper for the vertical lines shown under the clashfinder. */
.timeLines div		{ border-left: 0.5px solid #888; }

/* .stageRow is the horizontal strip that runs behind the acts. */
.stageRow		{ border: 0.5px solid #777; background: #eee; }
.notMobile .stageRow	{ box-shadow: 0 0 5px rgba(0,0,0,0.15) inset; background-image: linear-gradient( to right, #eee, #eee 50%, #e5e5e5 50%, #e5e5e5 );  }
.notMobile.cfVert .stageRow { background-image: linear-gradient( to bottom, #eee, #eee 50%, #e5e5e5 50%, #e5e5e5 ); }
/* .stageNameRepeat is the stage name that runs along the middle of the stageRow. */
/* .stageNameRepeat		{ background: none; color: #aaa; word-spacing: 1em; } */
/* .stageName is the name of the stage to the left of stageRow. */
.stageName 	{ font-weight: 500; }

/* colour was #403f5c */
/* .act elements are the rectangles representing the acts. */
.act	{ line-height: auto; border: 0.5px solid #13113e; background: #f8f8f8 no-repeat; background-image: linear-gradient(to bottom, #ffffff 0%, #fcfcfc 49.99%, #efefef 50%, #fafafa 100%); }
/* .hasHl applies to any acts that have a highlight */
.act.hasHl	{ text-shadow: 0 0 4px rgba(255,255,255,1), 0 0 2px rgba(255,255,255,1); }
/* .act.estd is an act with estimated times. */
.act.estd	{ border-color: #777; background: #f8f8f8; box-shadow:  0 0 10px rgba(0,0,0,0.1) inset; }
/* .actNm is the name of the act. */
.actNm	{ font-weight: 500; }
/* .dispSmall is added when an act name doesn't fit in its box */
.dispSmall .actNm	{ line-height: 100%; }
/* .actTime is the start and end time of the act, shown at the bottom of the act element. */
.actTime	{ background: none; }
/* .notMobile is a class added to the body when the user is not using a mobile device.
** Use this when you're adding effects that will slow rendering on a mobile too much. */
.notMobile .act	{ border-radius: 4px; }
/* .jqHlDiv elements are the blocks that make up the highlights.  There can be up to 12 highlights per act. */
/* .notMobile .jqHlDiv	{  } */
/* hl0 is used for the act info selector in the controls box */
.hl0	{ background: #abffab; background-image: linear-gradient(to bottom, #ddffdd 0%, #afffaf 49.99%, #91ff91 50%, #ccffb2 100%); }

/* A highlighted .act element has a list of highlights in the class. */
.act.hasHl	{ -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.5); box-shadow: 0px 1px 3px rgba(0,0,0,.5); }
.notMobile .act:hover	{ -webkit-box-shadow: 0px 1px 5px rgba(0,0,0,.75); box-shadow: 0px 1px 5px rgba(0,0,0,.75); }

/* The footer is the strip at the bottom of the page that holds the logo, credits and revision notes. */
.footer	{ }
.footer p	{ font-size: 8pt; }
.footerEditDate	{ color: #777; }

/* For printed media, the font-size should be 2/3 of the on-screen size */
@media print {
	.headingCfName, .headingDayName, .pageHeading	{ text-shadow: none; }
	.header h1	{ font-size: 16pt;  }
	.header h1 .pageRight span, .header h1 .pageLeft span	{ font-size: 10pt; }
	.header.smallHeader h1	{ font-size: 12pt;  }
	.act	{ border-color: #222; text-shadow: none; }
	.stageRow	{ box-shadow: none !important; }
	/* .msie .stageRow	{ border: none; } */
	.footer p	{ font-size: 4.5pt !important; }
	.notMobile .stageRow	{ background: #fafafa; }
}