@charset "utf-8";
/* CSS Document */

* {margin:0px;padding:0px;outline:none;}
a {text-decoration:none;}
a, img {border:0;}
ul {list-style-type:none;}



#coolborders {
 border-style: groove;
 border-width: 3.5px;
 border-color: black;
}



/* Popup container - can be anything you want */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}









#snail-link { color: #e81805; text-decoration: underline; } /* CSS link color */

html,body,#cell {height:100%;width:100%;}
#cell {display:table-cell;vertical-align:middle;}

h3 {color:yellow;font-size:16px;font-weight:bold;text-decoration:underline;text-align:left;margin:0px 0px 10px 0px;}

.snails {
 font-family: helvetica;
 font-size: 16px;
}

.snailstitle {
 font-family: helvetica;
 font-size: 20px;
}

.snailslist {
 font-family: verdana;
 font-size: 12px;
}

.placehold {
 font-family: comic sans ms; 
}

.clippytwopointzero {
  background-color: #8bc4bb;
  width: 96px;
  border: 3.5px groove black;
  margin: 10px;
}

body {
display:table;
font:12px verdana,arial,sans-serif;
color:#FFD69D;
}

hr{margin:10px 0px;color:red;height:1px;border:none;background-color:red;}

.line {margin:6px 0px;height:0px;border-top:solid red 1px;}

a {color:yellow;}
a:hover {color:red;}

.title {white-space:nowrap;text-align:center;color:white;font-size:40px;font-weight:bold;}

#container
{
/* position:relative;
animation: myfirst 20s;
animation-iteration-count: infinite; */

border:solid 5px #800000;
background-color:black;
width:775px; 
margin:auto;
-webkit-border-radius: 15px;
border-radius: 15px; 	
overflow:hidden;
}

#header
{
text-align:center;
font-size:40px;
font-weight:bold;
color:yellow;	
padding:10px;
}

#nav {
overflow:hidden;

border-bottom:solid 1px black;
padding: 2px 0px;
background:#FFA32C;
font-weight:bold;
}

#nav a
{
margin: 0px 0px 0px 20px;
padding: 3px;

background-color: white;
color:black;
	
float: left;
border-radius:5px 5px 0px 0px;
/*box-shadow: 0px -3px 2px #666666;*/
}
     
#nav a:nth-child(2) {margin-left:20px;}
#nav a:last-child {float:right;}
#nav a:hover {color:red;}

#left, #content, #right {float:left;width:170px;height:416px;}

#left {position:relative;}
#left > div:first-child
{position:absolute;z-index:2;height:100%;width:100%;background:#D9B792;}

#left a {
cursor:pointer;
position:relative;z-index:3;
display:block;

white-space:nowrap;
text-align:center;

border-top:solid 1px #FFECD2;
border-bottom:solid 1px black;

font-weight:bold;
color:black;
background:#D9B792;

height:14px;
padding:5px 0px;
}

#left a img {position:absolute;left:4px;}
#left a:hover {border-top-color:red;color:#FFFFFF;background:red;}

#left div[id^='menu']
{
position:absolute;left:0px;z-index:1;

width:163px;padding-left:7px;

transition: left .3s;
}

#left div[id^='menu'] a {padding: 5px 10px;}

#left > div:hover > div[id^='menu'] {left:170px !important;width:200px !important;}

#menu_jar{top:78px;}
#menu_deds {top:156px;}
#menu_lexicon {top:78px;}

#content {width:435px;}
#content > div {
padding:10px;
font-size:11px;
}

#right {display:table;
background-color:#999;
color:black;
}

#right>div {
display:table-cell;
vertical-align:middle;
height:100%;width:100%;
text-align:center;
}

#right a {display:block;font-weight:bold;}

#right a:nth-child(2),#right a:nth-child(3) {
	border:solid 1px white;
	color:black;
	font-weight:normal;
	background:#FF9000;
	border-radius:30px;
	margin:15px auto;
	width:140px;
	padding: 20px 2px;

transition: border-radius .5s;
}

