/* Reset */

html, body { margin: 0; padding: 0; border: 0;  
				background: transparent; font-size:18px; height: 100%; }


div, span, article, aside, footer, header, hgroup, nav, section,
h1, h2, h3, h4, h5, h6, p, blockquote, a, li, 
table, tr, th, td, tbody, tfoot, thead {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	background: transparent;
	}
	

img 	{ margin:0; padding:0; border:0; }

table, tr, th, td, tbody, tfoot, thead {
	margin: 0; padding: 0; border: 0;
	vertical-align: baseline;
	background: transparent;
	}
	
table { border-collapse: collapse; border-spacing: 0; }
	
input, select, textarea, form, fieldset {
	margin: 0; padding: 0; border: 0;
	}

article, aside, dialog, figure, footer, header, hgroup, nav, section { 
	display:block; }

h1, h2, h3, h4, h5, h6, p, blockquote, td, th, a, caption, em, strong, strike { 
	font-family: Arial, Helvetica, sans-serif;
	font-size:100%;
	font-weight: normal;
	font-style: normal;
	line-height: 100%; 
	text-indent: 0;
	text-decoration: none;
	text-align: left;
	color: #000;
	}


/* Reset End*/
body{
	/*background-color: #aaa;*/
	background-color:#97A0B9;
	 height: 100%; 
}
h1{
	font-size: 1.55em;
	letter-spacing: 2px;
	font-weight: normal;
	padding-bottom: 4.05px;
	padding-top: 5.4px;
	margin-top: 13.5px;
	margin-bottom:13.5px;
	background: url(./images/h2.gif) repeat-x left bottom;
}
h2{
	font-size: 24px;
	letter-spacing: 0.0px;
	font-weight: normal;
	padding-bottom: 3.0px;
	padding-top: 4.0px;
	margin-top: 15px;
	margin-bottom: 5px;
}


.remark{
	font-size: 45%;
}

tr td{
    padding: 5px 10px;
}
ul{
	margin-top: 18px;
	margin-bottom: 18px;
    padding: 0px 0px 0px 40px ;
}

table{
	margin-bottom: 2px;
}
/*========================================
             HEADER
  ========================================*/
#div_wrap{
	background-color: #333;
	/*position:fixed; for the header to stay in place*/
	position: relative;
	width: 100%;
	
	clear:both;
}

#div_header{ height: 6%;}

#p_header{
    font-size: 6vmin;
	text-align: center;
	font-family: 'Poiret One', cursive;
	color: white;
	background-color: #333;
	
}
/*========================================
             MENU 
  ========================================

the menu was inspired by:
http://inspirationalpixels.com/tutorials/creating-a-dropdown-menu-with-html-css 

*/
#div_menu{
	position: static;
	color: white;
	width: 40%;
	min-width: 480px;
	height: 45px;
	margin-left: auto;
	margin-right: auto;
	/*border-left-width: 2px;
	border-right-width: 2px;
	border-top-width: 2px;
	border-style: solid;
	border-color: #444;*/
	text-align: center;
	font-family: 'Roboto', sans-serif;
	background-color: #333;
	cursor:pointer;
	/* no - select */
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	/* end no - select */
}

.menu {
	width: 25%;
	/*margin-left:1px;*/
	z-index:auto;
	min-width: 120px;
	line-height:100%;
	text-align:center;
	line-height:45px;
	float: left;
    position: relative;
	background-color: #333;
	color: white;
	transition:background-color linear 0.15s;
	transition:color linear 0.15s;
    font-size:19px;
    display:inline-block;
    text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}
#div_menu > div:hover , #div_menu >.current-item {
    text-decoration:none;
    color:#9999ff;
	background-color: #222;
}

/*----- Bottom Level -----*/
#div_menu  > div.menu:hover .sub-menu {
    z-index:2;
    opacity:1;
}
.sub-menu {
    /*min-width:180%;*/
	text-align: left;
    padding:5px 0px;
    position:absolute;
    top:100%;
    left:0px;
    z-index:0;
    opacity:0;
	color:#fff;
    transition:opacity linear 0.15s;
	
    box-shadow:0px 2px 3px rgba(0,0,0,0.2);
    background:#222;
	display:inline-block;
}
.sub-menu  div{
    transition:all linear 0.15s;
}
.sub-menu-item  > span{
	white-space:nowrap;
	padding-right: 40px;
	padding-left: 10px;
}

