/*	The below ensures that the padding & border are included in the total width
**	and height of the elements, which creates a better UX for a responsive site.
*/
* {
  box-sizing: border-box;
}


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

body {
	background-image:url('images/lotrWebPageBackground2.jpg') !important;
	/*text-align: center; /*centers our layout in some browsers*/
	/*font-family: times;
	font-size: 12pt;
	font-weight: normal;*/
	color: #2a0002;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}

html {
  font-family: "Times New Roman";
}

img {
  max-width: 100%;
  height: auto;
}

a {
	font-weight: bold;
	text-decoration: none;
	color: #863b1f;
}

.header {
	/*
  background-color: #9933cc;
  color: #ffffff;
  */
  padding: 15px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 4px;
  background-color: #996600;
  color: #F3CC85;
  font-weight:bold;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  background-color: #543800;
}

.menu a {
	display: block;
	font-family: times;
	font-weight: bold;
	text-decoration: none;
	color: #CAAC78;
}

.menu li.active {
	background-color: #543800;
}

.menuContent {
	max-height: 0;
	overflow: hidden;
}

input:checked ~ .menuContent {
	max-height: 100%;
}

/*
input#collapseMenu {
	display:none;
}
*/

.main #contentContainer #newsItemContent p {
	font-family: times;
	font-weight: normal;
	color: #2a0002;
}

/* subhead and linktext1 are the same. It's annoying I know. */
.subhead {
	font-family: times;
	font-size: 150%;
	font-weight: bold;
	color: #592010;
}

.subhead1 {
	font-family: times; 
	font-size: 120%; 
	font-weight: bold;
	color: #863b1f;
}

.linktext1 {
	font-family: times;
	font-size: 150%;
	font-weight: bold;
	color: #592010;
}

.datetext {
	font-family: times; 
	font-size: 100%; 
	font-weight: bold;
	color: #863b1f;
	text-decoration: none;
}

.datetextdark {
	font-family: times; 
	font-size: 14pt; 
	font-weight: bold;
	color: #602A17;
}


.pageHeader {
	font-family: times;
	font-size: 150%;
	font-weight: bold;
	color: #774022;
	text-transform: uppercase;
}

div.image {
	margin: 6px 6px 6px 6px;
}

div.image p {
	text-align: center;
	font-style: italic;
	font-size: 14;
	color: black;
	text-indent: 0;
}

.imageFloatLeft {
	float:  left;
	margin-bottom:  -2px;
	margin-right:   10px;
	margin-left:    0px;
	padding: 0.2em;
	border-width:   0px;
	border-style:   solid;
	border-color:   #434343;
}

.imageFloatLeft p {
        text-align: center;
        font-style: italic;
        font-size: smaller;
        text-indent: 0;
}

.imageFloatRight {
        float:  right;
        margin-bottom:  -2px;
        margin-left:    10px;
        padding: 0.2em;
        border-width:   0px;
        border-style:   solid;
        border-color:   #434343;
}

.imageFloatRight p {
        text-align: center;
        font-style: italic;
        font-size: smaller;
        text-indent: 0;
}


.articleTitleContainer {
	width: 100%;
	margin-bottom: 100px;
	/*border: 1px solid #FFFFFF;*/
}

#articleTitle {
	float: left;
	width: 80%;
	height: 85px;
}

#articleDate {
	float:	left;
	width:	20%;
	text-align: right;
	vertical-align: bottom;
	height: 85px;
}

#fifteenPixSpacer {
	clear: both;
	height: 15px;
	/* border: 1px solid #fff; */
}

table.unpaintedTable {
	/*margin:0;*/
	border:2px solid #605035;
	background:#ccab6f;
	margin-left:auto; 
    margin-right:auto;
}

table.unpaintedTable th {
	font-family:Times;
	font-size:1.1em;
	font-weight:bold;
	padding:5px;
	text-align:left;
	color:#F3CC85;
	background:#6A5A3B;
	vertical-align: middle;
}

table.unpaintedTable td {
	padding:2px;
	font-family:Times;
	font-size:0.9em;
	vertical-align: middle;
}

table.unpaintedTable tr.total {
	background:#927a50;
}

table.unpaintedTable tr.alt {
	background:#AD915E;
}

table.unpaintedTable tr:hover {
	background:#E7C27E;
}


.aside {
  background-color: #33b5e5;
  padding: 15px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.footer {
  /*background-color: #0099cc;*/
  /*color: #6A5A3B;*/
  text-align: center;
  font-size: 12px;
  padding: 15px;
}

.galleryNavigationContainer {
	float: left;
	width: 100%;
	margin-bottom: 20px
}

#galleryArrowLink {
	float: left;
	width: 93px;
	padding: 4px;
}

#galleryUpLink {
	float: left;
	width: 71px;
	padding: 4px;
}

#galleryViewAll {
	float: left;
	width: 100px;
	padding: 4px;
}

/*********************************************************************/
/* The below is for the thumb galleries. All new shiz for responsive */
/* designs :)                                                        */
/*********************************************************************/

.galleryContainer {
 width: 100%;
 margin: 30px auto;
 overflow: hidden;
}

.galleryItem {
 color: #863b1f;
 font: 12px/1.5 times;
 float: left;
 height: 85px;
 width: 21%;
 margin: 2% 2% 50px 2%;
}
 
.galleryItem h3 {
 /*text-transform: uppercase;*/
}
 
.galleryItem img {
 max-width: 100%;
 max-height: 100%;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}