/* ==========================================================================
   The Grocery Store Project custom css styles
   ========================================================================== */

nav {
 background-color: #ffffff; 
 opacity: 0.90;
 border: solid 1px #e7e7e7;
 display: block;
 height: 43px; 
 overflow: auto;
 position: fixed;
 bottom: 0px; 
 font-size: 20px;
 width: 100%;
 z-index: 1048;
  
 transition: bottom 0.3s ease-in-out 0s;
 -webkit-transition: bottom 0.3s ease-in-out 0s;
 -moz-transition: bottom 0.3s ease-in-out 0s;
 -o-transition: bottom 0.3s ease-in-out 0s;
}

#myContainer { position:absolute; width:100%; z-index:0; height:100%;  }
#navigatorBackground { opacity: 0.75!important; }
#navigatorImageContainer img { opacity: 0.90!important; }
#NavigatorDisplay { border: 1px solid #dddddd!important; z-index:100;}
#navigatorRectangle {z-index:10000;}
#topMenu { position:absolute;top:0px;left:0px;width:100%; border-bottom: 1px solid #dddddd; padding:13px; z-index:1048; background-color:white;  }
.col-xs-6 {padding-left:0px; padding-right:0px;}

#zoom_out { border-radius: 0px; border-right:0px; border-color:#dddddd;}
#zoom_in { border-radius: 0px;border-color:#dddddd;}

.splashbodytextLarge {
 	font-size:20px;
 	color:white;
 	font-weight:200;
}

.splashbodyheadingLarge {
 	font-size:42px;
 	color:white; /*color:#a39b8c;*/
 	font-weight:300;
}

.splashbodytextSmall {
 	font-size:14px;
 	color:white;
 	font-weight:200;
}

.splashbodyheadingSmall {
 	font-size:24px;
 	color:white;
 	font-weight:300;
}

.modal .modal-body {
   max-height: 640px;
	overflow-y: auto;		
		border:none;
}

#myModalInstructions .modal-content{
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
}

#myModalInstructions .modal-content {
	background-color: transparent;	
	border:none;
}

#myModalInstructions .modal-body {
	
	border:none;
	text-align:center;
}

.modal-backdrop.in
 {
 	z-index:1049;
	background-size: 100% 100%;

}

#myModalInstructions { margin-top:68px;}
#myModal { margin-top:68px;z-index:20000!important;}

#modalsplash .modal .modal-dialog { max-width: 600px; }

/* ==========================================================================
	About button styling 136 x 33 px
   ========================================================================== */

#aboutBtn { position:absolute; top:66px; right:23px; z-index:100; border-radius: 0px;padding: 3px 7px;font-size:13px;width:120px;height:32px;}

.btn-about { 
	color: #ffffff; 
	background-color: #d5d5d5; /*#c4b39a; */
	border-color: #d5d5d5;
} 

.btn-about:hover { 
  color: #ffffff; 
  background-color: #c6c6c6; /*#9E8A72; */
  border-color: #c6c6c6; 
  background-image: none; 
} 

.btn-about.disabled, .btn-about[disabled], fieldset[disabled] .btn-about, .btn-about.disabled:hover, .btn-about[disabled]:hover, fieldset[disabled] .btn-about:hover, 
.btn-about.disabled:focus, .btn-about[disabled]:focus, fieldset[disabled] .btn-about:focus, .btn-about.disabled:active, .btn-about[disabled]:active, 
fieldset[disabled] .btn-about:active, .btn-about.disabled.active, .btn-about[disabled].active, fieldset[disabled] .btn-about.active { 
  background-color: #d5d5d5;
  border-color: #d5d5d5;
} 

.btn:focus, .btn:active:focus {
	outline: 0;
	border-color: #d5d5d5;
}

/* ==========================================================================
	Intro button styling 103 x 33 px
   ========================================================================== */

