* {
	color:#000000;
	font-family: "pixel", Terminal, Courier New,Courier;
	cursor: url('ui/cursor.png'), auto;	
	}


::-webkit-scrollbar {width: 16px;}
::-webkit-scrollbar:horizontal {height: 17px;}
::-webkit-scrollbar-corner {background: #dfdfdf;}
::-webkit-scrollbar-track {background-image: url(ui/scrollbar-background.svg);}
::-webkit-scrollbar-thumb {background-color: #c0c0c0;box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;}
::-webkit-scrollbar-button:horizontal:start:decrement,::-webkit-scrollbar-button:horizontal:end:increment,::-webkit-scrollbar-button:vertical:start:decrement,::-webkit-scrollbar-button:vertical:end:increment {display: block}
::-webkit-scrollbar-button:vertical:start {height: 17px;	background-image: url(ui/button-up.svg);}
::-webkit-scrollbar-button:vertical:end {height: 17px;background-image: url(ui/button-down.svg);}

html {
  height: 100%;
}

body{
    min-height:100%;
    width:100%;
    background-image: url(ui/bg.png);
    background-repeat: repeat;
    margin: 0;}

@font-face { font-family: "pixel";
    src: url('pixel.eot'),
         url('pixel.eot?#iefix') format('embedded-opentype');}
 
@font-face { font-family: "pixel";
    src: url('pixel.woff'),
         url('pixel.ttf') format("truetype");}
 
a{cursor: url('ui/pointer.png'), auto;}
a:link { color: #0000EE; }
a:visited { color: #551A8B; }

p {white-space: pre-wrap;}

h1, h2, h3, h4, h5, h6, h7
{
font-weight: normal;
}

#wrapper {
  text-align: center;}

.container
	{
  background-color: red;
  display:inline-block;
		z-index:1;
	padding:0;
	width: 98%;
	max-width:1000px;
	margin-top:1rem;
    border-style: solid;
border-width: 4px;
-moz-border-image: url(ui/border.png) 4 stretch;
-webkit-border-image: url(ui/border.png) 4 stretch;
-o-border-image: url(ui/border.png) 4 stretch;
border-image: url(ui/border.png) 4 fill stretch;
	background-color: #FFFFFF;
  text-align: left;
}

.titlebar
	{padding:0;
	height: 14px;
	border-style: solid;
border-width: 4px 4px;
-moz-border-image: url(ui/topborder.png) 4 4 repeat;
-webkit-border-image: url(ui/topborder.png) 4 4 repeat;
-o-border-image: url(ui/topborder.png) 4 4 repeat;
border-image: url(ui/topborder.png) 4 4 fill repeat;
    background-image: url(ui/topbordercolor.png);
    background-repeat: repeat;
	background-color: #FFFFFF;
	text-align:center;
}

.sitetitle {
	margin-top:-2px;
	display: inline-block;
    margin-left: auto;
    margin-right: auto;
	width:154px;
	height:18px;
    background-image: url(ui/title.png);
    background-repeat: no-repeat;
	background-color: #FFFFFF;
}

.menusquare {
	margin-top:-2px;
	display: inline-block;
	float:right;
	width:20px;
	height:18px;
    background-image: url(ui/menu.png);
    background-repeat: no-repeat;
	background-color: #FFFFFF;
	cursor: url('ui/pointer.png'), auto;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.locationbar {
	padding:2px 2px 2px 2px;
	border-top:2px solid #000000;
	border-right:0px hidden;
	border-bottom:2px solid #000000;
	border-left:0px hidden;
}

.locationbar input[type=text]{
margin:0;
	width: 100%;
	padding-left:2px;
	padding-right:4px;
	font-size:1em;
	border:0;
	cursor: url('ui/textpointer.png'), auto;
}

textarea:focus, input:focus{
    outline: none;
}

.locationbar span {
	display: block;
    border: 2px solid black;
	overflow: hidden;
	padding-right: 6px;
	padding-left: 2px;
	padding-top:2px;
}

.locationbar label {
	float:left; 
	margin-right:5px;
	display:block;
	margin:2px 0px 0px 0px;	
    background-image: url(ui/location.png);
    background-repeat: no-repeat;
	width:88px;
	height:22px;}

.links {
	height:18px;
	padding:6px 2px 2px 4px;
	border-top:0px hidden;
	border-right:0px hidden;
	border-bottom:2px solid #000000;
	border-left:0px hidden;
}

.links .home {
	margin-top:-2px;
	margin-right:10px;
	display: block;
	float:left;
	width:52px;
	height:18px;
    background-image: url(ui/home.png);
    background-repeat: no-repeat;
	background-color: #FFFFFF;
	cursor: url('ui/pointer.png'), auto;
}

.links .about {
	margin-top:-2px;
	margin-right:10px;
	display: block;
	float:left;
	width:62px;
	height:18px;
    background-image: url(ui/about.png);
    background-repeat: no-repeat;
	background-color: #FFFFFF;
	cursor: url('ui/pointer.png'), auto;
}

.links .gallery {
	margin-top:-2px;
	margin-right:10px;
	display: block;
	float:left;
	width:80px;
	height:18px;
    background-image: url(ui/gallery.png);
    background-repeat: no-repeat;
	background-color: #FFFFFF;
	cursor: url('ui/pointer.png'), auto;
}

.links .contact {
	margin-top:-2px;
	margin-right:10px;
	display: block;
	float:left;
	width:82px;
	height:18px;
    background-image: url(ui/contact.png);
    background-repeat: no-repeat;
	background-color: #FFFFFF;
	cursor: url('ui/pointer.png'), auto;
}


.footer {
	height:16px;
	padding:2px 2px 4px 4px;
	border-top:2px solid #000000;
	border-right:0px hidden;
	border-bottom:0px hidden;
	border-left:0px hidden;
}

.footer .connect {
	margin-top:2px;
	padding-bottom:2px;
	margin-left:2px;
	display: inline-block;
	float:left;
	width:98px;
	height:14px;
    background-image: url(ui/connected.png);
    background-repeat: no-repeat;}

.footer .copyright {
	margin-top:2px;
	padding-bottom:2px;
	margin-right:4px;
	display: inline-block;
	float:right;
	width:168px;
	height:14px;
    background-image: url(ui/copyright.png);
    background-repeat: no-repeat;;
}

.innercontainer {border:2px solid #000000; margin:2px; padding:6px;
	overflow:auto;
	max-height: calc(100vh - 200px);
	min-height:200px;
	width: calc(100% - 20px);}

.imgzone {
    border: 2px solid #000000;
    padding: 4px; 
    width: 96%;
}

/*NORMAL IMAGE CONTAINER*/

.imgcontain {
  position: relative;
	display:inline-block;
	float:left;
	height:75px;
	margin:2px;
    -ms-transition:all 0.5s;
    -o-transition:all 0.5s;
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    transition:all 0.5s;	
}
.imgcontain:focus {
	height:70vh;
	max-width:60vh;
    z-index:95;
    outline: none !important;
    border:0px solid;
  position: absolute;
  top: 50%;
  left: 50%;
  backface-visibility: hidden;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  pointer-events: none;
	font-size:1em;
	color::#ffffff;
}


.imgcontain img {
	height: 75px;
	max-width:100;
    -ms-transition:all 0.5s;
    -o-transition:all 0.5s;
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    transition:all 0.5s;
  pointer-events: none;
}

.imgcontain:focus img {
	height:auto;
	max-height: 70vh;
    z-index:99;
  backface-visibility: hidden;
  position: relative;
top: 50%;
transform: translateY(-60%);
  pointer-events: none;
    -ms-transition:all 0.5s;
    -o-transition:all 0.5s;
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    transition:all 0.5s;
  pointer-events:auto;
}

.imgcontain ~ .textarea-modal{
  position: fixed;
  background-color: transparent;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 40;
  pointer-events: none;
  transition: background-color .25s ease;
}
.imgcontain:focus ~ .textarea-modal{
  pointer-events: auto;
  background-color: rgba(0,0,0,0.85);
}

/* CODE FOR 50x50 SPRITES */

.imgcontain50 {
  position: relative;
	display:inline-block;
	float:left;
	height:50px;
	margin:2px;
    -ms-transition:all 0.5s;
    -o-transition:all 0.5s;
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    transition:all 0.5s;	
}
.imgcontain50:focus {
	height:70vh;
	max-width:60vh;
    z-index:95;
    outline: none !important;
    border:0px solid;
  position: absolute;
  top: 50%;
  left: 50%;
  backface-visibility: hidden;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  pointer-events: none;
	font-size:1em;
	color::#ffffff;
}


.imgcontain50 img {
	height: 50px;
	max-width:100;
    -ms-transition:all 0.5s;
    -o-transition:all 0.5s;
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    transition:all 0.5s;
  pointer-events: none;
}

.imgcontain50:focus img {
	height:auto;
	max-height: 70vh;
    z-index:99;
  backface-visibility: hidden;
  position: relative;
top: 50%;
transform: translateY(-60%);
  pointer-events: none;
    -ms-transition:all 0.5s;
    -o-transition:all 0.5s;
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    transition:all 0.5s;
  pointer-events:auto;
}

.imgcontain50 ~ .textarea-modal{
  position: fixed;
  background-color: transparent;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 40;
  pointer-events: none;
  transition: background-color .25s ease;
}
.imgcontain50:focus ~ .textarea-modal{
  pointer-events: auto;
  background-color: rgba(0,0,0,0.85);
}

/* CODE FOR 16x16 SPRITES */

.imgcontain16 {
  position: relative;
	display:inline-block;
	float:left;
	height:16px;
	margin:2px;
    -ms-transition:all 0.5s;
    -o-transition:all 0.5s;
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    transition:all 0.5s;	
}
.imgcontain16:focus {
	height:70vh;
	max-width:60vh;
    z-index:95;
    outline: none !important;
    border:0px solid;
  position: absolute;
  top: 50%;
  left: 50%;
  backface-visibility: hidden;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  pointer-events: none;
	font-size:1em;
	color::#ffffff;
}


.imgcontain16 img {
	max-height: 20px;
	max-width:100;
    -ms-transition:all 0.5s;
    -o-transition:all 0.5s;
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    transition:all 0.5s;
  pointer-events: none;
  backface-visibility: hidden;
}

.imgcontain16:focus img {
	height:auto;
	max-height: 70vh;
    z-index:99;
  backface-visibility: hidden;
  position: relative;
top: 50%;
transform: translateY(-60%);
  pointer-events: none;
    -ms-transition:all 0.5s;
    -o-transition:all 0.5s;
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    transition:all 0.5s;
  pointer-events:auto;
}

.imgcontain16 ~ .textarea-modal{
  position: fixed;
  background-color: transparent;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 40;
  pointer-events: none;
  transition: background-color .25s ease;
}
.imgcontain16:focus ~ .textarea-modal{
  pointer-events: auto;
  background-color: rgba(0,0,0,0.85);


	
/*
.thumbnail {
  position: relative;
  width: 100px;
  height: 100px;
  overflow: hidden;
    text-align: center;
vertical-align: middle;
  margin:2px;
  float:left;
    -ms-transition:all 0.25s;
    -o-transition:all 0.25s;
    -webkit-transition:all 0.25s;
    -moz-transition:all 0.25s;
    transition:all 0.25s;
}
.thumbnail:hover {
  height: 150px;
  width:150px;
    z-index:800;
    box-shadow:0 0 50px #000;
}
.thumbnail:active {
  height: 100%;
  width:100%;
    z-index:900;
    box-shadow:0 0 10px #000;
}
}
.thumbnail img {
  position: relative;
  max-height: 100%;
  width:auto;
  left: 50%;
  top: 50%;
}
.thumbnail hover {
  position: relative;
  max-height: 100px;
  width:auto;
  left: 50%;
  top: 50%;
}*/
/*
#gallery{
    position:relative;
    width:100%;
	min-height:90vh;
}
#gallery img{
    position:absolute;
    -ms-transition:all 0.5s;
    -o-transition:all 0.5s;
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    transition:all 0.5s;
    width: 100px;
	opacity: 0;
}


#gallery img:hover{
    -moz-transform:scale(1.5);
    -webkit-transorm:scale(1.5);
    transform:scale(1.5);

    
    z-index:900;
    box-shadow:0 0 10px #000;
}
*/

::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background-color:#FFFFFF; border-left:2px solid #000000}
::-webkit-scrollbar-thumb        { background-color:#000000;} 


.innercontainer .center {
  display: inline-block;
  text-align: center;
}

@media only screen and (max-device-width: 1050px) {
.container
		{
		max-width:96%;
		min-width:96%;
        font-size: 2em;
		margin: 1%;
border-width: 8px;
-moz-border-image: url(ui/mobile/border.png) 8 stretch;
-webkit-border-image: url(ui/mobile/border.png) 8 stretch;
-o-border-image: url(ui/mobile/border.png) 8 stretch;
border-image: url(ui/mobile/border.png) 8 fill stretch;
}
	
	
.titlebar
	{height: 28px;
border-width: 8px 8px;
-moz-border-image: url(ui/mobile/topborder.png) 8 8 repeat;
-webkit-border-image: url(ui/mobile/topborder.png) 8 8 repeat;
-o-border-image: url(ui/mobile/topborder.png) 8 8 repeat;
border-image: url(ui/mobile/topborder.png) 8 8 fill repeat;
    background-image: url(ui/mobile/topbordercolor.png);
}

.sitetitle {
	margin-top:-4px;
	width:308px;
	height:36px;
    background-image: url(ui/mobile/title.png);
}

.menusquare {
	margin-top:-4px;
	width:40px;
	height:36px;
    background-image: url(ui/mobile/menu.png);
	cursor: url('ui/mobile/pointer.png'), auto;
}

.locationbar {
	padding:4px 4px 4px 4px;
	border-top:4px solid #000000;
	border-bottom:4px solid #000000;
}

.locationbar input[type=text]{
	padding-left:4px;
	padding-right:8px;
	cursor: url('ui/mobile/textpointer.png'), auto;
}

.locationbar span {
    border: 4px solid black;
	padding-right: 12px;
	padding-left: 4px;
	padding-top: 4px;
}

.locationbar label {
	margin-right:10px;
	margin:4px 0px 0px 0px;	
    background-image: url(ui/mobile/location.png);
	width:176px;
	height:44px;}

.links {
	height:36px;
	padding:12px 4px 4px 8px;
	border-bottom:4px solid #000000;
}

.links .home {
	margin-top:-4px;
	margin-right:20px;
	width:104px;
	height:36px;
    background-image: url(ui/mobile/home.png);
	cursor: url('ui/mobile/pointer.png'), auto;
}

.links .about {
	margin-top:-4px;
	margin-right:20px;
	width:124px;
	height:36px;
    background-image: url(ui/mobile/about.png);
	cursor: url('ui/mobile/pointer.png'), auto;
}

.links .gallery {
	margin-top:-4px;
	margin-right:20px;
	width:160px;
	height:36px;
    background-image: url(ui/mobile/gallery.png);
	cursor: url('ui/mobile/pointer.png'), auto;
}

.links .contact {
	margin-top:-4px;
	margin-right:20px;
	width:164px;
	height:36px;
    background-image: url(ui/mobile/contact.png);
	cursor: url('ui/mobile/pointer.png'), auto;
}


.footer {
	height:32px;
	padding:4px 4px 8px 8px;
	border-top:4px solid #000000;
}

.footer .connect {
	margin-top:4px;
	padding-bottom:4px;
	margin-left:4px;
	width:196px;
	height:28px;
    background-image: url(ui/mobile/connected.png);}

.footer .copyright {
	margin-top:4px;
	padding-bottom:4px;
	margin-right:8px;
	width:336px;
	height:28px;
    background-image: url(ui/mobile/copyright.png);
    background-repeat: no-repeat;;
}

.innercontainer {
	border:4px solid #000000;
	margin:4px;
	padding:12px;
	overflow:auto;
	max-height: calc(100vh - 400px);
	width: calc(100% - 40px);}


.imgcontain {
	height:150px;
}


.imgcontain img {
	min-height:150px;
    -ms-transition:all 0.5s;
    -o-transition:all 0.5s;
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    transition:all 0.5s;
  pointer-events: none;
}

.imgcontain:focus img {
	top:15vh;
	max-height: 25vh;
	min-height:50px;
	max-width:60vw;
  transform: scale(3);
  -webkit-transform: scale(3);
  -moz-transform: scale(3);
  -o-transform: scale(3);
  -ms-transform: scale(3);
  pointer-events:none;
}
	

::-webkit-scrollbar { width: 20px; }
::-webkit-scrollbar-track { background-color:#FFFFFF; border-left:4px solid #000000}
::-webkit-scrollbar-thumb        { background-color:#000000;}