span {
display: moz-inline-block;
display: inline-block;
}

body { 
text-align: center; 
} 


a {
color: #990000;
text-decoration: none;
background-color: none;
}

.blocklink {
float: left;
display: block;
line-height: 15px; 
height: 36px;
width: 96px;
color: black;
text-decoration: none;
font: bold 14px arial,sans-serif;
background-color: none;
}

.widelink
{
display: block;
float: left;
line-height: 16px;
height: 32px; 
width: 100%;
color: black;
text-decoration: none;
font: normal 10px arial,sans-serif;
background-color: none;
text-align: left;
}

a:hover {color: white; background-color: black;}

/*maybe make below h1 + h2 specific to links? */

h1 a:hover {display: block; color: white; background-color: black; margin: 0px;}
h2 a:hover {display: block; color: black; background-color: white;}

.footer{
display: block;
float: left;
font: normal 10px arial,sans-serif; 
text-decoration: none;
background-color: rgba(238, 238, 238, 0.5);
width: 100%;
color: white;
border-top: 32px solid transparent; 
}

#main-text {
float:left;
width: 768px;
background-color: white;
background-image:url('tech/gridlarge.png');
border-bottom: 32px solid white;
Margin-top: 26px;
}

#main-links {
float:left;
width: 768px;

background-color: white;
background-image:url('tech/gridlarge.png');
border-bottom: 32px solid white;
Margin-top: 26px;
}

#whitebar {
float: left;
width: 100%;
height: 18px;
background-color: white;
}

#main-links h1 {
height: 18px;
color: black;
background-color: #fa1;
}

#main-links h2 {
height: 18px;
}

#main-links h3 {
height: 18px;
}

#main-quake {
float:left;
width: 96%;
background-color: #3D1F00;
color: #960;
background-image:url('oldsites/img/quake.jpg');
border-bottom: 32px solid white;
Margin-left: 2%;
}


#main-card img{
  width: 90vw;
}

/* normal*/

#logo{
	border-radius: 24px;
	float: left;
	width: 420px;
	height: 420px;
	text-align: left;
	background-color: yellow;
	background-image:url('http://www.l2gx.net/tech/l2gx.png');
	/* "/" puts it at root obviously not working in local site! */
	background-size: cover;
	margin-top:48px;
	margin-left: 40px;

	color: black;
	font: normal 12px arial,sans-serif;
}

#square{
	border-radius: 24px;
	float: left;
	width: 420px;
	height: 420px;
	text-align: left;
	background-color: grey;
	background-size: cover;
	margin-top:48px;
	margin-left: 40px;
}

#square img{
	border-radius: 24px;
	width: 420px;
	height: 420px;
	margin: 0px;
}



#widescreen{
	border-radius: 24px;
	float: left;
	width: 840px;
	height: 420px;
	text-align: left;
	background-color: grey;
	background-size: cover;
	margin-top:48px;
	margin-left: 40px;
	color: black;
	font: normal 12px arial,sans-serif;
	padding: 0px;
}

#widescreen img{
	border-radius: 24px;
	width: 840px;
	height: 420px;
	margin: 0px;
}

@media screen and (max-width: 960px) {

#logo{
	border-radius: 2.4vw;;
	float: left;
	width: 42vw;
	height: 42vw;
	text-align: left;
	background-color: yellow;
	background-image:url('http://www.l2gx.net/tech/l2gx.png');
	/* "/" puts it at root obviously not working in local site! */
	background-size: 100%;S
	margin-top: 4.8vw;
	margin-left: 3.8vw;
	color: black;
	font: normal 12px arial,sans-serif;
}

#square{
	border-radius: 2.4vw;;
	float: left;
	width: 42vw;
	height: 42vw;
	text-align: left;
	background-color: yellow;
	background-image:url('http://www.l2gx.net/tech/l2gx.png');
	/* "/" puts it at root obviously not working in local site! */
	background-size: 100%;S
	margin-top: 4.8vw;
	margin-left: 3.8vw;
	color: black;
	font: normal 12px arial,sans-serif;
	padding: 0vw;
}

