body {
	margin: 0;
	padding: 1.6%;
	background: #000;
	background-image: -moz-linear-gradient(270deg, #7A7477 0%, #000 35%); 
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #7A7477),color-stop(0.35, #000000));
	background-image: -o-linear-gradient(bottom, #7A7477 0%, #000000 35%);
	background-image: -moz-linear-gradient(bottom, #7A7477 0%, #000000 35%);
	background-image: -webkit-linear-gradient(bottom, #7A7477 0%, #000000 35%);
	background-image: -ms-linear-gradient(bottom, #7A7477 0%, #000000 35%);
	background-image: linear-gradient(to bottom, #7A7477 0%, #000000 35%);
	color: #ffff99; 
	font-family: 'Helvetica Neue', Helvetica, Arial, Geneva, 'Lucida Grande','Lucida Sans','Lucida Sans Unicode', Verdana, sans-serif;
!--	font-size: 100%;
font-size: medium;
	line-height: auto;
}


h1 {	margin: 0 0 0.5em 0; line-height: 1; }
h2 {	margin-top: 0.5em; }
h3 {	margin: 0.5em 0 .5em 0; }
h4 {	margin: 0.8em .2em; font-size: 70% }
p  {	padding: .2em 0; }

/* responsive type */
@media (min-width:100px) and (max-width:299.9px)
{	h1   { font-size: 120%; }
	h2   { font-size: 95%; }
	h3   { font-size: 90%; }
	body { font-size: 85%; }
	figcaption  { font-size: 83%; }
}

@media (min-width:300px) and (max-width:699.9px)
{	h1   { font-size: 130%; }
	h2   { font-size: 120%; }
	h3   { font-size: 100%; }
	body { font-size: 100%; }
	figcaption { font-size: 87%; }
}

@media (min-width:700px) and (max-width: 999.9px)
{	h1   { font-size: 140%; }
	h2   { font-size: 120%; }
	h3   { font-size: 105%; }
	body { font-size: 120%; }
	figcaption { font-size: 91%; }
}

@media (min-width: 1000px)
{	h1   { font-size: 150%; }
	h2   { font-size: 115%; }
	h3   { font-size: 110%; }
	body { font-size: 125%; }
	figcaption { font-size: 95%; }
}
/* END responsive type */


#footer {
	clear:both;
	margin: 0; 
        padding-bottom: 0.5em;
	border-top: 4px solid red;
	border-left: 8px solid red; 
	width: 100%;
}

.artsec {
	clear: both;
	padding-top: 0.5em;
	margin: 0 auto;
        max-width: 75%;  
}

.artsec img  { max-width: 75%; padding: 1em 1em 0em 1em}

.browse li {
	clear: both;
	margin: 0 auto;
	padding: .5em .5em .5em .5em; 
	display: inline-block;
	vertical-align:text-top;
	list-style: none;
	max-width: 50%; 
	text-align: center;
	border: 2px solid silver;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
 	color: #FFF; 
}

.browse img  { clear: both; max-width: 80%; }

figcaption { 
	padding: 0.5em 0; 
        text-align: center; 
        display: block; 
        color: silver; 
}

a { color: #fff; }
a:hover, a:focus li { border-bottom: 8px dotted red; background-color: purple;}

.gall li { 
	clear: both;
	margin: 1em;
	padding: .9em .5em .3em .5em; 
	display: inline-block;
	vertical-align:text-top;
	list-style: none;
	max-width: 90%; 
	text-align: center;
	border: 2px solid silver;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
 	color: #FFF; 
}

.gall img { max-width: 90%; }

.koa li { 
	clear: both;
	margin: 0.5em;
	padding: 1% 0.3% 0 0.3%; 
	display: inline-block;
	vertical-align:text-top;
	list-style: none;
	max-width: 80%; 
	border: none; 
}
.koa img { max-width: 80%; }

/* for ie 8 */
@media \0screen { img { width: auto; } }

/* -------Navigation------------- */
#nav ul 
{	margin: 0;
	padding: 0;
	width: 100%;
	display: block;
	list-style: none;
	line-height: 1;
	border-top-right-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius:6px;
}

#nav li 
{	display: inline;
	border-top-right-radius:8px;
	-moz-border-radius: 8px;
	-webkit-border-radius:8px;
}

#nav a
{	padding: .5em;
	display: block;
	color: #fff;
	background: #c10000;
	border-bottom: 1px solid #fff;
	text-decoration: none;
	border-top-right-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
}

#nav-toggle
{	padding: .2em .5em .2em 2.5em;
	display: block;
	color: #fff;
	background-color: #960000;
	background-image: url(img/cmn/nav.png);
	background-repeat: no-repeat;
	background-position: 10px 50%;
	border-bottom: 2px solid #fff;
	text-decoration: none;
}

#nav a:focus,#nav-toggle:focus { background-color: #c10000; }
#nav a:hover,#nav-toggle:hover { background-color: #800080; 
				-webkit-transform: scale(1.15);
				-moz-transform: scale(1.15);
				-ms-transform: scale(1.15);
				-o-transform: scale(1.15);
				transform: scale(1.15);
        			padding: .5em .5em .5em 2.5em;
}

#nav a:active, #nav-toggle:active { background-color: red; }

/* ---------Predefined----------- */
.js #nav
{	clip: rect(0 0 0 0);
	max-height: 0;
	position: absolute;
	display: block;
	overflow: hidden;
	zoom: 1;
}

#nav.opened { max-height: 9999px; }

/* -------Nav wide screen----------- */
@media (min-width: 38em)
{	.js #nav { position: relative; }
	.js #nav.closed { max-height: none; }

	#nav-toggle { display: none; }	

	#nav
	{	overflow: hidden;
		zoom: 1;
		background-color: #c10000;
	}

	#nav a
	{	float: left;
		padding: 0.5em 1em;
		border-bottom: 3px solid #000;
                border-right: 3px solid #000;
	}
}