body {
	margin:0 20px;
	background-color: #fafafa;
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	color: #747474;
	font-size:100%;
	letter-spacing: 0.1em;
	position:relative;
}
a {
	cursor:pointer;
}
/* trade menu */
#trade > ul {
	margin: 0px;
	padding: 0px;
	position:absolute;
	top:-50px;
}
#trade li {
	float: left;
	margin-right: 3px;
	list-style-type: none;
}
#trade a {
	font-size:0.875em;
	color: #747474;
	text-decoration: none;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-right:5px;
}
#trade a:hover {
	color: #747474;
	text-decoration: none;
	background-color: #eeeeee;
}
#trade #last {
	margin-right: 0;
}
#trade img {
	vertical-align: 3px;
	margin-right: 3px;
}
#current-projects {
	position:absolute;
	z-index:2;
	left:0;
}
#current-projects img {
	vertical-align: -4px;
	margin-right: 3px;
}
header {
	width:240px;
	margin:60px auto 48px auto;
	text-align:center;
	position:relative;
	/*border:#000000 1px solid;*/
}
header h2 {
	font-size:1em;
	font-weight:normal;
}
header h1 {
	font-size:1.125em;
	font-weight:normal;
	margin-top:35px;
	margin-bottom:-5px;
}
header a {
	font-size: 0.873em;
	color: #747474;
	text-decoration: none;
	padding-top: 5px;
	padding-bottom: 5px;
	cursor:pointer;
}
header a:hover {
	color: #747474;
	text-decoration: none;
	background-color: #eeeeee;
}
#wrapper-thumbs {
	width:241px;
	border-top:#dbdbdb 1px solid;
	border-left:#dbdbdb 1px solid;
	margin:0 auto 0 auto;
	position:relative;
}
#wrapper-thumbs:after {
	content:"";
	clear:both;
	display:block;
}
.thumb-container {
	float:left;
	padding:20px;
	border-right:#dbdbdb 1px solid;
	border-bottom:#dbdbdb 1px solid;
}

/**** MAIN MENU ****/
#main-menu {
	display: none;
	position:absolute;
	z-index:1;
    width: 242px;
    font-family: sans-serif;
    border-top: 1px solid #C4C4C4;
	background-color:#fafafa;
}
#main-menu ul {
	list-style-type:none;
	padding:0;
	margin:0;
}
#main-menu ul li a {
	border-bottom:#dbdbdb 1px solid;
	border-right:#dbdbdb 1px solid;
	border-left:#dbdbdb 1px solid;
	display:block;
	padding:10px 0;
	text-align:center;
	font-size:0.875em;
}
#main-menu ul li:hover {
	background-color: #dbdbdb; /* maintains dark colour on desktop */
}
#main-menu ul li a:hover {
	background-color: #dbdbdb;
}
#main-menu ul li ul {
    /* css3.bradshawenterprises.com/animating_height/ */
	max-height: 0;
	overflow: hidden;
	-webkit-transition: max-height 0.8s ease-in-out;
	-moz-transition: max-height 0.8s ease-in-out;
	transition: max-height 0.8s ease-in-out;
}
#main-menu ul li:hover ul {
    /*display: block;*/
	max-height: 400px; /* space for nested items to expand */
}
#main-menu ul li ul a {
    background-color: #eeeeee;
	background-image: url(../../images/pointer_right.png);
	background-repeat: no-repeat;
	background-position: right center;
}
#main-menu ul li ul a:hover {
    background-color: #eeeeee;
}
#flip {
    cursor:pointer;
	margin-left:212px; /* moves toggle to right: 240(col width) -28(toggle width) */
}
#menu-container {
	position:absolute;
	left:-1px; /* aligns left to thumb area */
}

/***** GALLERY INFO *****/
#info {	
	display:none;
	background-color: #fafafa;
	position:absolute;
	z-index:4;
	top:-60px;
	right:0;
	left:0;
	bottom:0; /* covers thumnails on small devices */
}
#info-content {
	max-width:480px;
	padding:60px 20px;
	margin:auto;
	position:relative;
	font-size:1em;
	line-height:1.625em;
	text-align:justify;
	background-color: #fafafa;
}
#info-content h1 {
	font-size:1.125em;
	font-weight:normal;
	text-align:center;
	margin-top:10px;
}
#info-logo {
	display:block;
	margin:60px auto 0 auto;
}
#close-1 {
	position:absolute;
	top:20px;
	right:0;
}
#close-2 {
	position:absolute;
	bottom:20px;
	right:0;
}
/* 2 columns */
@media screen and (min-width:522px){
#wrapper-thumbs {
	width:482px;
}
header {
	width:480px;
}
#main-menu {
    width: 483px;
}
#flip {
    cursor:pointer;
	margin-left:452px; /* moves toggle to right: 480(col width) -28(toggle width) */
}
/* 3 columns */
}
@media screen and (min-width:763px){
#wrapper-thumbs {
	width:723px;
}
header {
	width:721px;
}
#main-menu {
    width: 724px;
	z-index:4;
}
#flip {
    cursor:pointer;
	margin-left:693px; /* moves toggle to right: 721(col width) -28(toggle width) */
}
#main-menu ul li ul a {
	background-position: 80% center;
}
#info-content {
	padding:60px;
/* 4 columns */
}
@media screen and (min-width:1004px){
#wrapper-thumbs {
	width:964px;
}
header {
	width:962px;
}
#main-menu {
    width: 965px;
}
#flip {
    cursor:pointer;
	margin-left:934px; /* moves toggle to right: 962(col width) -28(toggle width) */
}
/* 5 columns */
}
@media screen and (min-width:1245px){
#wrapper-thumbs {
	width:1205px;
}
header {
	width:1203px;
}
#main-menu {
    width: 1207px;
}
#flip {
    cursor:pointer;
	margin-left:1175px; /* moves toggle to right: 1203(col width) -28(toggle width) */
}
#main-menu ul li ul a {
	background-position: 70% center;
}
/* 6 columns */
}
@media screen and (min-width:1486px){
#wrapper-thumbs {
	width:1446px;
}
header {
	width:1444px;
}
#main-menu {
    width: 1448px;
}
#flip {
    cursor:pointer;
	margin-left:1416px; /* moves toggle to right: 1444(col width) -28(toggle width) */
}
}
/* 7 columns */
}
@media screen and (min-width:1727px){
#wrapper-thumbs {
	width:1687px;
}
header {
	width:1685px;
}
#main-menu {
    width: 1689px;
}
#flip {
    cursor:pointer;
	margin-left:1657px; /* moves toggle to right: 1685(col width) -28(toggle width) */
}
}
/* 8 columns */
}
@media screen and (min-width:1968px){
#wrapper-thumbs {
	width:1928px;
}
header {
	width:1926px;
}
#main-menu {
    width: 1930px;
}
#flip {
    cursor:pointer;
	margin-left:1898px; /* moves toggle to right: 1926(col width) -28(toggle width) */
}
}