#square img{
	border-radius: 2.4vw;
	width: 42vw;
	height: 42vw;
	margin: 0px;
}

}

#logo a{display: block;	height: 100%;	width: 100%; background-color: transparent; margin: 0px; padding: 0px;}

#wrapper {
Margin-left: auto;
Margin-right: auto;
width: 98%;
/* knocking out temp-width as wrapper is used in the recipes and doesn't work on wide screen */
/*max-width: 960px;*/
}

#black {
float: left;
background-color: black;
color: white;
width: 96%;
Margin-left: 2%;
Margin-top: 2%;
display: block;
font: normal 12px arial,sans-serif;
}

/*plain-text is used in the projects pages
needs device width adaptation!*/

/*plain-text for landscape and or computer screens!*/

#plain-text {
width: 98%;
border-bottom: 32px solid white;
Margin-left: 1%;
Margin-top: 26px;
text-align: left;
font: normal 1.2vw arial,sans-serif;
}

#plain-text img{
width: 98%;
margin-bottom:24px;
margin-top:24px;

}

#plain-text a {
color: #661122;
text-decoration: none;
background-color: none;
}

#plain-text h1 {
color: #0EB4F9;
background-color: #F9C80E;
margin-bottom:24px;
margin-top:24px;
}

/* FLATCARD used on horns page - better for links?*/

#flatcard, #flatcard1, #flatcard2 , #flatcard3 , #flatcard4 , #flatcard5 {

border-radius: 24px;
float: left;
width: 840px;
height: 210px;
text-align: left;
/* yellow*/
background-color: #F9C80E;
margin-top:48px;
margin-left: 40px;
color: black;
font: normal 20px arial,sans-serif;
}

#flatcard img, #flatcard1 img, #flatcard2 img, #flatcard3 img, #flatcard4 img, #flatcard5 img {
width: 50%;
float: left;
height : 100%;
}

#flatcard h1 ,#flatcard1 h1 ,#flatcard2 h1 ,#flatcard3 h1 ,#flatcard4 h1, #flatcard5 h1{
color: black; background-color: #44FFDD;
float: left;
display: block;
font: bold 28px arial,sans-serif;
width: 46%;
margin: 0px;
padding: 2%;
}

	/* h2 is for full-width text  */
#flatcard h2 ,#flatcard1 h2 ,#flatcard2 h2 ,#flatcard3 h2 ,#flatcard4 h2, #flatcard5 h2{
float: left;
display: block;
font: normal 22px arial,sans-serif;
width: 94%;
margin: 0px;
padding: 3%;
}

	/* h3 is for half-width text  */
#flatcard h3 ,#flatcard1 h3 ,#flatcard2 h3 ,#flatcard3 h3 ,#flatcard4 h3, #flatcard5 h3{
float: left;
display: block;
width: 46%;
margin: 0px;
padding: 2%;
font: normal 20px arial,sans-serif;
}

/*colorize per flatcard type*/

#flatcard h1 {background-color: #FF7664;} #card h3 {}

#flatcard1 {
	/* purple */
	background-color: #D4B4DD;
}
#flatcard1 h1 {background-color: #FF7642;} #card1 h3 {}

#flatcard2 {
	/* tealgreen */
background-color: #B9BFA1;
} 
#flatcard2 h1 {background-color: #FF9F6C;}#card2 h3 {}

#flatcard3 {
	/* hot pink */
background-color: #FF7664;
}
#flatcard3 h1 {background-color: #D6EBD8;}#card3 h3 {}

#flatcard4 {
	/* orange */
background-color: #FFBF5C
} 
#flatcard4 h1 {background-color: #D4EBD8;} #card4 h3 {font: normal 20px arial,sans-serif;}

#flatcard5 {
	/* mint */
