/* Browser Reset */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, em, img, strong, ol, ul, li {
    margin: 0;
    padding: 0; 
    border: 0; 
    outline: 0;

    font-weight: inherit; 
    font-style: inherit; 
    font-size: 100%; 
    font-family: Verdana, Arial, Helvetica, sans-serif;
    }
/* End Browser Reset  #ff9933  */
/**** Tags ****/
body{
	background: #143273;
;
}

h1{
	letter-spacing: 1em;
	font-Weight: bold;
        font-size: 90%;
	margin: 16px 0 16px 0;
	color: #ff6600;
}

/* fyi - brighter shade of #ee9900 is  #ff9933  */


h2{

	
	background: #14327d; 
	margin: 3px 0 0 0;

	padding: 1px 3px 2px 4px;



	font-Weight: bold;
	font-size: 100%;
	margin: 22px 0px 3px 0px;
	color: white;
}

ul.simple{
	margin-left: 17px;
	padding: 0 0 3px 0;
	list-style-type: square;
}

ul.simple li{
	padding: 0 0 3px 0;
}



.h3il{

	font-size:90%;
	font-weight:bold;
	color: #404040;		
}


.h3il_i{

	font-size:100%;
	font-weight:bold;
	color: #14327d;		
background: transparent url(j_bullet.png) left center no-repeat;

padding: 4px 0 4px 22px;
z-index: 30;
}

.hilite{

	font-style: italic;
	color:#ff6600;
	font-weight: normal;
}

a{
	color: #14327d;
	text-decoration: none;
	
}

/* 0000ff */

a:hover{
	
color: white;	
background: #ff6600;
}


a.link{
	font-size:88%;
	}

a.link2{
	color: #14327d;
        font-size: 85%;
	
}
a.link2:hover{

color: white;	
background: #ff6600;

}


p{
	line-height: 135%;
	margin: 0 0 9px 0;
	display:block;
}

p.jtext {margin:0 0px 9px 9px; color: #555555;
}

p.numlist {
        line-height: 120%;
        text-indent: -16px;   
	margin: 0 0 6px 35px;
}

img.O {
	vertical-align: top;

}



p.spacer{

	font-size: 50%;
	line-height: 50%;
  	margin: 0 0 0 0;

}

p.home{
	text-align: center;
	margin-top: 40px;
	padding: 3px 0 3px 0;
	font-size: 59%;
	font-style: normal;
	background-color: #14327d;
	color: white;
	letter-spacing: 1.4px;
}
p.promo{
	margin-right: 55%;
	text-align: right;
	font-style: normal;

	line-height: 1.5;
}

re1 { text-align:center;

}


div#feature a { position:absolute; top:20px; left:275px; width: 227px; height: 29px;}



div#feature a:link {
background: url(j_feature_1p.png);}
div#feature a:visited {
background: url(j_feature_1p.png);}
div#feature a:hover {
background: url(j_feature_2p.png);}
div#feature a:active {
background: url(j_feature_1p.png);}




img.junetsu{
display: block; margin-left:auto; margin-right:auto; border-left: 1px solid transparent; }

#junetsu{ position:absolute; bottom:30px; 
}



#app_popups{position:absolute; left: 10px; top: -14px; font-size: 80%; text-align:left; background-color: #e3f1ff; padding: 0px 4px 0px 4px; z-index: 0; width:138px; height:63px; border-width: 1px 1px 1px 1px; border-style:solid; border-color: #0000ff;
}

div#app_popups a img {display:inline;height: 0; width: 0; border-width: 0;}

div#app_popups a:hover img {position: absolute;left: 95px; top: -5px; height:auto; width:auto; }

div#app_popups .cap {line-height:100%; color:white; padding: 4px 0px 0px 4px;  display:block;text-align:left;position:absolute;left: 9px; top: 57px; width: 84px; height: 14px; background-color: #0000ff; font-size: 90%;
}


