/* 	responsive three panel
	https://codepen.io/Cheesetoast/pen/kONLOM
*/

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

* { box-sizing: border-box; }

body { 
  font-family: 'Open Sans', sans-serif;
  color: #666;
}

/* STRUCTURE */

.wrapper {
	padding: 5px;
	/*max-width: 960px;*/
	width: 95%;
	margin: 20px auto;
}
header {
	padding: 0 15px;
}

.columns {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	margin: 5px 0;
}

.column {
	flex: 1;
	border: 1px solid gray;
	margin: 2px;
	padding: 10px;
	&:first-child { margin-left: 0; }
	&:last-child { margin-right: 0; }
	
}

footer {
	padding: 0 15px;
}

.field_label {
	color : white;	
	display: inline-block;
	width: 160px;
}

.field_value {
	color : black;
	background-color : white;
	border : 1px solid blue;
	display: inline-block;
	width: 50px;
	text-align: center;
}


.location {
	font-size:  24pt;
	color: white;
	font-weight: bold;
}







/* background image */

#towerdiv {
	background-image: url("tower_bg.jpg");
	background-color: #cccccc;
	background-size: cover;
}

#berth8div {
	background-image: url("berth8_bg.jpg");
	background-color: #cccccc;
	background-size: cover;
}

#berth9div {
	background-image: url("berth9_bg.jpg");
	background-color: #cccccc;
	background-size: cover;

}



footer {
	font-size:small;
	text-align:center;
}

.timestamp {
	font-size:small;
	text-align:center;
	color:purple;
}


/* responsive */


/* larger than FHD displays */

@media screen and (min-width: 1921px) {

		.field_label {
			font-size: 24pt;
			width: 400px;
		}
		
		.field_value {
			font-size : 24pt;
			width: 200px;
		}
		
		.timestamp {
			font-size: 24pt;
		}
	
	
}

/* 	CSS For narrow screens go here. Override as necessary.
*/

@media screen and (orientation:portrait) { 

	
		.columns .column {
		flex-basis: 100%;
		margin: 0 0 5px 0;
		}
		
		.field_label {
			font-size: 36pt;
			width: 49%;
		}
		
		.field_value {
			font-size : 36pt;
			width: 49%;
		}
		
		.timestamp {
			font-size: 24pt;
		}
	
}