a:link {
	color:           #336699;
	text-decoration: none;
	background:      transparent
}
a:visited {
	color:           #336699;
	text-decoration: none;
	background:      transparent
}
a:hover {
	text-decoration: underline;
	background:      transparent
}

body, div, table, td, input, select, textarea {
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, SunSans-Regular, sans-serif;
}

body, div, table, td {
	font-size: 15px;
	line-height: 1.4;
}

input, select, textarea {
	font-size: 14px;
}

/* html, body {																	next line MI edit */
body {
	background: #336699 url('images/bg.gif') repeat-y top center;
  	height: 100%;
	margin-top: 0;
	padding-top: 0;
	margin-bottom: 0;
	padding-bottom: 1px;
}

h1 {
	font-size: 20px;
	color: #336699;
  line-height: 0.8;
}
h2 {
	font-size: 16px;
	color: #000000;
}
em {
	font-style: italic;
}
#container {
	margin: auto;
	width: 751px;
	max-width: 100%;							
	margin-top: 0;
	padding-top: 0;
}
#logo {
  background: url(images/GONL_logo.gif) #fff no-repeat center center; 
  background-size: 100%;
  max-width: 670px;
  height: 142px;
  position: relative;
}
 
#logo a {
  position: absolute;
  top: 0;
  left: 0;
  width: 670px;
  height: 142px;
}
 
#logo a span {
    display: none;
}

.line {
	clear: both;
  	max-width: 670px;
	background: url('images/GONL_line.gif') #fff no-repeat center center;
  	background-size: 100%;
	height: 4px;
}
#wrapper {
	/*padding: 25px 35px 10px 35px;*/
	padding: 15px 35px 5px 35px;
	clear: both;
}
form {
	display: inline;
}
img {
	border: 0;
	display: inline;
}
input.submit {
	border: 3px double #999999;
	border-top-color: #CCCCCC;
	border-left-color: #CCCCCC;
	background-color: #FFFFFF;
	background-image: url('images/button-bg.gif');
	background-repeat: repeat-x;
	color: #333333;
	font-size: 75%;
	font-weight: bold;
	font-family: Verdana, Helvetica, Arial, sans-serif;
}
.photos-large {
	border-style: solid;
	border-color: #778899;
	border-width: 1px;
	padding: 10px;
	margin: 0px;
}
.gallery-name {
	padding: 5px 13px 0px 4px;
	margin: 0;
}

.hist-wrapper {
	padding: 5px 13px 0px 4px;
	margin: 0;
}

#hist-row1 {
	padding: 5px 0px 20px 0px;
	margin: 0;
}

#hist-row2 {
	padding: 5px 0px 0px 0px;
	margin: 0;
}

#hist-row3 {
	padding: 5px 0px 0px 0px;
	margin: 0;
}

.upload-wrapper {
	padding: 5px 13px 0px 4px;
	margin: 0;
}

#upload-row1 {
	padding: 1px 0px 5px 5px;
	margin: 0;
}

#upload-error {
	color: #8b0000; 
	padding: 10px 0px 0px 5px;
	margin: 0;
}

#pic-wrap1 {
	padding: 0px 0px 0px 15px;
	margin: 0;
}

#pic-wrap2 {
	padding: 0px 0px 0px 15px;
	margin: 0;
}
#pic-wrap3 {
	padding: 0px 0px 0px 15px;
	margin: 0;
}
.quotation {
	font-style: italic;
	padding: 0px 40px 5px 40px;
	margin: 0;
	font-size: 10pt;
}

.no-hits {
	padding: 20px 0px 123px 5px;
	margin: 0;
}