background-color: #D4EBD8
} 
#flatcard5 h1 {background-color: #FF7664;} #card5 h3 {font: normal 20px arial,sans-serif;}



/* CARD */

#main-card {
width: 100%;
border-bottom: 32px solid white;
Margin-left: 0px;
Margin-top: 20px;
text-align: left;
padding: 0px;
}


/* Normal */

#main-card h1, #main-card h2  {font: bold 24px arial,sans-serif;}
#main-card h3 {font: normal 20px arial,sans-serif;}

#card, #card1, #card2, #card3, #card4, #card5 {

border-radius: 24px;
float: left;
width: 420px;
height: 420px;
text-align: left;
/* yellow*/
background-color: #F9C80E;
margin-top: 48px;
margin-left: 38px;
color: black;
font: normal 20px arial,sans-serif;
}

#card img, #card1 img, #card2 img, #card3 img, #card4 img, #card5 img{
display:block;
border-radius: 24px 24px 0 0;
width: 100%;
border: 0px none #DCDCDC;
max-height: 192px;
margin: 0px;
}


/*shared card header characteristics*/
#card h1 ,#card1 h1 ,#card2 h1 ,#card3 h1 ,#card4 h1 ,#card5 h1{
color: black; background-color: #44FFDD;
float: left;
display: block;
width: 94%;
margin: 0px;
padding: 3%;
}

#card h2 ,#card1 h2 ,#card2 h2 ,#card3 h2 ,#card4 h2 ,#card5 h2{
color: #44FF80; background-color: white;
opacity: 0.5;
float: left;
display: block;
width: 96%;
margin: 0px;
padding: 2%;
}

	/* h3 is for text  */
#card h3, #card1 h3 ,#card2 h3 ,#card3 h3 ,#card4 h3 ,#card5 h3{
float: left;
display: block;
width: 96%;
margin: 0px;
padding: 2%;
}

/*colorize per card type*/

#card h1 {background-color: #FF6542;}#card h2 {color: #D494DD} #card h3 {}

#card1 {
	/* purple */
	background-color: #D494DD;
}
#card1 h1 {background-color: #FF6542;}#card1 h2 {color: #D494DD} #card1 h3 {}

#card2 {
	/* tealgreen */
background-color: #779FA1;
} 
#card2 h1 {background-color: #FF9F1C;} #card2 h2 {color: #779FA1}#card2 h3 {}

#card3 {
	/* hot pink */
background-color: #FF6542;
}
#card3 h1 {background-color: #C4EBC8;} #card3 h2 {color: #FF6542}#card3 h3 {}

#card4 {
	/* orange */
background-color: #FF9F1C
} 
#card4 h1 {background-color: #C4EBC8;} #card4 h2 {color: #FF9F1C}#card4 h3 {}

#card5 {
	/* mint */
background-color: #C4EBC8
} 
#card5 h1 {background-color: #FF6542;} #card5 h2 {color: #81A986}#card5 h3 {}


/*FNS*/

#FNScard {

border-radius: 12px;
float: left;
width: 640px;
height: 320px;
text-align: left;
/* yellow*/
background-color: #8AEEE1;
margin-top: 48px;
margin-left: 38px;
color: black;
font: normal 20px arial,sans-serif;
}

#FNScard img{
display:block;
border-radius: 12px 12px 0 0;
width: 100%;
border: 0px none #DCDCDC;
max-height: 192px;
margin: 0px;
}

#FNScard h1, #FNScard h2  {font: bold 24px arial,sans-serif;}

#FNScard h3{
font: normal 20px arial,sans-serif;
margin: 10px;
}
#FNScard h3{
font: normal 20px arial,sans-serif;
margin: 10px;
}

#FNSwidescreen{
	border-radius: 12px;
	float: left;
	width: 640px;
	height: 320px;
	text-align: left;
	background-color: grey;
	background-size: cover;
	margin-top:48px;
	margin-left: 40px;
	color: black;
	font: normal 12px arial,sans-serif;
	padding: 0px;
}

