/*colours

blue: 3399cc
orange: ff6600
red: cc3333
green: 339966

*/

body { padding: 0; margin:0; font-family:Arial, Helvetica, sans-serif; }

a { text-decoration:none; } 

.AlignLeft { float:left; }
.AlignRight { float:right; }

img { border:none; }

.ClearFix:after, .clear-fix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } 
/*.ClearFix, .clear-fix { display: inline-block; }
html[xmlns] .ClearFix, html[xmlns] .clear-fix { display: block; }
* html .ClearFix, * html .clear-fix { height: 1%; }
*/
ul, li { list-style:none; padding:0; margin:0; }

h1, h2, h3, h4, h5, h6, p, blockquote { padding:0; margin:0; font-weight:normal;  }

h1 { font-size: 40px; font-weight:bolder; display: block; text-align: center; background:#fff; padding:20px 0; margin:20px 0 0 0; } 
h5 { height:70px; line-height:70px; font-size:40px; color:#fff; background:#202020; margin:10px; text-align:center; }
	
	@media screen and (max-width:1000px){
		h1 { font-size: 40px; padding:5px 0; } 
	}
	@media screen and (max-width:700px){
		h1 { font-size: 30px; } 
	}

/* Header */

#InsideHeader { width:auto; height:160px; background:#ff5500; color:#fff; overflow:hidden; }
.HeaderWrapper { width:600px; height:160px; line-height:160px; margin:0 auto; position:relative; }
.HeaderWrapper .AlignLeft { width:50%; text-align:left; }
.HeaderWrapper .AlignRight { width:50%; text-align:right; }
.HeaderWrapper img { bottom:0; left:50%; margin-left:-95px; position:absolute; }
.HeaderWrapper strong { font-size:70px; font-weight:bolder; display:block; text-align:center; } 
	
	@media screen and (max-width:650px){
		#InsideHeader { width:auto; height:80px; overflow:hidden; }
		.HeaderWrapper { width:300px; height:80px; line-height:80px; margin:0 auto; position:relative; }
		.HeaderWrapper .AlignLeft { width:100px; text-align:left; }
		.HeaderWrapper .AlignRight { width:100px; text-align:right; }
		.HeaderWrapper img { bottom:0; width:100px; left:50%; margin-left:-50px; position:absolute; }
		.HeaderWrapper strong { font-size:30px; font-weight:bolder; display:block; text-align:center; } 
	}

.InsideNavigationToggle { display:none; }
.InsideNavigationWrap { height:60px; }
.InsideNavigation { background:#292929; }
.InsideNavigation ul { margin:0 auto; max-width:1200px;}
.InsideNavigation ul li { float:left; width:10%; text-align:center; }
.InsideNavigation ul li a { transition:0.5s; background:#292929  url(images/arrow.png) no-repeat center 100px; display:block; color:#999; height:60px; line-height:60px; font-size:30px; font-weight:bold; }
.InsideNavigation ul li a:hover { background:#000 url(images/arrow.png) no-repeat center bottom; color:#fff; }
	
	@media screen and (max-width:900px){
		.InsideNavigation ul li a { font-size:18px; }
	}
	@media screen and (max-width:650px){
		.InsideNavigationWrap { height:auto; display:none; }
		.InsideNavigation ul { margin:0 auto; width:auto;}
		.InsideNavigation ul li { float:none; width:auto; text-align:center; }
		.InsideNavigation ul li a { transition:0; background:#292929; border-bottom:1px solid #000; display:block; color:#999; height:auto; line-height:normal; font-size:20px; padding:6px 0; font-weight:bold; }
		.InsideNavigation ul li a:hover { background:#292929; color:#fff; }
	}
	@media screen and (max-width:650px){
		.InsideNavigationToggle { background:#292929; color:#fff; height:40px; line-height:40px; display:block; text-align:center; }
	}

.Fixed { position: fixed; top: 0; left:0; right:0; z-index:9999;}

/* Elements */
	
p { display:block; padding:10px; font-size:16px; line-height:22px; }
.Date { background:url(images/calendar.png) no-repeat #ff5500 0 0 !Important; }
.Date p { line-height:28px; font-size:18px; text-align:center; width:110px; margin:10px auto 0 auto; padding:10px 0 0 0; border-radius:2px; }
.Date br { display:none; }
.Date p strong { font-size:44px; display:block; height:54px; line-height:54px; background:rgba(255,255,255,0.2); }
p.Year { padding:0; height:140px; line-height:140px; font-size:30px; text-align:center; }
.Adventure p { padding:0; height:140px;	line-height:140px; font-size:30px; text-align:center; }

/* Page Framework */

#TimelineGrid { background:url(images/grid-single.gif) center 20px #f2f2f2; }
#Wrapper { width:960px; margin:0 auto 10px auto; background:#fff; position:relative; }
#Timeline { padding:10px 0; position:relative;  }

	@media screen and (max-width:1000px){
		#Wrapper { width:640px;}
	}
	@media screen and (max-width:700px){
		#Wrapper { width:320px;}
	}

h6 { float:left; height:0; width:0; }
h6 span { position:absolute; left:-150px; margin-top:10px; height:140px; width:140px; line-height:140px; text-align:center; background:#292929; font-size:40px; color:#fff; border-radius:2px; }
h6:nth-child(even) span { left:auto; right:-150px; }

	@media screen and (max-width:1300px){
		h6 { float:left; height:auto; width:auto; }
		h6 span { position:static; margin:10px; width:300px; height:300px; line-height:300px; font-size:60px; display:block; }
	}
	@media screen and (max-width:700px){
		h6 { float:none; clear:both; height:auto; width:auto; padding:10px; }
		h6 span { position:static; left:0; margin:0; height:140px; width:100%; line-height:140px; font-size:40px; color:#fff; border-radius:2px; display:block; }
		h6:nth-child(even) span { left:auto; right:0; }
	}
	
h4 { float:left; height:0; width:0; }
h4 span { position:absolute; left:-150px; margin-top:170px; height:110px; padding:15px 0; width:140px; text-align:center; background:#292929; font-size:10px; color:#fff; border-radius:2px; font-size:14px; }
h4:nth-child(even) span { left:auto; right:-150px; }
h4 strong { display:block; font-size:40px; }

	@media screen and (max-width:1300px){
		h4 { float:left; height:auto; width:auto; }
		h4 span { position:static; margin:10px; width:300px; height:260px; font-size:30px; padding:40px 0 0 0; line-height:40px; display:block; }
		h4:nth-child(even) span { left:auto; right:0; }
		h4 strong { display:block; padding:30px 0; font-size:80px; }
	}
	@media screen and (max-width:700px){
		h4 { float:none; clear:both; height:auto; width:auto; padding:10px; }
		h4 span { position:static; height:110px; margin:0; line-height:20px; padding:15px 0; width:100%; text-align:center; background:#292929; font-size:10px; color:#fff; border-radius:2px; font-size:14px; display:block; }
		h4 strong { font-size:40px; padding:15px 0; }
	}

.YearStrip { display:block; padding:20px 10px 0 10px; }

/* Box Templates*/

.Box { width:320px; height:320px; float:left; }

.BoxSmall, .BoxLarge, .BoxWide, .BoxLong { background:#fff url(images/loader.gif) no-repeat center center; overflow:hidden; float:left; margin:10px; position:relative; color:#fff; border-radius:2px; }
img { border-radius:2px; }

.BoxSmall { width:140px; height:140px; }
.BoxSmall img {	width:140px; }
.BoxLarge { width:300px; height:300px; }
.BoxLarge img {	width:300px; }
.BoxLong { width:140px; height:300px; }
.BoxLong img { width:140px; }
.BoxWide { width:300px; height:140px; }
.BoxWide img {	width:300px; }

.BoxSmall:hover .Info, .BoxLarge:hover .Info, .BoxWide:hover .Info, .BoxLong:hover .Info { margin:0; border-radius:2px; }

.Info { margin-top:300px; position:absolute; top:0; bottom:0; left:0; right:0; background:#202020; background:rgba(0,0,0,0.8); color:#fff; transition:1s; -webkit-transition:1s; -moz-transition:1s; }	
.Info p { display:block; padding:10px; margin:0; font-size:16px; line-height:22px; text-align:left; background:none; }	
.Info p a { display:inline-block; height:16px; width:70px; background:url(images/source.png) no-repeat; }
.Info p a:hover { text-decoration:underline; }

.Adventure { background:#ff5500; border-radius:100px; transition:1s; }
.Adventure:hover {border-radius:0; }
.Quote { background:#ff5500; }

.QuoteLarge { padding:15px 15px 0 80px; background:url(images/quote.png) no-repeat 15px 15px; }
.QuoteLarge blockquote {	padding:0 0 5px 0; font-size:18px; line-height:22px; font-family:Georgia, "Cantata One", Times, serif; }

.QuoteSmall {	padding:15px 15px 0 80px; background:url(images/quote.png) no-repeat 15px 15px; }
.QuoteSmall blockquote {	padding:0 0 5px 0; font-size:14px; line-height:18px; font-family:Georgia, "Cantata One", Times, serif; }

.BoxSmall .QuoteSmall, .BoxSmall .QuoteLarge { padding:65px 15px 0 15px;}

.VideoClip { padding:10px; background:#202020; border-radius:2px; width:280px; height:280px; }

.BoxEpisodeGuide { text-align:center; width:300px; margin:10px; background:#ff5500; border-radius:2px;  }
.BoxEpisodeGuide h3 { font-weight:bold; color:#fff; font-size:24px; line-height:40px; }
.BoxEpisodeGuide ul { color:#fff; font-size:14px; line-height:20px;  }
.EpisodeGuide-4 { padding:90px 0; height:120px; }
.EpisodeGuide-5 { padding:80px 0; height:140px; }
.EpisodeGuide-6 { padding:70px 0; height:160px; }
.EpisodeGuide-7 { padding:60px 0; height:180px; }
.EpisodeGuide-8 { padding:50px 0; height:200px; }
.EpisodeGuide-9 { padding:40px 0; height:220px; }
.EpisodeGuide-10 { padding:30px 0; height:240px; }
.EpisodeGuide-11 { padding:20px 0; height:260px; }
.EpisodeGuide-12 { padding:10px 0; height:280px; }
.EpisodeGuide-13 { padding:0; height:300px; }

small {	font-size:14px; }

.Point { left:50%; margin-left:-10px; position:absolute; visibility:hidden; }

#TimelinePoints { position:relative; z-index:9; width:960px;  }
#TimelinePoints .TLPoint { position:absolute; height:40px; margin-top:-20px; background:url(images/point.png) repeat-x center; transition:1s; }
#TimelinePoints .TLPoint:hover { opacity:1; }
#TimelinePoints .TLPoint strong { float:left; height:40px; line-height:40px; font-size:16px; color:#333; border:1px solid #666; border-radius:5px; padding:0 20px; box-shadow:0 0 10px rgba(0,0,0,0.5); background:url(images/trans.png) repeat-x center; }
#TimelinePoints .TLPoint span { float:right; width:30px; height:30px; border-radius:10px; border:1px solid #666; border-radius:20px; margin:5px 0 0 0 ; box-shadow:0 0 10px rgba(0,0,0,0.5); background:url(images/trans.png) repeat-x center; }

#TimelinePoints .TLright strong { float:right; }
#TimelinePoints .TLright span { float:left; }

#Overview { padding:10px 0; }
#Overview li { width:300px; height:300px; margin:10px; float:left; position:relative; }
#Overview li img { position:absolute; z-index:1; left:0; top:0; }
#Overview li a { transition:0.2s; }
#Overview li a img { transition:0.4s; opacity:1; }
#Overview li a:hover img { opacity:0.5; }
#Overview li a span { transition:0.4s; position:absolute; z-index:1; left:0; top:0; color:#fff; background:#000; background:rgba(0,0,0,0.7); font-size:36px; line-height:50px; padding:25px 0; margin:75px; display:block; width:150px; border-radius:100px; text-align:center; font-weight:bold; }
#Overview li a:hover span { margin:100px 0 0 0; width:300px; background:#ff5500; border-radius:0; font-size:50px; }

/*Animations*/

@keyframes TardisAppear { from {opacity:0; bottom:-50px; } 10% {opacity: 0; bottom:-50px; } to {opacity: 1; bottom:0; } }
@-moz-keyframes TardisAppear{ from {opacity:0; bottom:-50px; } 10% {opacity: 0; bottom:-50px; } to {opacity: 1; bottom:0; } }
@-webkit-keyframes TardisAppear{ from {opacity:0; bottom:-50px; } 10% {opacity: 0; bottom:-50px; } to {opacity: 1; bottom:0; } }
.HeaderWrapper img { animation: TardisAppear 2s;-moz-animation: TardisAppear 2s; -webkit-animation: TardisAppear 2s;  }

@keyframes AnimationOpacity { from {opacity:0;} 40% {opacity: 0;} to {opacity: 1;} }
@-moz-keyframes AnimationOpacity{ from {opacity:0;} 40% {opacity: 0;} to {opacity: 1;} }
@-webkit-keyframes AnimationOpacity{ from {opacity:0;} 40% {opacity: 0;} to {opacity: 1;} }
.HeaderWrapper strong { animation: AnimationOpacity 4s;-moz-animation: AnimationOpacity 3s; -webkit-animation: AnimationOpacity 3s;  }

/* breadcrumb */

#breadcrumb { background:#f5f5f5; padding:15px 0; font-size:14px; }
#breadcrumb .Wrapper { width:940px; }
#breadcrumb a {	padding:0 5px; font-weight: bold; }
#breadcrumb a:first-child {	padding:0 5px 0 0; }
#breadcrumb a:hover { text-decoration:underline; }

    @media screen and (max-width:800px){
        #breadcrumb { padding:10px 0; font-size:11px; }
    }
	
.wrapper { max-width:1200px; margin:0 auto; }

    @media screen and (max-width:1300px){
        .wrapper { width:auto; padding: 0 40px; }
    }
    @media screen and (max-width:1000px){
        .wrapper { width:auto; padding: 0 30px; }
    }
    @media screen and (max-width:600px){
        .wrapper { padding: 0 15px; }
    }
	
/* Colours */

/*Orange*/
.Body1963 .Date { background:url(images/calendar.png) no-repeat #ff5500 0 0 !Important; }
.Body1963 #InsideHeader, .Body1963 .Adventure, .Body1963 .Quote, .Body1963 .BoxEpisodeGuide, #Overview li.Home1963 a:hover span
{ background:#ff5500; }
.InsideNavigation ul li a.Link1963:hover { color:#ff5500; }
/*Dark Blue*/
.Body1968 .Date { background:url(images/calendar.png) no-repeat #064081 0 0 !Important; }
.Body1968 #InsideHeader, .Body1968 .Adventure, .Body1968 .Quote, .Body1968 .BoxEpisodeGuide, #Overview li.Home1968 a:hover span
{ background:#064081; }
.InsideNavigation ul li a.Link1968:hover { color:#064081; }
/*Turquoise*/
.Body1973 .Date { background:url(images/calendar.png) no-repeat #00b09e 0 0 !Important; }
.Body1973 #InsideHeader, .Body1973 .Adventure, .Body1973 .Quote, .Body1973 .BoxEpisodeGuide, #Overview li.Home1973 a:hover span
{ background:#00b09e; }
.InsideNavigation ul li a.Link1973:hover { color:#00b09e; }
/*Blue*/
.Body1978 .Date { background:url(images/calendar.png) no-repeat #00a1f3 0 0 !Important; }
.Body1978 #InsideHeader, .Body1978 .Adventure, .Body1978 .Quote, .Body1978 .BoxEpisodeGuide, #Overview li.Home1978 a:hover span
{ background:#00a1f3; }
.InsideNavigation ul li a.Link1978:hover { color:#00a1f3; }
/*Brown*/
.Body1983 .Date { background:url(images/calendar.png) no-repeat #9c3900 0 0 !Important; }
.Body1983 #InsideHeader, .Body1983 .Adventure, .Body1983 .Quote, .Body1983 .BoxEpisodeGuide, #Overview li.Home1983 a:hover span
{ background:#9c3900; }
.InsideNavigation ul li a.Link1983:hover { color:#9c3900; }
/*Green*/
.Body1983 .Date { background:url(images/calendar.png) no-repeat #5d9c00 0 0 !Important; }
.Body1983 #InsideHeader, .Body1983 .Adventure, .Body1983 .Quote, .Body1983 .BoxEpisodeGuide, #Overview li.Home1983 a:hover span
{ background:#5d9c00; }
.InsideNavigation ul li a.Link1983:hover { color:#5d9c00; }
/*Pink*/
.Body1988 .Date { background:url(images/calendar.png) no-repeat #7b0033 0 0 !Important; }
.Body1988 #InsideHeader, .Body1988 .Adventure, .Body1988 .Quote, .Body1988 .BoxEpisodeGuide, #Overview li.Home1988 a:hover span
{ background:#7b0033; }
.InsideNavigation ul li a.Link1988:hover { color:#7b0033; }
/*Red*/
.Body1993 .Date { background:url(images/calendar.png) no-repeat #c00900 0 0 !Important; }
.Body1993 #InsideHeader, .Body1993 .Adventure, .Body1993 .Quote, .Body1993 .BoxEpisodeGuide, #Overview li.Home1993 a:hover span
{ background:#c00900; }
.InsideNavigation ul li a.Link1993:hover { color:#c00900; }
/*Purple*/
.Body2003 .Date { background:url(images/calendar.png) no-repeat #51149c 0 0 !Important; }
.Body2003 #InsideHeader, .Body2003 .Adventure, .Body2003 .Quote, .Body2003 .BoxEpisodeGuide, #Overview li.Home2003 a:hover span
{ background:#51149c; }
.InsideNavigation ul li a.Link2003:hover { color:#51149c; }
/*Gold*/
.Body2008 .Date { background:url(images/calendar.png) no-repeat #cb9119 0 0 !Important; }
.Body2008 #InsideHeader, .Body2008 .Adventure, .Body2008 .Quote, .Body2008 .BoxEpisodeGuide, #Overview li.Home2008 a:hover span
{ background:#cb9119; }
.InsideNavigation ul li a.Link2008:hover { color:#cb9119; }
/*Gold*/
.Body2008 .Date { background:url(images/calendar.png) no-repeat #cb9119 0 0 !Important; }
.Body2008 #InsideHeader, .Body2008 .Adventure, .Body2008 .Quote, .Body2008 .BoxEpisodeGuide, #Overview li.Home2008 a:hover span
{ background:#cb9119; }
.InsideNavigation ul li a.Link2008:hover { color:#cb9119; }

/* breadcrumb */

#breadcrumb { background:#f5f5f5; padding:15px 0; font-size:14px; }
#breadcrumb .Wrapper { width:940px; }
#breadcrumb a {	padding:0 5px; font-weight: bold; color:#333; }
#breadcrumb a:first-child {	padding:0 5px 0 0; }
#breadcrumb a:hover { text-decoration:underline; }

    @media screen and (max-width:800px){
        #breadcrumb { padding:10px 0; font-size:11px; }
    }