#picture-holder {
	text-align: center;
}
.thumbnail img {
	padding: 5px;
	text-align: center;
	background: #FFF;
	margin: 7px;
	border-width: 1px;
	border-color: #778899;
}
.thumbnail_deceased img {
	padding: 5px;
	text-align: center;
	background: #000;
	margin: 7px;
	border-width: 1px;
	border-color: #000;
}
.thumbnail a:hover img {
	border-color: #38c;
	margin: 6px;
	border-width: 2px;
}
.thumbnail_deceased a:hover img {
	border-color: #38c;
	margin: 6px;
	border-width: 2px;
}
.photos {
	padding: 5px;
	margin: 3px;
	border-style: solid;
	border-width: 1px;
	border-color: #000000;
}
.addborders {
	margin: 0;
	padding: 2px;
	border-top: 		1px solid #CDCDCD;
}
.addborders2 {
	margin: 42px 0px 0px 0px;
	padding: 2px;
	border-top: 		1px solid #CDCDCD;
}
table {
	border: 0px;
	padding: 0px;
}
.picnum-format {
	font-size: 80%;
	padding: 0;
	margin: 0;
	color: #8b0000;
	text-align: center;
}
.note-format {
	font-size: 80%;
	padding: 0;
	margin: 0;
	color: #8b0000;
}
.desc-format {
	text-align: center;
	font-size: 80%;
}
ul.slides {
	margin: 10px 0px 0px 0px;
	padding: 0;
	list-style:none;
	line-height:1.4em;
}
.slides li {
	display:block;
	float:left;
/*	margin:0 10px 10px 0;											next line MI edit */
	margin: 0 7px 10px 0;	
	padding:0;
	width: auto;
	height: auto;
}
.footer-row {
	padding: 13px 5px 5px 5px;
	clear: both;
}
.footer-left {
	font-size: 80%;
	text-align: left;
	float:left;
}
.footer-right {
	font-size: 80%;
	text-align: right;
	float:right;
}
.basic_row {
	clear: both;
	width: 670px;
	padding: 15px 0px 0px 0px;
}
	/* column container */
	.colmask {
		position:relative;	/* This fixes the IE7 overflow hidden bug */
		clear:both;
		float:left;
		width:100%;			/* width of whole page */
		overflow:hidden;		/* This chops off any overhanging divs */
	}
	/* common column settings */
	.colright,
	.colmid,
	.colleft {
		float:left;
/*		width:100%;			/* width of page */
		width:85%;			/* width of page */
		position:relative;
	}
	.col1,
	.col2,
	.col3 {
		float:left;
		position:relative;
		padding:0 0 1em 0;	/* no left and right padding on columns, we just make them narrower instead 
						only padding top and bottom is included here, make it whatever value you need */
		overflow:hidden;
	}
	/* 3 Column settings */
	.threecol .colmid {
		right:15%;			/* width of the right column */
	}
	.threecol .colleft {
		right:60%;			/* width of the middle column */
	}
	.threecol .col1 {
		padding: 15px 0 0 0;
		width:56%;			/* width of center column content (column width minus padding on either side) */
		left:102%;			/* 100% plus left padding of center column */
	  text-align: center;
	}
	.threecol .col2 {
		padding: 15px 0 0 0;
		width:21%;			/* Width of left column content (column width minus padding on either side) */
		left:21%;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
	  text-align: left;
	}
	.threecol .col3 {
		width:11%;			/* Width of right column content (column width minus padding on either side) */
		left:85%;			/* Please make note of the brackets here:
						(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
		text-align: right;
	}

	.threecol2 .colmid {
		right:8%;			/* width of the right column */
	}
	.threecol2 .colleft {
		right:84%;			/* width of the middle column */
	}
	.threecol2 .col1 {
		padding: 17px 0 0 0;
		width:84%;			/* width of center column content (column width minus padding on either side) */
		left:100%;			/* 100% plus left padding of center column */
	  text-align: center;
	}
	.threecol2 .col2 {
		padding: 17px 0 0 0;
		width:8%;			/* Width of left column content (column width minus padding on either side) */
		left:8%;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
	  text-align: left;
	}
	.threecol2 .col3 {
		padding: 17px 0 0 0;
		width:8%;			/* Width of right column content (column width minus padding on either side) */
		left:92%;			/* Please make note of the brackets here:
						(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
		text-align: right;
	}

a.random-rollover {
	display: block;
	width: 64px;
	height: 64px;
	text-decoration: none;
	background: url("images/random_comp.gif");
	}

a.random-rollover:hover {
	background-position: -64px 0;
	}

a.next-rollover {
	display: block;
	width: 48px;
	height: 48px;
	text-decoration: none;
	background: url("images/next.gif");
	}

a.next-rollover:hover {
	background-position: -48px 0;
	}

a.previous-rollover {
	display: block;
	width: 48px;
	height: 48px;
	text-decoration: none;
	background: url("images/previous.gif");
	}

a.previous-rollover:hover {
	background-position: -48px 0;
	}

.displace {
	position: absolute;
	left: -5000px;
	}
.desc-wrapper {
	padding: 0px 40px 0px 40px;
	font-size: 90%;
}

.sub-wrapper {
	padding: 25px 0px 5px 0px;
}

.succ-wrapper {
	padding: 0px 10px 0px 40px;
}

.gath-wrapper {
	padding: 10px 0px 0px 0px;
}

.date-wrapper {
	padding: 5px 0px 5px 0px;
}
.misc-format {
	font-size: 90%;
	padding: 0px 0px 5px 0px;
	margin: 0;
	color: #336699;
}




/* MI additions (cumulative)
====================================================================================*/
/* home page/template */
nav#main 					{ position: relative; width: 100%; min-height: 60px; }
#upload-button 				{ position: absolute; left: 0; top: 0; }
#search-box 				{ position: absolute; left: 185px; top: 0; }
#random-button 				{ position: absolute; right: 0; top: -10px; }
.line 						{ clear: both;  }

/* picture page */
#large-picture 				{ position: relative; float: none; width: 100%; height: auto; margin: 0; overflow: auto; }
#picture-holder				{ float: none; left: 60px; width: 560px; }	
#large-picture #previous	{ position: absolute; left: 5px; top: 60px; }
#large-picture #next		{ position: absolute; right: 5px; top: 60px; }

/* uploads page 															[ MI add 23/01 ] */
#gather-new					{ background: #eee; }
#gather-new td				{ padding: 8px; text-align: left; }

/* history page 															[ MI add 23/01 ] */
#pic-wrap1, #pic-wrap2, #pic-wrap3		{ display: inline-block; float: right; margin: 0 0 1ex 1em; }		


@media( max-width: 760px ) {
	/* main page */
	body					{ margin: 0; background: none; }
	#wrapper				{ padding: 5px; }
	#header, nav#main, #lissunContent, #gatheringContent, .basic_row 
							{ width: 100%; }
	#header 				{ padding: 2px 0; }
	#upload-button, #search-box, #random-button 
							{ position: relative; }
	#search-box, #random-button  
							{ left: auto; top: auto; margin-left: 5px; }
	#search-box input[name=s] 
							{ width: 150px; }
	a.random-rollover		{ width: 40px; height: 40px; background-size: 80px 40px; }
	a.random-rollover:hover { background-position: -40px 0; }
	
	/* picture page */
	#picture-holder			{ width: calc( 100% - 120px ); }
/*	#picture-holder img 	{ max-width: 100% ; }							[ MI edit 23/01 ] */
	#picture-holder img 	{ max-width: calc( 100% - 24px ); }
	.desc-wrapper 			{ padding: 0; }
	.desc-wrapper p, .desc-wrapper div
							{ text-align: left; }
							
	/* history page */
	#historical				{ max-width: 100%; }

	/* uploads page 														[ MI add 23/01 ] */
	#gather-new td			{ max-width: 100%; }
	#gather-new textarea	{ max-width: 100vw; }
}