#FNSwidescreen img{
	border-radius: 12px;
	width: 640px;
	height: 320px;
	margin: 0px;
}

/*bookcard characteristics  text background = #F9C80E*/

#bookcard {
	float: left;
	width: 896px;
	height: 672px;
	text-align: left;
	background-color: white;
	margin-top: 36px;
	margin-left: 24px ;
	color: black;
	font: normal 16px arial,sans-serif;}


#bookcard h1{
color: white;
background-color: #336699;
float: left;
display: block;
font: bold 28px arial,sans-serif;
width: 416px;
margin: 0px;
padding: 16px;
}

#bookcard h2 {
color: white;
background-color:  #ff8533;
float: left;
display: block;
font: bold 20px arial,sans-serif;
width: 416px;
margin: 0px;
padding: 16px;
}

	/* h3 is for text  */
#bookcard h3 {
float: left;
display: block;
color: #333; background-color: #F9C80E;
width: 416px;
padding: 16px;
margin: 0%;
font: normal 20px arial,sans-serif;
}

#bookcard img{display:block; width: 448px; float: left;border:0px; height: 672px; margin: 0px; padding: 0%;}

#bookcard .logo{
	width: 240px;
	height: 80px;
	float: left;
	margin-left: 88px;
	margin-top: 24px;
	
	}

#smallcard {
float: left;
width: 128px;
min-height: 256px;
background-color: #ccc;
text-align: left;
margin-top:10px;
margin-right: 2%;
font: normal 12px arial,sans-serif;
}

#smallcard a{
float: left;
display: block;
width: 96%;
color: #fa1;
background-color: #333;
font: bold 14px arial,sans-serif;
padding-top:2px;
padding-left:2%;
padding-right:2px;
padding-bottom:2px;
}

#smallcard img{
max-height: 192px;
max-width: 96px;
}


#horizontalist {
float: left;
background-color: white;
border-bottom: 32px solid white;
Margin: 28px;
}

#column128 {
float: left;
Width: 128px;
background-color: white;
border-bottom: 32px solid white;
Margin: 4px;
}

#column128 h1 {
float: left;
color: black; 
background-color: #fa1;
display: block;
height: 26px;
width: 128px;
font: bold 11px arial,sans-serif;
margin: 0px;}

#column128 h2 {
float: left;
color: black; 
background-color:white;
display: block;
height: 32px;
width: 128px;
font: bold 14px arial,sans-serif;
margin: 0px;}

#column128 h3 {
float: left;
color: black; 
background-color: white;
display: block;
height: 14px;
width: 128px;
font: bold 11px arial,sans-serif;
margin: 0px;}

#columnblock128{
float: left;
height: 128px;
width: 128px;
font: 11px arial,sans-serif;
}

#columnblockimg128{
float: left;
align: center;
height: 128px;
font: 9px arial,sans-serif;
}

#columnblock{
float: left;
}
#frontimg {width:256px;height:369px;}#imgright img{width:369px;height:369px;}

.img128{
text-decoration: none; border: 0 none;
Margin: 4px;
max-height:120px;
max-width: 120px;
}

.imghalf{
text-decoration: none; border: 0 none;
Margin: 4px;
width: 50%;
}

img{
text-decoration: none;
background: transparent;
}


/*tooltip below*/

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 420px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 24px;

  /* Position the tooltip */
  position: absolute;
  margin-left: 64px;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

/* this is for a vidcontainer */

/*style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}


#main-card #vidcontcenter
{
margin-top: 48px;
margin-left: 38px;
/*border-radius: 24px;*/
/*overflow: hidden;*/
float: left;
width: 840px;
height: 420px;
text-align: center;
}

#main-card #vidcontainer {
border-radius: 24px;
background-color: red;
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
/* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* main press is used for magazine like layouts*/

