body {
    font-family: 'Lato', sans-serif;
    margin: 0;
    padding: 0;
	
}

header {
/*    display: flex;
    justify-content: space-between;
    align-items: center;
*/    background-color: #cc0f09;
	
    background-image: url(/images/gpbg-md-red.jpg);
    margin: 0;
    padding: 0;
	

		
}

header p {
	
}

.logo {
	
	font-family: 'Roboto', sans-serif;
	    padding: 1px;
	    color: white;
	    text-decoration: none;
	    font-size: 31px;
	    height: 45px;
		vertical-align: top;
	    margin: 0px;
		padding-left: 10px;
		font-style: italic;
		

}




.sponsor {
    color: white;
}

nav {
    display: grid;
    grid-template-columns: repeat(6, auto);
    gap: 4px;
    background-color: white;
    text-align: center;
    padding: 3px;
}

nav a {
    color: white;
    text-decoration: none;
    background-color: #cc0f09;
    padding: 4px 8px;
    border-radius: 10px;
}

nav a.selected {
	 text-decoration: underline;
	 background-color: #ff0309;
}



.main-content {
    font-size: 21px;
	margin: 30px;
    max-width: 80ch;
	padding:5px;
	vertical-align: top;
	
}
.main-content strong {
	font-weight: 900;
}

.race-hub {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    background-color: #f19313;
/*    padding-bottom: 20px;
*/}

.racehub-grid-box {
    position: relative;
    overflow: hidden;
}

.racehub-grid-box img {
    width: 100%;
    display: block;
    border-radius: 5px;
    margin-top: 17px;
}

.racehub-grid-box .text-overlay {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.8);
    color: black;
    padding: 5px;
    border-radius: 7px;
    margin: 0;
    width: calc(100%);
    border: 1px solid #bbb;
    box-sizing: border-box;
}

.racehub-wrapper {
    border: 3px solid #f19313;
    position: relative;
    background-color: #f19313;
	padding:4px;
	padding-bottom: 10px;
	padding-top: 22px; 
}

.racehub-header {
    color: white;
    height: 25px;
    line-height: 15px; 
    text-align: center;
    font-weight: bold;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.current-event {
    position: absolute;
    top: 0;
    left: 2px;
    background-color: #f19313;
    color: white;
    padding: 0px;
    font-weight: bold;
}
.current-event-more {
    position: absolute;
    top: 0;
    right: 2px;
    font-size: 0.8em;
    background-color: #f19313;
    color: white;
    padding: 2px;
	padding-left: 10px;
    font-weight: bold;
}

.current-event-more a {
    color: white;
    text-decoration: none;
    border: 1px solid #959d9f;
    background-color: #959d9f;
    padding: 1px;
    border-radius: 5px;
}

.racehub-listing {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 10px;
    align-items: left;
}

.race-photo {
    background-color: #f0f0f0;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.race-photo img {
    width: 300px;
    height: 200px;
    object-fit: cover;
}

.race-info {
    background-color: re;
    padding: 10px;
}

.race-info a {
    text-decoration: none;
    color: inherit;
}

.race-info h3 {
    margin: 0;
}

.news {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
	padding:5px;
}

.news-grid-box {
    position: relative;
    overflow: hidden;
}

.news-grid-box img {
    width: 100%;
    display: block;
    border-radius: 5px;
    margin-top: 17px;
}

.news-grid-box .text-overlay {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.8);
    color: black;
    padding: 5px;
    border-radius: 7px;
    margin: 0;
    width: calc(100%);
    border: 1px solid #bbb;
    box-sizing: border-box;
/*    font-size: 0.8em;*/
	
}
footer {
    display: grid;
    grid-template-columns: 20% 60% 20%;
    background-color: #ccc;
    text-align: center;
    padding: 10px;
    position: relative;
}

.footer-left {
    text-align: left;
}

.footer-center {
    text-align: center;
}

.footer-right {
    text-align: right;
}

footer a {
    color: #cc0f09;
    text-decoration: none;
}

.footer-logo {
    position: absolute;
    bottom: 7px;
    right: 20px;
    width: 105px;
    height: 24px;
    background-image: url(/images/sprite.png);
    background-repeat: no-repeat;
    background-position: 0 -51px;
}


.story-photo {
    float: left; /* Add float:left to make text flow around the image */
    margin-right: 20px; /* Add some margin to the right of the image */
    margin-bottom: 5px; /* Add some margin to the bottom of the image */
	width:300px;
	font-size:16px;
	background-color: #eee;
	
}


div.photo-gallery {
	display: grid;
	grid-auto-flow: dense;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	/*grid-template-rows: 50px;
	*/
	/*grid-template-rows: repeat(auto, minmax(100px, 305px));*/
	grid-auto-rows: 100px;
/*	grid-auto-flow: row;*/
	grid-gap: 20px;
/*	height: fit-content;*/
	padding-bottom: 20px;
	justify-content: center;
	align-items: center;
	
}
div.photo-gallery .photo {
	/*background-color: black;*/
	align-items: center;
	justify-content: center;
}
div.photo-gallery a.tn {
/*	align-items: center;
	self-content: center;*/
}
div.photo-gallery2 {
	display: grid;
	grid-auto-flow: dense;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	/*grid-template-rows: 50px;
	*/
	/*grid-template-rows: repeat(auto, minmax(100px, 305px));*/
	grid-auto-rows: 200px;
/*	grid-auto-flow: row;*/
	grid-gap: 2rem;
/*	height: fit-content;*/
	padding-bottom: 20px;
	justify-content: center;
	align-items: center;
	font-size: 70%;
	
	
}
div.photo-gallery2 .photo {
	/*background-color: black;*/
	align-items: center;
	justify-content: center;
}
div.photo-gallery2 a.tn {
/*	align-items: center;
	self-content: center;*/
}