#right a:nth-child(2):hover,#right a:nth-child(3):hover
{border-radius:50%;}

#right a:hover {color:blue;}

#left div[id$='frame_div']
{
display:table;
visibility:hidden;

z-index:10;
position:absolute;top:0px;left:170px;
width:435px;
height:350px;
}

#left div[id$='frame_div'] > div {display:table-cell;vertical-align:middle;}

#footer {text-align:right;background:#FF8000;color:black;clear:both;padding:3px 5px;}

iframe
{
background:red;
border:none;
border-radius:50%;
display:block;margin:auto;
width:0px;
height:0px;

overflow:hidden;

transition: background 1s, border-radius 1s, width .6s, height .6s;
}

#rainbow {font-size:30px;font-weight:bold;text-align:center;margin-bottom:25px;}

input[type=text]:focus,input[type=password]:focus {background-color:#808080;}
input[type=text],input[type=password]
{display:block;margin:2px auto;text-align:center;color:white;background:transparent;border:solid #FF952B 1px;width:210px;}

input[type='submit'], input[type='image']{border:solid 1px orange;cursor:pointer;background:transparent;color:white;padding:2px;text-align:center;}
input[type='submit']:hover, input[type='image']:hover {border-color:yellow;}

#digistad body {background:url('/space.png');}
#tourist body {background:url(/tourist/cloud.png) #800000;}
#gay body {background:url(/gay/labtile.png) #007700;}
#opendomein body {background:url(/opendomein/vod.png) black;}

/* digistad */
#digistad img[src$='welcome.gif'] {margin:0px auto 20px auto;width:415px;}
#digistad #guest{margin:20px auto 0px auto;font-size:15px;height:105px;text-align:center;}
#digistad #guest tr:first-child {font-size:20px;}
#digistad form {text-align:center;}

#digistad #dedslogin{text-align:left;}
#digistad #dedslogin table {margin:50px auto;width:375px;text-align:center;}
#digistad #dedslogin input[type='submit'] {margin-top:20px;width:170px;}

#digistad input[name='enter'] {display:block;width:100px;margin: 28px auto;}
#digistad ul {margin:25px auto;width:250px;}
#digistad li {color:orange;}
#digistad li:nth-child(odd) {color:#A8E1D9;}

/* tourist */
#tourist #header img {height:60px;vertical-align:middle;}
#tourist #header {padding:3px 5px;}
#tourist #content {background:url(/tourist/wood.png) #800000;}
#tourist form {display:inline-block;margin:31px 15px;}
#tourist img[src$='shocking.gif'], #tourist img[src$='coolglasses.gif'] {vertical-align:middle;position:relative;top:-2px;}

/* gay */
#gay #header {height:55px;padding:8px;}
#gay #header img:first-child {float:left;height:55px;}
#gay #header img:last-child {float:right;height:55px;}
#gay img[src$='trigon.gif'] {vertical-align:middle;}
#gay img[src$='gsym.jpg'] {display:block;margin:47px auto;}
#gay #content {background:url(/gay/grass.png) #007700;}
#gay form {float:left}
#gay form:last-child {float:right;}
#gay input[type='submit'] {width:200px;border-color:#FF48FF;}
#gay input[type='submit']:hover {border-color:yellow;}

/* opendomein */
#opendomein #content a:first-child {display:block;margin-bottom:15px;text-align:center;}
#opendomein img[src$='sheep.png'] {float:left;margin-right:5px;}
#opendomein img[src$='doeners.gif'] {float:right;margin-left:5px;}
#opendomein input[type='submit'] {display:block;margin:auto;width:140px;border-color:#86E7FB;}
#opendomein input[type='submit']:hover {border-color:yellow;}
#opendomein form {margin:50px 0px 35px;}

 @keyframes myfirst
{
0%   {left:0px; top:0px;}
25%  {left:-50px; top:50px;}
50%  {left:0px; top:100px;}
75%  {left:50px; top:-50px;}
100% {left:0px; top:-50px;}
}