#main-press{
 width:100vw;
 text-align: center;
}

#press-wrapper {
font: normal 20px arial,sans-serif;
display: inline-block;
 border-radius: 0.5vw;
width: 96vw;
max-width: 1920px;
text-align: left;
background-color: rgba(240, 240,200, 0.8);
margin-top:24px;
color: black;
padding: 0vw;	
}

#press-nav{
position:fixed;left:24;top:24;
font: normal 20px arial,sans-serif;
display: block;
 border-radius: 0.5vw;
width: 14vw;
text-align: left;
background-color: rgba(208, 238, 240, 0.8);
margin-top:2vw;
margin-left:1vw;
color: black;
padding: 1vw;	
}

#press-nav > #logo{
	float: left;
	border-radius: 0.5vw;
	width: 13vw;
	height: 13vw;
	min-width: 120px;
	min-height: 120px;
	margin-left: 0.5vw;
	margin-top: 0.5vw;
	margin-bottom: 0.5vw;
}

.navlink{
float: left;
 width:12.2vw;
 border-radius: 0.5vw;
 color: black;
 background-color: rgba(160, 250, 220, 0.8);
 display: block;
 font: 20px arial,sans-serif;
 margin: 0.5vw;
 padding: 0.5vw;
}


#press-text{
font: normal 20px arial,sans-serif;
float: left;
display: block;
 border-radius: 0.5vw;
width: 40vw;
text-align: left;
background-color: rgba(208, 238, 240, 0.8);
margin-top:2vw;
margin-left:18vw; /* this floats left of the fixed position press-nav */
color: black;
padding: 1vw;	
}


#press-text img{
	
/* there should not be images inside press-text */
font: normal 20px arial,sans-serif;
float: right;
display: block;
 border-radius: 0.5vw;
width: 38vw;
max-width: 24vw;
min-width: 18vw;
text-align: left;
background-color: rgba(238, 238, 238, 0.8);
margin-top:1.2vw;
margin-left:0.6vw;
color: black;
padding: 1vw;	
}

#press-text h1{
width: 99%;
 border-radius: 0.5vw;
 color: white;
 background-color: rgba(250, 120, 20, 0.8);
 float: left;
 display: block;
 font: bold 28px arial,sans-serif;
 margin: 0px;
 margin-bottom: 1%;
 padding: 1%;
}



#press-text h2{
width: 99%;
 border-radius: 0.25vw;
 color: black;
 background-color: rgba(120, 210, 180, 0.8);
 float: left;
 display: block;
 font: bold 20px arial,sans-serif;
 margin: 0px;
 margin-bottom: 0%;
 padding: 1%;
}

#press-text h3{
width: 99%;
 color: black;
 float: left;
 font: 20px arial,sans-serif;
 margin: 0px;
 margin-bottom: 1%;
 padding: 1%;
}

.press-img{
	position:fixed;right:0;top:24;
	border-radius: 0.5vw;
	display: block;
	width: 36vw;
	margin-left:0vw;/* the 'margin' depends on the positioning. */
	margin-top:1vw;
}

.press-img img {
	float:left;
	border-radius: 1vw;
	display: block;
	transition: transform .2s; /* Animation */
	width: 10vw;
	min-width: 169px;
	height: 10vw;
	min-height: 169px;
	margin-left: 1vw;
	margin-top: 1vw;
	/*height: 200px;*/
}

/* the below can be used by adding a class="zoom"  tag inside the img tag

	for best results change the press-img margins to make it smaller:
	width: 28vw;
	margin-left:6vw;
	margin-top:6vw; 
*/

.zoom {
	float:left;
	display: block;
	transition: transform .2s; /* Animation */
	border-radius: 24px;
	width: 17vw;
	height: 17vw;
	transform: scale(0.5);
	margin-left: -4vw;
	margin-top: -4vw;
	margin-right: -4vw;
	margin-bottom: -4vw;
	position: relative;
	/*height: 200px;*/
}

