/* CSV Table Classes for standard screens*/
body{
	width : 100%;
	background-color:   rgba(0,0,0,.0); 			/* Sets background to 0% - ie fully transparent */
	background-color:   transparent;
    font-size:          18px;                       /* default font size for page */
	margin:             1px;                        /* moves body a smidge off left hand edge */
    left:               px;
    top:                0px;
 /* padding:            0px; */
	background:         url(../images/f1_back_plain.png) no-repeat center center width:100%; /* needed for android only, ios works without */
	
	font-family:        Verdana,Arial,Geneva,Helvetica,sans-serif; 		/* default font for everything */
	
	-webkit-tap-highlight-color : rgba(0,0,0,0); 	/* Stops button highlighting. Override the semitransparent color overlay when a user clicks */*/                                          /* a clickable element.  To completely disable it, set the value to ‘transparent’ or ‘rgba(0,0,0,0)’ */

    -webkit-background-size:    cover;              /* next lines make background images fit */
    -moz-background-size:       cover;
    -o-background-size:         cover;
    background-size:            cover;
}
html { /* prevent font size changes when rotating */

    -webkit-text-size-adjust:           100%; /* Prevent font scaling when rotating in landscape while allowing user zoom */
}

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

 a:hover {
	text-decoration:    underline;
	color:              black;
 }

/* General font sizes and styles to fit the screen across the app */
p{
	font-size:          18px;    /* default font size */
    color:              #000066; /* dark blue to match race page main font colour for the race page */
	padding:            4px;
	text-align:         center;
	text-align:         left;	/* left justified is the default */
}

h1 {
	font-size:          36px; 		/*calendar is 36 */
	font-weight:        normal;
	color:              #000066; 	/* dark blue */
	text-align:         center;		/* make h1 center justified */
  }
  
h2{
	font-size:          30px; 		/*calendar is 30 */
    color:              #000066; 	/* dark blue */
	font-weight:        normal;
 /* text-transform:     uppercase; */
	text-align:         center;		/* make h2 centered */
}

h3{
	font-size:          24px; 		/*calendar is 24*/
    color:              #000066; 	/* dark blue */
	font-weight:        normal;
	margin-top:         0;
 /* text-transform:     uppercase; */
	text-align:         center;		/* make h3 centered */
}


/* compensation for hi res android type screens, e.g. Sony Xperia Z */
@media only screen and (min-device-width: 769px) and (max-device-width:1080px) {
  body {
    font-size:          15px;                       /* default font size for page */
	width:              98%;
    border:             0px solid green;
  }
  
  p {
	font-size:          15px;
  }
  
    
  h1{
	font-size:          22px; 		/* matches calendar */
	font-weight:        bold;
  }
  h2{
	font-size:          20px; 		/* matches calendar */
	font-weight:        bold;
  }
  
  h3{
	font-size:          18px; 		/* matches calendar */
	font-weight:        bold;
  }
}

/* compensation for mid size screens, e.g iPad, samsung galaxy 2 */
@media only screen and (min-device-width: 480px) and (max-device-width: 768px) {
  body {
    font-size:          15px;                       /* default font size for page */
	width:              98%; 	/* needs to be wide for Android, but less is better for ios */
    border:             0px solid gray;
 /* font-size:          15px; 	*/	/* default font for rows, match with results style */
  }
  
  p {
	padding:            3px;
	font-size:          15px; font-size: 15px !important; line-height: 18px; line-height: 18px !important;
	color:              black; 	/* to match race page main font colour for the race page */
  }
  
  immg {                        /* Not sure why I set img but it has an adverse effect on the snap menu helmets */
    min-width:          20%;
	max-width:          40%;
  }
  
  h1{
	font-size:          20px; 		/* matches calendar */
	font-weight:        bold;
  }
  h2{
	font-size:          18px; 		/* matches calendar */
	font-weight:        bold;
  }
  
  h3{
	font-size:          16px; 		/* matches calendar */
	font-weight:        bold;
  }
} /* end mid size */
  
/* very specific for iPad */
@media only screen and (min-device-width: 768px) and (max-device-width: 768px) {
  body {
	width:              100%;		/* needs to be wide for Android, but less is better for ios */
    border:             0px solid yellow;
    font-size:          16px;       /* default font for rows, match with results style */
  }  
}  

/* compensation for smaller screens, e.g iPhone 4 */
@media only screen and (min-device-width: 320px) and (max-device-width: 479px) {
  body{
    font-size:          13px;       /* default font size for iPhone */
	color:              black; 		/* to match race page main font colour for the race page */
	width:              97.0%;
    border:             0px solid red;
  }
  
  immg {                        /* Not sure why I set img but it has an adverse effect on the snap menu helmets */
    min-width:          20%;
	max-width:          40%;
  }
  
  p{
	color:              black; 		/* to match race page main font colour for the race page */
	font-size:          13px; 		/* default font size for iPhone */
	padding:            2px;
  }
  
  h1{
	font-size:          18px; 		/* matches calendar */
	font-weight:        bold;
  }
  
  h2{
	font-size:          16px; 		/* matches calendar */
	font-weight:        bold;
  }
  
  h3{
	font-size:          14px; 		/* matches calendar */
	font-weight:        bold;
  }
} /* smallsize */