/*
screen2.css - new header styles, with masonry styles
*/
body {
	margin:0;
	padding:0;
	border:0;			/* This removes the border around the viewport in old versions of IE */
	width:100%;
	background:#fff;
	min-width:320px;		/* Minimum width of layout - remove line if not required */
					/* The min-width property does not work in old versions of Internet Explorer */
	font-size:16px;  /* 90% in original, altered to 100%, now using CSS pixels */
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.highlight {
    background-color:#a9ff80;
}
/* links - see masonry section for links for masonry items */
a {
	color:#369;
}
a:hover {
	color:#fff;
	background:#369;
	text-decoration:none;
}
h3.western { font-family: "Liberation Sans", sans-serif }
h3.cjk { font-family: "SimSun" }
h3.ctl { font-family: "Lucida Sans", sans-serif }
p {
	margin: .2em 0 .2em 0;
	padding: 1em;
}
p.western {
/*
	font-family: "Lucida Sans", sans-serif;
*/
	font-size: 11px
}
p.cjk {
	font-size: 11px
}
p.ctl {
	font-size: 11px
}
p.comment {
	font-size: 9px
}
p.smallComment {
	font-size: x-small
}
img {
	margin:0px 0px 0px;
}
/*
#ads img {
	display:block;
	padding-top:10px;
}
*/
.ads h2 {
	color: #ff0000;
}
.ads a {
	color: #ff6600;
}
ul {
	font-size: 12px
}
ul.link {
	font-size: 11px	
}
/* 
	Header styles
*/
<div.relativeHeader {
	position: relative;
	width: 400px;
	height: 100px;
}
div.absoluteImgRight {
	position: absolute;
	right: 0;
	top: 0;
	z-index: +1;
	vertical-align: text-top;
}
div.absoluteImgLeft {
	position: absolute;
	left: 0;
	top: 0;
	z-index: +1;
	vertical-align: text-top;
}
/*
img class="absoluteImgRight" {
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
	vertical-align: text-top;
}
img class="absoluteImgLeft" {
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
	vertical-align: text-top;
}
#header {
	clear:both;
	float:left;
	width:100%;
	background:#e0e0ff
}
*/
#header {
	border-bottom:1px solid #000;
	background:#e0e0ff
}
#header h1,
#header h2 {
	padding:0 0 0 0;
	margin:0 0 0 0;
	position:relative;
	left:95px;
}
#header p {
	padding:0 0 0 0;
	margin:0 0 0 0;
	position:relative;
	left:0px;
}
*/
#header ul {
	clear:left;
	float:left;
	width:100%;
	list-style:none;
	margin: 10px 0 0 0;
	padding:0;
}
#header ul li {
	list-style:none;
	display:block;
}
#header ul li {
	float:left;
	margin:0 4px 0 4px;
	padding:3px 7px;
	text-align:center;
	background:#eee;
	color:#000;
	text-decoration:none;
	position:relative;
	left:0px;
	line-height:1.3em;
}
#header ul li a {
	font-size=14px;
}
#header ul li a:hover {
	background:#369;
	color:#fff;
}
#header ul li a.active,
#header ul li a.active:hover {
	color:#fff;
	background:#000;
	font-weight:bold;
}
#header ul li span {
	display:block;
}
/* 'widths' sub menu */
#layoutdims {
	position:relative;
	left:0;
	clear:both;
	background:#eee;
	border-top:4px solid #000;
	margin:0;
	padding:6px 15px !important;
	text-align:right;
}
/* 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 */
	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;
}
/*
	specific 3 Column settings
*/
.threecol {
	background:#ccffff;		/* right column background colour */
}
.threecol .colmid {
	right:20%;			/* width of the right column - 25% in original */
	background:#fff;		/* center column background colour */
}
.threecol .colleft {
	right:60%;			/* width of the middle column - 50% in original */
	background:#ddffdd;	/* left column background colour */
}
.threecol .col1 {
	width:56%;			/* width of center column content (column width minus padding (zero?) on either side) - was 46% */
	left:102%;			/* 100% plus left padding of center column */
	overflow: scroll;
}
.threecol .col1 h2 {
	width:96%;			/* was (46% = supposedly width of center column content minus 10%) */
	font-size:100%;
}
.threecol .col1 h2 + p {
	width:96%;			/* was (46% = supposedly width of center column content minus 10%) */
	font-size:100%;
}
.threecol .col1 p + p {
	width:96%;			/* was (46% = supposedly width of center column content minus 10%) */
	font-size:100%;
}
.threecol .col2 {
	width:16%;			/* Width of left column content (column width minus padding on either side - was 21%) */
	left:26%;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) - was 31%*/
	.img {				/* to position images top right of div */
    position: absolute;	/* position: relative; -- to float image */
    top: 0px;
    right: 0px;
    }
}
.threecol .col3 {
	width:16%;			/* Width of right column content (column width minus padding on either side) - was 21% */
	left:90%;			/* 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) - was 85%*/
}
.stampPic {
   position: relative;
   top: 0px;
   right: 0px;
}
/*
.col1 {
	font-size:70%;
}
*/
.pic1 {
	border:1px solid #000000;
	background-color:#000000;
}
.autoResizeImage {
    max-width: 100%;
    height: auto;
    width: auto;
}
/*
	Table styles
*/
table {
	maximum-width: 100%;
}
table.table1, table.table1 th, table.table1 td {
    border-collapse: collapse;
    border: 1px solid black;
    padding: 4px, 4px;
}
table.table2, table.table2 th, table.table2 td {
/*
    border: none;
*/
    border-collapse: collapse;
    border-spacing: 0px 0px;
    padding: 0px, 0px;
    border: 1px solid black;
}
th, td {
	font-size:70%;
	line-height: 100%;
}
th {
	background-color: #ddff99;
}
tr.even {
	background-color: #eeffee;
}
tr.odd {
	background-color: #eeeeff;
}
table.table2 td span.CatID {
	color: #ff4444;
}

.lg {
	font-size:90%;
}
/* 
	Footer styles
*/
#footer {
	clear:both;
	float:left;
	width:100%;
	border-top:1px solid #000;
}
#footer p {
	padding:10px;
	margin:0;
}
/* Masonry stuff below here */
.masonry { /* Masonry container */
    column-count: 4;
    column-gap: 0.5em;
    padding: 0 0.5em 0 1em;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1.5em;
    column-gap: 1em;
    font-size: .60em;
}
.item { /* Masonry bricks or child elements */
    background-color: #eee;
    background: #fff;
    display: inline-block;
    margin: 0 0 0 0;
    width: 100%;
    padding: 0.5em;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-shadow: 2px 2px 4px 0 #ccc;
}
p.item {
	font-size: 0.5em;
}
a .item {
	text-decoration:none;
	color:#000;
}
a:hover .item {
	color:#999;
	background:#369;
	text-decoration:none;
}
/*
body {
    font: 1em/1.67 'Open Sans', Arial, Sans-serif;
    margin: 0;
    background: #e9e9e9;
}
.wrapper {
    width: 95%;
    margin: 3em auto;
*/
}
@media only screen and (min-width: 400px) {
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}
@media only screen and (min-width: 700px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}
@media only screen and (min-width: 900px) {
    .masonry {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}
@media only screen and (min-width: 1100px) {
    .masonry {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 5;
    }
}
@media only screen and (min-width: 1280px) {
    .wrapper {
        width: 1260px;
    }
}