/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 1;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}


*{ margin:0px; padding:0px;}



/* demo page styles */
body {
    background:#000000;
    margin:0;
    padding:0;
    font-family: Helvetica,Arial,sans-serif;
    color:#ffffff;
    text-align:center;
    
}

#hdr {
  		overflow: auto;
  		color:#FE2626;
  		padding: 1px;
  		text-align: left;
  		font-size:13px;
  		visibility: hidden;
}

#mytitle {
  margin-left: 50px;
  margin-top: 21px;
  padding: 1px 18px;
  }

#subject {
  	visibility: hidden;
  }
  
#mylogo {
 float: left;
 width:50px;
 }



.space {
	
    width:700px;
    height:36px;
    position:relative;
    top:0;
}

.navigation {
	 
    width:30px;
    height:200px;
    position:absolute;
    margin-left:54%;
    margin-top:30%;
}

/* navigation menu styles - main styles */
ul.navi {
    position:absolute;
    
    z-index:100;
    padding:0;
    margin:0 0 0 0;
    list-style:none;
    width:auto;
    height:30px;
}
ul.navi > li {
    width:140px;
    height:30px;
    position:absolute;
    right:0;
    top:0; 

    -moz-transition: -moz-transform 0.5s ease-in-out;
    -ms-transition: -ms-transform 0.5s ease-in-out;
    -o-transition: -o-transform 0.5s ease-in-out;
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
}
ul.navi a {
    background:#000000;
    border-style:solid;
    border-color:#000000;
    display:block;
    width:160px;
    height:30px;
    position:absolute;
    left:0;
    top:0;
    line-height:30px;
    text-align:center;
    text-decoration:none;
}
ul.navi a img {

    border:0;
}
ul.navi a span {
    position:absolute;
    left:5px;
    font-size:15px;
    font-weight:bold;
    color:#fff;
}

#s1:hover{color:#FA541D;}
#s2:hover{color:#FA541D;}
#s3:hover{color:#FA541D;}
#s4:hover{color:#FA541D;}


/* top line - hover styles */
ul.navi:hover {
    height:100px;
}
ul.navi:hover li#n5 {
    -moz-transform: translatey(0px);
    -ms-transform: translatey(0px);
    -o-transform: translatey(0px);
    -webkit-transform: translatey(0px);
    transform: translatey(0px);
    
}
ul.navi:hover li#n4 {
    -moz-transform: translatey(35px);
    -ms-transform: translatey(35px);
    -o-transform: translatey(35px);
    -webkit-transform: translatey(35px);
    transform: translatey(35px);
}
ul.navi:hover li#n3 {
    -moz-transform: translatey(70px);
    -ms-transform: translatey(70px);
    -o-transform: translatey(70px);
    -webkit-transform: translatey(70px);
    transform: translatey(70px);
}
ul.navi:hover li#n2 {
    -moz-transform: translatey(105px);
    -ms-transform: translatey(105px);
    -o-transform: translatey(105px);
    -webkit-transform: translatey(105px);
    transform: translatey(105px);
}
ul.navi:hover li#n1 {
    -moz-transform: translatey(140px);
    -ms-transform: translatey(140px);
    -o-transform: translatey(140px);
    -webkit-transform: translatey(140px);
    transform: translatey(140px);
}

/* submenus - common styles */
ul.sub {
    padding:0;
    margin:0;
    list-style:none;
    width:48px;
    height:30px;
    position:absolute;
    left:0;
    top:0;
    z-index:-1;
    opacity:0;

    -moz-transition: opacity 0s linear 1s;
    -ms-transition: opacity 0s linear 1s;
    -o-transition: opacity 0s linear 1s;
    -webkit-transition: opacity 0s linear 1s;
    transition: opacity 0s linear 1s;
}
ul.sub li {
    width:48px;
    height:30px;
    position:absolute;
    left:0;
    top:0;
    z-index:-1;

    -moz-transition: -moz-transform 0.5s ease-in-out 0.5s;
    -ms-transition: -ms-transform 0.5s ease-in-out 0.5s;
    -o-transition: -o-transform 0.5s ease-in-out 0.5s;
    -webkit-transition: -webkit-transform 0.5s ease-in-out 0.5s;
    transition: transform 0.5s ease-in-out 0.5s;
}

/* submenus - hover styles */
ul.navi > li:hover ul {
    opacity:1;

    -moz-transition: opacity 0s linear 0.5s;
    -ms-transition: opacity 0s linear 0.5s;
    -o-transition: opacity 0s linear 0.5s;
    -webkit-transition: opacity 0s linear 0.5s;
    transition: opacity 0s linear 0.5s;
}
ul.navi li:hover ul li.l {
    -moz-transform: translatex(-70px) translatey(60px);
    -ms-transform: translatex(-70px) translatey(60px);
    -o-transform: translatex(-70px) translatey(60px);
    -webkit-transform: translatex(-70px) translatey(60px);
    transform: translatex(-70px) translatey(60px);
}
ul.navi li:hover ul li.c {
    -moz-transform: translatey(60px);
    -ms-transform: translatey(60px);
    -o-transform: translatey(60px);
    -webkit-transform: translatey(60px);
    transform: translatey(60px);
}
ul.navi li:hover ul li.r {
    -moz-transform: translatex(70px) translatey(60px);
    -ms-transform: translatex(70px) translatey(60px);
    -o-transform: translatex(70px) translatey(60px);
    -webkit-transform: translatex(70px) translatey(60px);
    transform: translatex(70px) translatey(60px);
}

/* responsive images */
img {
  max-width: 100%;
  margin: 0px auto;
}


@media all and (min-width: 210px) {

  #hdr {
  		overflow: auto;
  		color:#FE2626;
  		background: transparent;
  		font-weight:bold;
  		padding: 1px;
  		text-align: left;
  		font-size:15px;
  		visibility: visible;
  }


}