/* F1 2017 Calendar CSS - last edited 9 Dec 2017 */
body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
	/* Simple page reset */
	margin:				0;
	padding:			0;
}
img {
    min-width:			20%;
	max-width:			40%;
    height:				auto;
	display: 			block;
    margin-left: 		auto; 		/* centres things */
    margin-right: 		auto
}
p{
	color:				black; 		/* to match race page main font colour for the race page */
	font-size:			13px; 		/* default font size for iPhone */
	padding:			2px;
}
  
html { 								/* prevent font size changes when rotating */
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

body{								/* Setting default text color, background and a font stack */
	color:				#cccccc;	/* main colour for the page, not used inside the accordion */
	font-size:			13px; 		/* size used inside the accordion */
	background:			#CCFFFF; 	/* pale grey/blue page background */
	background:			#302b23;	/* dark grey page background */
	background-image:	url(../images/splash1024x768p.jpg);
	background-color:	grey; 		/* need this to minimise first flash page-1 to page-2 */
	background-size:	100%;
	background-repeat:	no-repeat;
	font-family:		Arial, Helvetica, sans-serif;
}

ul{
	margin:				0;
	padding:			0;
}

.container{						/* Width of the title box - The topmost UL */
	width:				98%;
	margin:				0 auto;
	padding:			2px;
}

li{
	list-style:			none;
	text-align:			left;
}

.menu{							/* The main list elements */
	padding:			2px 0;
	width:				95%;
}

.button a{						/* The main section titles */
	display:			block;
	font-family:		BPreplay,Arial,Helvetica,sans-serif;
	font-size:			16px; 		/* size used on main accordion row 16px max you can go for iPhone*/
	height:				34px;
	overflow:			hidden;
	padding:			5px 5px 0;
	position:			relative;
	width:				100%;
}

li.button a:hover{					/* Removing the inherited underline from the titles */
	text-decoration:	none;
}

li.button a span{					/* This span acts as the right part of the section's background */
	height:				44px;
	position:			absolute;
	right:				0;
	top:				0;
	width:				4px;
	display:			block;
}

/* Setting up different styles for each section color using row_lite and row_dark */

li.button a.lite{background:		url(../images/row_lite.png) repeat-x top left; color:#ffffff;}
li.button a.lite span{background:	url(../images/row_lite.png) repeat-x top right;}

li.button a.dark{background:		url(../images/row_dark.png) repeat-x top left; color:#ffffff;}
li.button a.dark span{background:	url(../images/row_dark.png) repeat-x top right;}

li.button a.blue{background:		url(../images/blue.png) repeat-x top left; color:#074384;}
li.button a.blue span{ background:	url(../images/blue.png) repeat-x top right;}

li.button a.green{background:		url(../images/green.png) repeat-x top left; color:#436800;}
li.button a.green span{background:	url(../images/green.png) repeat-x top right;}

li.button a.orange{background:		url(../images/orange.png) repeat-x top left; color:#882e02;}
li.button a.orange span{background:	url(../images/orange.png) repeat-x top right;}

li.button a.red{background:			url(../images/red.png) repeat-x top left; color:#641603;}
li.button a.red span{ background:	url(../images/red.png) repeat-x top right;}

/* The hover effects */

li.button a:hover{ background-position:bottom left;}
li.button a:hover span{ background-position:bottom right;}

.dd{								/* The dropdown expandable lists */
	display:			none;
	padding-top:		5px;
	width:				100%;
}

.dd li{								/* Each element in the dropdown expandable list */
	background-color:	#373128;
	background-color:	#CCFFFF;	/* background colour of the inside of the accordion - pale grey/blue */
	background-color:	#99CCFF;
	color:				#000000;	/* std text colour used inside the accordion - black */
	margin:				1px 0;		/* thin margins between accordion inside rows */
	border:				1px solid #40392C;
	padding:			4px 18px;	/* 2nd px is the left padding on the row */
}

.clear{
	clear:				both;
}

#main{								/* The main container */
	margin:				10px auto;
	text-align:			center;
	width:				100%;
	position:			relative;
}

a, a:visited {
	color:				#0196e3;
	color:				#333333;	/* hyperlink unhovered colour */
	text-decoration:	none;
	outline:			none;
}

a:hover{
	text-decoration:	underline;
	color:				#000000;	/*std text colour used inside the accordion for hyperlink hovers */
}

p{									/* The tut info on the bottom of the page */
	padding:			10px;
	text-align:			center;
}


/* The styles below are only necessary for the top of the page */

h1{
	font-family:		"Myriad Pro",Arial,Helvetica,sans-serif;
	font-size:			38px;
	color:				#000066;
	font-weight:		normal;
	margin-bottom:		15px;
}

h2{
	font-family:		"Myriad Pro",Arial,Helvetica,sans-serif;
	font-size:			30px;
    color:				#000066;
	font-weight:		normal;
	padding-right:		10px;
	right:				0;
	text-align:			left;
	text-transform:		uppercase;
	top:				15px;
}

h3{
	font-family:		"Myriad Pro",Arial,Helvetica,sans-serif;
	font-size:			16px;
	color:				#000066;
	font-weight:		normal;
	padding-right:		10px;
	right:				0;

	text-transform:		uppercase;
	top:				15px;
}

/* CSS for the accordion countdown timer */

hr{
	margin-bottom:		10px;
}
div{
	padding:		5px;
	display:		inline;
}
span{
	margin-right:		4px;
}

.txt_days, .txt_hours, .txt_min{
	padding-right:		4px;
}

/* you can control individual items if you want to*/
#myCountDownDiv0{
	background:		#CCC;
}
#myCountDownDiv0 span{
	font-family:		"Arial Black", Gadget, sans-serif;
}
#myCountDownDiv0 .count_days, #myCountDownDiv0 .count_hours, #myCountDownDiv0 .count_min, #myCountDownDiv0 .count_sec{
	color:			#00CC33;
}

#myCountDownDiv55_count_sec{
	color:			#F00;
}

/* compensation for mid size screens, e.g iPad */
@media only screen and (min-device-width: 481px) and (max-device-width: 1200px) {
 
  .dd li{								/* Each element in the dropdown expandable list */
	font-size:			14px; 			/* default font size for iPhone */
	margin:				1px 0;			/* thin margins between accordion inside rows */
	border:				1px solid #40392C;
	padding:			2px 10px;		/* 2nd px is the left padding on the row */
}
  
  h1	{
	font-size:			20px;
	color:				black;
	font-weight:		bold;
  }

  h2	{
	font-size:			18px;
	color:				black;
	font-weight:		bold;
  }

  h3	{
	text-align:			center;
	font-size:			16px;
	color:				black;
	font-weight:		bold;
  }

}

/* compensation for smaller screens e.g. iPhone */
@media only screen and (max-device-width: 481px) {

  .dd li{								/* Each element in the dropdown expandable list */
	font-size:			11px; 			/* default font size for iPhone */
	margin:				1px 0;			/* thin margins between accordion inside rows */
	border:				1px solid #40392C;
	padding:			2px 10px;		/* 2nd px is the left padding on the row */
}
  h1	{
	font-size:			18px;
	color:				black;
	font-weight:		bold;
  }

  h2	{
	font-size:			14px;
	color:				black;
	font-weight:		bold;
  }

  h3	{
	text-align:			center;
	font-size:			13px;
	color:				black;
	font-weight:		bold;
  }

}