.zoom:hover {
	display: block;
	transform: scale(1);
	z-index: 6
}

/* below is for small screens eg phones */

@media only screen and (max-device-width: 480px) {

.navlink{
float: left;
width: 120px;
}


.press-img img {
	margin-left: 1vw;
}

.press-img img {
	float:left;
	border-radius: 1vw;
	display: block;
	transition: transform .2s; /* Animation */
	width: 16.5vw;
	height: 16.5vw;
	min-width: 120px;
	min-height: 120px;
	margin-left: 1vw;
	margin-top: 1vw;
}
	
#main-press{
width: 100%;
}

#press-nav{
	position: relative;
	float: left;
	width: 90vw;
	margin-left: 2.4vw;
}



#press-text{
border-radius: 1vw;
float: left;
width: 90vw;
text-align: left;
background-color: rgba(238, 238, 238, 0.8);
margin-top:4.8vw;
margin-left: 2.4vw;
color: black;
padding: 2vw;
}

#press-text img{
	float:left;
	border-radius: 24px;
	width: 420px;
	height: 420px;
	margin: 0px;
}

.press-img{
	float: left;
	position: relative;
	border-radius: 0.5vw;
	display: block;
	width: 90vw;
	margin-left: 2.4vw;
	margin-top:1vw;
}


#plain-text {
font: normal 2dvw arial,sans-serif;
}



/* cards */

#main-card img{
  width: 90vw;
}

#main-card h1, #main-card h2  {font: bold 3.5dvw arial,sans-serif;}
#main-card h3 {font: normal 3dvw arial,sans-serif;}


#card, #card1, #card2, #card3, #card4, #card5 {

border-radius: 2.4vw;
float: left;
width: 42dvw;
height: 64dvw;
text-align: left;
margin-top:4.8dvw
margin-left: 3.8dvw;
font-family: Arial, Helvetica, sans-serif;
}

#card img, #card1 img, #card2 img, #card3 img, #card4 img, #card5 img{
display:block;
border-radius: 2.4dvw 2.4dvw 0 0;
width: 42dvw;
max-height: 21dvw;
border: 0px none #DCDCDC;
margin: 0px;
}

/*shared card header characteristics*/
#card h1 ,#card1 h1 ,#card2 h1 ,#card3 h1 ,#card4 h1 ,#card5 h1{
width: 94%;
margin: 0px;
padding: 3%;
}

#card h2 ,#card1 h2 ,#card2 h2 ,#card3 h2 ,#card4 h2 ,#card5 h2{
width: 96%;
margin: 0px;
padding: 2%;
}

	/* h3 is for text  */
#card h3, #card1 h3 ,#card2 h3 ,#card3 h3 ,#card4 h3 ,#card5 h3{
width: 96%;
margin: 0px;
padding: 2%;
}

#square{
	border-radius: 2.4dvw;
	float: left;
width: 42dvw;
height: 64dvw;
	margin-top:4.8dvw;
	margin-left: 4.8dvw;
}

#square img{
	border-radius: 2.4dvw;
width: 42dvw;
height: 64dvw;
	margin: 0px;
}

}/*  end of small device max-device-width: 480px */

/*
Below is used to create un-obvious links to pages I prefer to have on the wayback machine but not yet generally visible
*/

#way {
float: left;
  color: #E2F5EC;
  display: block;
  background-color: #E2F5EC;
  width: 4.8vw;
  height: 4.8vw;
  border-radius: 8px;
  font-size: 0.6vw;
  overflow: hidden;
margin: 1vw;
text-size: 3vw;
}

#way a{
float: left;
  color: #E2F5EC;
  display: block;
  background-color: #E2F5EC;
  width: 4.8vw;
  height: 4.8vw;
  border-radius: 8px;
  font-size: 0.6vw;
  overflow: hidden;
margin: 1vw;
text-size: 3vw;
}
}