#wsw-todaysstories { 
	width: 80%;
	margin: 15px;
	margin-top: 20px;
	margin-bottom: 15px;
	padding: 5px; 
	border: 1px solid #777;
	font-size: 90%;
	}

#wsw-todaysstoriestitle { 
	color: white;
	background-color: #777;
	text-transform: uppercase;
	padding: 2px; 
	padding-left: 4px;
	margin-bottom: 4px;
	}

	h4 {
		font-weight:500;
		color: #333;
		font-size: 0.9em;
		line-height: 0%;
		padding: 0.0em;
		
	}
	
	#wsw-f12007racestable {
		border-collapse: collapse;
		width: 99%;
		padding: 0;
		margin: 0;
		background: #eee;
		border: 1px solid #444;	
	}
	#wsw-f12007racestable td {
		padding: 2px;
	}
	#wsw-f12007racestable .f1-title {
		text-align: center;
		background: url("http://photos.grandprix.com/jpeg/menubutton-grey.jpg") left top;
		color: #fff;
		padding: 3px;
	}
	#wsw-f12007racestable .f1-header {
		background: #ccc;
		color: #000;
	}
	#wsw-f12007racestable .f1-round, #wsw-f12007racestable .f1-event, #wsw-f12007racestable .f1-driver, #wsw-f12007racestable .f1-total, #wsw-f12007racestable .f1-date, #wsw-f12007racestable .f1-circuit, #wsw-f12007racestable .f1-length, #wsw-f12007racestable .f1-race, #wsw-f12007racestable .f1-laps, #wsw-f12007racestable .f1-distance, #wsw-f12007racestable .f1-winner, #wsw-f12007racestable .f1-report {
		font-size: 80%;
	}
	#wsw-f12007racestable .f1-round {
		background: #ccc;
		color: #000;
		text-align: right;
		width: 15px;
	}
	#wsw-f12007racestable .f1-event {
		background: #191970;
		color: #fff;
		font-size: 100%;
		font-weight: bold;
		padding-left: 5px;
	}
	#wsw-f12007racestable .f1-driver {
		background: #191970;
		color: #fff;
		font-size: 70%;
		font-weight: bold;*/
		padding-left: 5px;
	}
	#wsw-f12007racestable .f1-race {
		font-size: 40%;
		text-align: center;
		width:8px;
	}
	#wsw-f12007racestable .f1-total {
		background: #191970;
		color: #fff;
		font-size: 50%;
		font-weight: bold;
		text-align: right;	
	}
	div table#wsw-f12007racestable .f1-event a {
		color: #ddd;
	}
	#wsw-f12007racestable .f1-date {
		padding-left: 5px;
	}
	#wsw-f12007racestable .f1-laps {
		text-align: center;
	}
	#wsw-f12007racestable .f1header-header .wsw-date {
		padding-left: 5px;
	}


	/*Highlight the current race */

	#wsw-f12007racestable tr.f1-currentracerow .f1-round {
		background-color: #bfbfbf;
	}
	#wsw-f12007racestable tr.f1-currentracerow .f1-event {
		background-color: #78789a;
	}
	#wsw-f12007racestable tr.f1-currentracerow td {
		background-color: #cdcdcd;
	}
	#wsw-f12007racestable tr.f1-currentracerow {
		border: 1px solid #666;
	}


	/* Pagination ---------------------------------------------------------*/

	.pagination a, .pagination span.current, .pagination span.gap {
	    float: left;
	    padding: 0 14px;
	    line-height: 38px;
	    text-decoration: none;
		color: black;
	    background-color: white;
/*	    border-left-width: 0;*/
		margin: 1px;
	    border: 1px solid #888;
	}

	.pagination {
/*	    float: left;*/
		display: block;
		padding: 1px;
		margin: 3px;
	    .first{
	        padding : 0;
	        float: none;
/*	        border: none;*/
	    }
	    .prev {
	        padding : 0;
	        float: none;
/*	        border: none;*/
	    }
	    .page{
	        padding : 0;
	        float: none;
/*	        border: none;*/
	    }
	    .next{
	        padding : 0;
	        float: none;
/*	        border: none;
*/	    }
	    .last{
	        padding : 0;
	        float: none;
/*	        border: none;
*/	    }
	}





	/* photos */
	.grid-container {
	  display: grid;
	  grid-template-columns: repeat(3, 1fr);
	  gap: 10px;
	}

	.grid-item {
	  width: 100%;
	  height: auto;
	}

	.photo {
	  width: 100%;
	  height: auto;
	  object-fit: cover;
	}

/* iPhone media query */
@media only screen and (max-width: 767px) {
    nav {
        font-size: 0.8em;
    }
	nav a {
	    padding: 2px 3px;
	    border-radius: 5px;
	}

    .race-hub {
        grid-template-columns: repeat(3, 1fr);
    }

    .racehub-grid-box .text-overlay,
    .news-grid-box .text-overlay {
        font-size: 50%;
    }

    .news {
        grid-template-columns: repeat(2, 1fr);
    }
	
	.main-content {
	    font-size: 16px;
		padding: 15px;
	}
	
}

/* Media query for screens above 1500px width */
@media only screen and (min-width: 1501px) {
    .news {
        grid-template-columns: repeat(4, 1fr);
    }
	.main-content {
	    font-size: 26px;
		margin: 40px;
	}
	
}