.sub-menu > div:hover, .sub-menu .current-item{
    background-color:#333;
	color:#9999ff;
}
/*========================================
             END OF MENU 
  ========================================
*/
#div_mainPage{
	position:relative;
	/*top: calc(6% + 45px); for the header to stay in place*/
	overflow: auto;
	width: 80%;
	min-height: calc(94% - 46px);
	margin-left:10%;
	margin-right:10%;
	font-family: 'Roboto', sans-serif;
	background-color: rgba(255,255,255,1);;
	padding-left: 10px;
	padding-right: 10px;
	z-index:1;
}

a{
    color: #1279be;
}

/*========================================*/
/* TOOLTIP */
/*========================================*/
/* from http://inspirationalpixels.com/tutorials/tooltips-in-pure-htmlcss */
.tooltip {
    position:relative;
}
.tooltip:hover .txt {
	display:inline-block;
}
.tooltip .txt {
    width:200px;
    padding:10px 15px;
    display:none;
    position:absolute;
    z-index:1000;
    border-radius:3px;
    background:rgba(0,0,0,0.80);
    /* Type */
    font-size:12px;
    text-shadow:-1px 1px 0px rgba(0,0,0,0.2);
    line-height:150%;
    color:#fff;
}

.tooltip .txt:before {
	width:0px;
	padding:0px;
	position:absolute;
	content:'';
}
/* Top */
.tooltip.top .txt {
    bottom:25px;
    left:-10px;
}
 
.tooltip.top .txt:before {
    bottom:-5px;
    left:10px;
    border-left:5px solid transparent;
    border-right:5px solid transparent; 
    border-top:5px solid rgba(0,0,0,0.8); 
}
 
/* Right */
.tooltip.right .txt {
    top:-10px;
    left:20px;
}
 
.tooltip.right .txt:before {
    top:10px;
    left:-5px;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent; 
    border-right:5px solid rgba(0,0,0,0.8); 
}
 
/* Bottom */
.tooltip.bottom .txt {
    top:25px;
    left:-10px;
}
 
.tooltip.bottom .txt:before {
    top:-5px;
    left:10px;
    border-left:5px solid transparent;
    border-right:5px solid transparent; 
    border-bottom:5px solid rgba(0,0,0,0.8); 
}
 
/* Left */
.tooltip.left .txt {
    top:-10px;
    right:20px;
}
 
.tooltip.left .txt:before {
    top:10px;
    right:-5px;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent; 
    border-left:5px solid rgba(0,0,0,0.8); 
}


/*========================================*/
/* image area marking */
/*========================================*/
.im_area {
    background:#456;
    display:block;
    height:55%;
    opacity:0;
    position:absolute;
    width:320px;
}
#area_step1{
	left: 15%;
	width: 14%;
}
#area_step2{
	left:29%;
	width: 14%;
}
#area_step3{
	left:56%;
	width: 14%;
}
#area_res{
	left:30%;
	top:75%;
	height: 25%; 
	width: 20%;
}

.im_area:hover > .area_show{
   /*opacity:0.4;*/
}
.area_show{
	background-color:#456;
}


.div_nav{
	position: absolute; 
	/*top: calc(6% + 45px  + 1%); */
	top: 4em;
	/*left: 75%;*/
	opacity:0.2; 
	right:10px;
	float:right;
	/*max-width:17%;*/
	transition:opacity linear 0.15s;
	border: 1px;
	border-style:solid;
	font-size: 0.8em;	
	background-color:rgba(255,255,255,0.2);
}

.div_nav ol{
	margin-right:5px;
}

.div_nav:hover {
	opacity:0.9;
	z-index: 1;
	background-color:rgba(255,255,255,0.9);
}
.a_nav{
	transition:color linear 0.1s;
}
.a_nav:hover{
	color:red;
}