h2{
    color: yellow;}

.button
{
	padding: 3px 10px;
    
}

.button .border
{
	border: 1px solid #a0a0a0;
}

.button .border.side.left
{
	border-right: 1px solid #444444 !important;
}

.button .border.side.center
{
	border-right: 1px solid #444444 !important;
	border-left: 1px solid #ffffff !important;
}

.button .border.side.right
{
	border-left: 1px solid #ffffff !important;
}

.button .background.main
{
	background: #eeeeee;
}

.button .background.top
{
	background: #f3f3f3;
}

.button .background.bottom
{
	background: #e3e3e3;
}

.button .border.hover
{
	border-color: #666666;
}

.button .border.down
{
	border-color: black;
}

.button .background.top.down
{
	background: #e3e3e3;
}

.button .background.bottom.down
{
	background: #f3f3f3;
}

.button.active
{
	color: white;
}

.button .background.main.active
{
	background: #aaaaaa;
}

.button .background.top.active
{
	background: #a1a1a1;
}

.button .background.bottom.active
{
	background: #b2b2b2;
}

.button .border.active
{
	border-color: #222222;
}

.button .border.side.center.active, .button .border.side.right.active
{
	border-left: 1px solid #cccccc !important;
}

.button .dropdown
{
	border: 1px solid #a0a0a0;
	color: black;
	background: white;
	padding: 4px;
	list-style: none;
}

.button .dropdown.active li
{
	background: #ffffff;
	color: black;
}

.button .dropdown.active li:hover
{
	background: #eeeeee;
}
#container
{
    background-image: url(../images/graphics/background.jpg);
    width: 100%;
    height: 100%;
    position: absolute;
    /**background-color: orange;**/
    overflow:hidden;
    background-position: top center;
    background-repeat: repeat;
}
#title{
    
    background-color: #666666;
    
    top: 0px;
    left: 0px;
    width: 100%;
    height: 5%;
   
    color: #ff00ff;
    font-style: italic;
    font-size: 18px;
    padding-right: 1%;
    padding-left: 1%;
    padding-bottom: 1%;
    padding-top: 1%;
    
    position: relative;
    display: none;
}
#nav{
    
    top: 0%;
    left: 0%;
    width: 100%;
    height: 3%;
    background-color: orange;
    position: relative;
    display:none;
}
#control{
    position: relative;
    top:0%;
    left:0%;
    width:4%;
    height:92%;
    background-color: teal;
    padding-left: 4%;
    padding-top: 1%;
}
.floorplan{
    
    top: 25px;
    background-image: url(../images/ipad/graphics/Nfloorplan.gif);
    width: 90%;
    height: 90%;
    left: 150px;
    background-repeat: no-repeat;
    background-position: left top;
   /* backkground-color:purple;*/
    position: absolute;
    
}

.control{
    position: absolute;
    top:0px;
    left:17px;
    width:60px;
    height:721px;
   /* background-color: teal;*/
    
    vertical-align: middle;
}

#footer{ 
    /*background-color: white;*/
    bottom: 70px;
    left: 17px;
    width: 95.90%;
    height: 2%;
    color: #ff00ff;
    font-style: italic;
    font-size: 18px;
    padding-right: 1%;
    padding-left: 0%;
    padding-bottom: 1%;
    padding-top: 1%;
    position: absolute;
}


/******************** These are containers for the Jflow to slide ************/
/*****************************************************************************/
#slider-wrap{
    top: 15px; /*25px;*/
    width: 940px; /*90%;*/
    height: 90%;
    left: 16px;/*150px;*/
    position: absolute;
    
    
    /*
    width: 900px; 1024
    height: 90%;755
    position: absolute;
    top: 25px;
    left: 17px;
    */
}
#slides{
    /*width: 900px;
    height: 755px;
    position: absolute;
    background-color: blue;
    */
    top: 0px; /*25px;*/
    width: 940px;
    height: 100%;
    /*left: 16px;*/
    position: absolute;
    
}
#lightControl-Slide{
    height: 100%;
    width: 940px;
    /*height: 755px;*/
    position: absolute;
}
#SecurityControl-Slide{
    width: 940px;
    height: 100%;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
}
#CCTVControl-Slide{
   
    width: 940px;
    height: 100%;
    position: absolute;
}
#RSS1-Slide{}
#RSS2-Slide{}
#KFL-Slide{}
#MusicPlayerSlide{}
#MoviePlayerSlide{}
#HelpSlide{}

.on{background-image: url(../images/icons/lightbulbon.png);}
.off{background-image:url(../images/icons/lightbulboff.png);}

  
   
.nav-wrap{display:none;}

.hidden
{
display: none;
}

/** small button is rounded and gleams **/
.buttonSmall-grad {
   border-top: 1px solid #96d1f8;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   padding: 5px 5px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 14px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   
   position: relative;
   overflow: hidden;
   display: inline-block;
   width: 50px;
   height: 40px;
   margin-top: 5px;
    text-align: center;
    direction: ltr;
}

.buttonSmall-grad:before {
   content: "";
   width: 200%;
   height: 200%;
   position: absolute;
   top: -200%;
   left: -225%;

   background-image: -webkit-linear-gradient(135deg, rgba(255,255,255,0), rgba(255,255,255,0.6), rgba(255,255,255,0));
   background-image: -moz-linear-gradient(135deg, rgba(255,255,255,0), rgba(255,255,255,0.6), rgba(255,255,255,0));  
    
     -moz-transition: all 0.5s ease-out;
       -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
      -ms-transition: all 0.5s ease-out;

}
.buttonSmall-grad:hover:before {
  top: 200%;
  left: 200%;   
}

#top, #bottom, #left, #right {
	position: fixed;
        
}
#left, #right {
	top: 0; bottom: 0;
	width: 15px;
}
#left { 
    left: 0; 
}

#right { 
    right: 0; 
}

#top, #bottom {
    left: 0; right: 0;
    height: 15px;
}

#top { 
    top: 0; 
}

.Secure-Red{
    background:#cc0000
}

.Secure-Blue{
    background:#0099cc;
}

.Secure-Green{
    background :#8EBF45;
}
		
#bottom { 
    bottom: 0; 
}