/* Generic Selectors */


body {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 21px;
	color: #000000;		
	background-color: #DDDDDD;
	background-image: url("pictures/woodboard-bg01sm.jpg")
	}



h1 {

	font-family: Helvetica, Arial, sans-serif;
	font-size: 24px;
	font-weight: bold;
	color: #000000;
	line-height: 120%;
	}

h2 {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: #000000;
	line-height: 120%;
	}

div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}



div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
	width: 49.99999%;
	margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
	width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}



/* Class Selectors */


.buttonbox {
  border: 3px ridge #440000;
  color: darkred;
  background-color: #FFFFFF;
  padding: 5px 4px;
  text-align: center;
  font-weight: normal;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  margin: 0;
  cursor: pointer;
}


.missionbox {
	font-size: 14px;
	border: 2px solid darkred;
	width:	340px;
	padding: 8px 10px 8px 10px;	
	}

.weirdbg {
	background-image: url("../picts/bgtextures/weirdbrownish-bg.jpg");
	}

.bg-ltgray {
	background-color: #EEEEEE;
	border: 1px solid darkred;
	padding: 9px 10px 10px 10px;
	margin-left: 5px;
	margin-right: 5px;
	}

.callout {
	font-size: 18px;
	line-height: 24px;
	}

.border1padded {
	border: 3px ridge darkred;
	padding: 14px 14px 14px 14px;
	margin-top: 24px;
	margin-bottom: 32px;
	}

.text16 {
	font-size: 16px;
	line-height: 22px;
	}

.calloutborder {
	font-size: 18px;
	line-height: 24px;
	border: 2px solid darkred;
	padding: 12px 16px 12px 20px;	
	}

.bigred {
	color: #AA0000;
	font-size: 24px;
	}

.redtext {
	color: #AA0000;
	}

.darkred {
	color: #660000;
	}

.darkredsm {
	color: #660000;
	font-size: 12px;
	}

.small {
	font-size: 12px;
	line-height: 15px;
	}

.smallPal {
	font-size: 12px;
	font-family: Palatino, Times, serif;
	font-weight: bold;
	line-height: 16px;
	margin: 4; 
	}

.medPal {
	font-size: 16px;
	font-family: Palatino, Times, serif;
	font-weight: bold;
	line-height: 22px;
	margin: 6; 
	}

.bigPal {
	font-size: 26px;
	font-family: Palatino, Times, serif;
	font-weight: bold;
	line-height: 34px;
	margin: 10; 
	}

.huge {
	font-size: 32px;
	line-height: 42px;
	}


.border-padded {
	border: 2px solid gray;
	padding: 14px 14px 14px 14px;
	margin-top: 24px;
	margin-bottom: 32px;
	}

.listborder {
	border: 2px solid gray;
	padding: 10px 14px 10px 46px;	
	}

.listborderfilled {
	border: 2px solid gray;
	padding: 10px 14px 10px 46px;	
	background-color: #FFF0AA;  
	}
 	
	
/*************************  ID's *************************/


#mainpane { 
	position: relative; 
	max-width: 750px; 
	margin: 0 auto; 
	margin-top: 0px;
	padding: 30px 30px 30px 30px;	
	border: 4px ridge #B3B3B3; 
	font-weight: normal; 
	background-color: #FFFFFF;  
	}

#widepane { 
	position: relative; 
	margin: 0 auto; 
	margin-top: 0px;
	padding: 10px 10px 10px 10px;	
	border: 4px ridge #B3B3B3; 
	font-weight: normal; 
	background-color: #FFFFFF;  
	}

#replaypane { 
	position: relative; 
	margin: 0;
	padding: 0;
	height:	620px;
	font-weight: normal; 
	background-color: #FFFFFF;  
	}

#floatright {
	float: right;
	margin-left: 16px;
	margin-bottom: 6px;
	}

#floatleft {
	float: left;
	margin-right: 16px;
	margin-bottom: 6px;
	}
	
		

#content-desktop {display: block;}
#content-mobile {display: none;}

@media screen and (max-width: 600px) {

#content-desktop {display: none;}
#content-mobile {
	display: block;
	background: url(bill/picts/bgtextures/beigediag01.jpg);
	}