/* the container  */
#quarantine_steps{ position:absolute; left: 10px; top: -70px; font-size: 80%; text-align:center; background-color: #e3f1ff; padding: 2px 6px 0px 6px; width:108px; height:50px; border: 1px solid #0000ff;}

/* how steps (links) look */
div#quarantine_steps a {font-size: 130%; font-weight:normal; background-color: white; padding: 1px 4px 1px 4px;}

/* box and caption  */
div#quarantine_steps .cap { line-height:100%; color:white; padding: 4px 0px 0px 4px;  display:block;text-align:left;position:absolute;left: 15px; top: 47px; width: 84px; height: 14px; background-color: #0000ff; font-size: 90%;
}


/* when you hover over a step (link) number  */
div#quarantine_steps a:hover {
color: white;	
background-color: #ff6600;
}

/* an extra box of text associated with each step that doesn't display without hover  */
div#quarantine_steps a span {display:none;}

/* by hovering, the a span text displays  */
div#quarantine_steps a:hover span {display:block;position: absolute;text-align:left; left: 124px; top: -1px; height:40px; width:340px; padding: 8px 8px 4px 12px;line-height:130%;
color:black;background-color:transparent; border: 1px dashed #ff6600; color:#555555;}


/* each step also has an graphic associated but we only want to load it without seeing it  */
div#quarantine_steps a img {display:inline;height: 0; width: 0; border-width: 0;}

/* by hovering, the image pops up with its new size specs  */
div#quarantine_steps a:hover img {position: absolute;left: -11px; top: 69px; height:auto; width:auto;  border-left: 1px solid transparent}




.h3il_s{
	text-align:center;
	font-size:90%;
	font-weight:bold;
	font-style:normal;

	color: #404040;		
}


a.showlabel1 span {display: none;
}

a.showlabel1:hover span {position:absolute; background-color:transparent; display:block; left: 4px; top: 219px; width: 150px; height: 67px; border: 5px solid #ff6600;
}


a.showlabel2 span {display: none;

}

a.showlabel2:hover span {background-color:transparent; display:block;position:absolute; left: 4px; top: 161px; width: 124px; height: 56px; border: 5px solid #ff6600;
}


#navcontainer
{
position: absolute;left: 0px; top: 492px;
list-style-type: none;
margin: 0;
padding: 0 0;
	font-size: 100%;
width: 100%;

}

ul#navcontainer li a
{
display: block;


width: 4em;
color: #ff6600;
padding: 1px 1px 2px 1px;
text-align: center;
text-decoration: none;

}

ul#navcontainer li a:hover
{
color: white;
background-color: #ff6600;
}

ul#navcontainer .left { float: left;}
ul#navcontainer .right { float: right;}
ul#navcontainer .middle { float: left; margin-left: 160px}




/**** Layout ****/


.colwrap{

	width: 100%;
	margin: 0 0 8px 0;
}


.column1{

	
	width: 125px;
	float: left;
	 	
}


.column2{
	

	background: #e3f1ff;
	padding: 2px 0 1px 4px;
	margin-left: 130px;
	
}



.column2note{
	text-indent: -1.2em;

	background: white;
	margin-left: 130px;
	padding-left: 1em;
	
}



#wrapper{

	
	border: 1px solid white; 
	margin: 0 auto;
	margin-top: 30px;
	margin-bottom: 30px;
	width: 500px;
	background: white;
	padding: 0px 8px 8px 8px;
	
}

#header{

	height: 122px;
	background: url(z_obsm_logo.png);
	background-repeat:no-repeat;
	margin: 10px 0 2px 0;
}




#nav{
	
	background: white;
	margin: 0 0 0 0;
	font-size: 75%;
	color: #ff6600;
}

#content{
	background-color: white;
	padding: 8px 0px 100px 0px;
	font-size: 80%;
}


#content_junetsu {
	background: white;
	padding: 8px 0px 10px 0px;
	font-size: 80%;
	height: 472px;position:relative;
	overflow:visible;
	
}


#footer{
	background: white;
    margin-top: 5px;
	font-size: 50%;
	padding: 2px 0px 2px 0;

}

