/* -----------------------------------
Basic rules
----------------------------------- */
#header { 
 	clear: both;
	margin: auto;
	padding-top: 0.2em;
	max-width: 98%;  
        height: auto;
	display: block;
        border-top: 7px dotted red;
	border-right: 4px dotted red;
	border-left: 4px dotted red;
        border-bottom: 3px solid black;
        background-color:  #FFF;
	background-image: -moz-linear-gradient(270deg, #484848 50%, #FFF 100%); 
	background-image: -webkit-gradient(linear,
 left top,
 left bottom,
 color-stop(0, #7A7477),
 color-stop(0.50, #FFFFFF)
);

	background-image: -o-linear-gradient(bottom, #7A7477 0%, #FFFFFF 50%);

	background-image: -moz-linear-gradient(bottom, #7A7477 0%, #FFFFFF 50%);

	background-image: -webkit-linear-gradient(bottom, #7A7477 0%, #FFFFFF 50%);

	background-image: -ms-linear-gradient(bottom, #7A7477 0%, #FFFFFF 50%);

	background-image: linear-gradient(to bottom, #7A7477 0%, #FFFFFF 50%);
}

body
{
	clear: both;
	margin-top: 4px;
	background: #fff;
        color: #000; 
	font-size: 100%;
	font-family: 'Helvetica Neue', Helvetica, Arial, Geneva, 'Lucida Grande','Lucida Sans','Lucida Sans Unicode', Verdana, sans-serif;
	line-height: 1;
	overflow-y: scroll;
	oveflow-x: scroll;
}


/* responsive type */

@media (min-width:100px) and (max-width:299.9px)
{
	body, figcaption { font-size: 80%; }
	h1 { font-size: 110%; }
	h2 { font-size: 100%; }
	h3 { font-size: 90%; }
}

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

@media (min-width:700 px) and (max-width: 849.9px)
{
	body, figcaption { font-size: 90%; }
}

@media (min-width: 850px) and (max-width: 999.9px)

{
	body, figcaption { font-size: 100%; }
}

@media (min-width: 1000px) and (max-width: 1099.9px)
{
	body { font-size: 115%; }
}

@media (min-width: 1100px)
{
	body { font-size: 125%; }
}
/* END responsive type */


.pic {
 	clear: both;
	margin: auto;
	padding-top: 0.5em;
	max-width: 98%;  
        height: auto;
	display: block;
	text-align: center;
        vertical-align: middle;
}

img  { max-width: 19px; border: 2px #000 solid; }
.pic2 img { padding-top: 1em; border:none; max-width:100%; height:auto; }

figcaption { 
        text-align: center; 
        font-size: 80%;
	padding: 0.3em 0 0.5em 0;
        display: block; 
        color: #000; 
}

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

/* -----------------------------------
Navigation
----------------------------------- */

#nav ul 
{	list-style-type: none;
	margin: 0;
	padding: 0;
}

#nav li { display: inline; float: left; font-size: 90%; }

#nav a
{	float: left;
	display: block;
	 width: 2.9em;	
	padding: 0.1em 1em;
	color: #fff;
	background: #c10000;
	text-align: center;
	text-decoration: none;
	border-right: 3px solid #fff;
	border-top-right-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
}
	
#nav a:focus {	background-color: #c10000; }
#nav a: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);
}
#nav a:active { background-color: #red; }

#nav
{	overflow: hidden;
	zoom: 1;
	background-color: #c10000;
	border-top-right-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
}