#introBtn { position:absolute; top:107px; right:23px; z-index:100; border-radius: 0px;padding: 3px 7px;font-size:13px;width:52px;height:32px;}

.btn-intro { 
	color: #ffffff; 
	background-color:#d5d5d5;
	border-color:#d5d5d5;
} 

.btn-intro:hover { 
  color: #ffffff; 
  background-color: #c6c6c6; 
  border-color: #c6c6c6; 
  background-image: none; 
} 

.btn-intro.disabled, .btn-intro[disabled], fieldset[disabled] .btn-intro, .btn-intro.disabled:hover, .btn-intro[disabled]:hover, fieldset[disabled] .btn-intro:hover, 
.btn-intro.disabled:focus, .btn-intro[disabled]:focus, fieldset[disabled] .btn-intro:focus, .btn-intro.disabled:active, .btn-intro[disabled]:active, 
fieldset[disabled] .btn-intro:active, .btn-intro.disabled.active, .btn-intro[disabled].active, fieldset[disabled] .btn-intro.active { 
  background-color: #d5d5d5;
  border-color: #d5d5d5;
} 

.btn-intro:focus, .btn-intro:active:focus {
	outline: 0;
	border-color: #d5d5d5;
}

/* ==========================================================================
	Intro button styling 103 x 33 px
   ========================================================================== */

#introCloseSplash { border-radius: 0px;padding: 3px 7px;font-size:14px;width:103px;height:33px;margin-top:2px;}

.btn-closesplash { 
	color: #ffffff; 
	background-color: #1e1e1e; 
	border-color: #1e1e1e; 
} 

.btn-closesplash:hover { 
  color: #ffffff; 
  background-color: black; 
  border-color: black; 
  background-image: none; 
} 

.btn-closesplash.disabled, .btn-closesplash[disabled], fieldset[disabled] .btn-closesplash, .btn-closesplash.disabled:hover, .btn-closesplash[disabled]:hover, fieldset[disabled] .btn-closesplash:hover, 
.btn-closesplash.disabled:focus, .btn-closesplash[disabled]:focus, fieldset[disabled] .btn-closesplash:focus, .btn-closesplash.disabled:active, .btn-closesplash[disabled]:active, 
fieldset[disabled] .btn-closesplash:active, .btn-closesplash.disabled.active, .btn-closesplash[disabled].active, fieldset[disabled] .btn-closesplash.active { 
  background-color: #1e1e1e; 
  border-color: #1e1e1e;  
} 

.btn-closesplash:focus, .btn-closesplash:active:focus {
	outline: 0!important;
	border-color: #1e1e1e!important; 
}

/* ==========================================================================
	Intro button styling 103 x 33 px
   ========================================================================== */

#introCloseAboutPopup { border-radius: 0px;padding: 3px 7px;font-size:14px;width:103px;height:33px;}

.btn-about-popup { 
	color: #ffffff; 
	background-color:  #aaaaaa; 
	border-color:  #aaaaaa; 
} 

.btn-about-popup:hover { 
  color: #ffffff; 
  background-color: #888888;
  border-color: #888888;
  background-image: none; 
} 

.btn-about-popup.disabled, .btn-about-popup[disabled], fieldset[disabled] .btn-about-popup, .btn-about-popup.disabled:hover, .btn-about-popup[disabled]:hover, fieldset[disabled] .btn-about-popup:hover, 
.btn-about-popup.disabled:focus, .btn-about-popup[disabled]:focus, fieldset[disabled] .btn-about-popup:focus, .btn-about-popup.disabled:active, .btn-about-popup[disabled]:active, 
fieldset[disabled] .btn-about-popup:active, .btn-about-popup.disabled.active, .btn-about-popup[disabled].active, fieldset[disabled] .btn-about-popup.active { 
  background-color: #aaaaaa; 
  border-color: #aaaaaa; 
} 

.btn-about-popup:focus, .btn-intro:active:focus {
	outline: 0!important;
	border-color: #aaaaaa!important; 
}