BODY {background-color: #011538;/* margin: 1%; */height:100%;width: 100%;}



/***888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888***/

@media screen and (min-width: 1000px)

{

	BODY {  background: #1c3c6f url(http://www.bayunderwater.co.nz/images/style/body_bg.jpg) top center no-repeat ; 

	margin:0; 

	height:100%; 

	width:100%;

	}

}

/***888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888***/



BODY, TABLE {font-family:Verdana, Arial, Helvetica, sans-serif;font-size:12px;line-height: 18px;color:  #093471;}



A{ color: #093471;}



a:focus {

outline:none;

}

@media screen and (max-width: 1000px)

{

	BODY, TABLE, td{

	display:block;

	width:100%;

}

}



INPUT,TEXTAREA {font-family:Verdana, Arial, Helvetica, sans-serif;color:#093471;}



/*------------ Template Specific Rules ----------------------------------------------------------*/



h1,

h1.contentPageTitle

{

font-size: 18px;

font-weight: normal;

margin: 0px 0px 15px;

padding: 0;

}



h2

{

font-size: 14px;

font-weight: bold;

margin: 8px 0px 0px;

padding: 0;

}



/* Page Contatiner Rules */



#container

{

margin-left:auto;

margin-right:auto;

width:100%;

text-align:left;



}



#bgContainer

	{

	width:100%;

	float:left;

	position:relative;

	



	}



/***888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888***/

@media screen and (min-width: 1000px)

{

	#bgContainer

	{

	width:100%;

	float:left;

	position:relative;

	 background: #1c3c6f url(http://www.bayunderwater.co.nz/images/style/body_bg.jpg) top center no-repeat ;



	}

}

/***888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888***/

#header

{float: left;position: relative;width: 100%;height: 204px;/*background: url(http://www.bayunderwater.co.nz/images/style/header_bg.png) top center no-repeat ;*/background: url(http://www.bayunderwater.co.nz/images/style/mobile_bg2.jpg) top center no-repeat;}

@media screen and (max-width: 430px)

{

#header img

{

	display:block;

	position:relative;

	left:-120px;

	overflow:hidden;

}

}

@media screen and (min-width: 430px)

{

#header

{background: url(http://www.bayunderwater.co.nz/images/style/mobile_bg2.jpg) top center no-repeat;background-size: cover;float: left;position: relative;width: 100%;height: 204px;/*background: url(http://www.bayunderwater.co.nz/images/style/header_bg.png) top center no-repeat ;*/background-color: #07387f;border-radius: 0px 0px 15px 15px;}



}

@media screen and (min-width: 1000px)

{

	#header

	{

		width:1056px;

		background: none;	

	}

	#bgContainer

	{

		width:1056px;

	}

	#container

	{

		width:1056px;

	}

}



#header ul

{

position: absolute;

bottom: -5px;

margin: 0;

padding: 0;

list-style: none;



}

/***888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888***/

@media screen and (min-width: 1000px)

{

	#header ul

	{

	position: absolute;

	bottom: 0;

	right: 3px;

	margin: 0;

	padding: 0;

	list-style: none;

	}

}

/***888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888***/

#header ul li

{

float: left;

position: relative;

display: inline-block;

height:38px;

}





#header ul li a

{

display:block;

height:38px;

padding:0 0px 0 8px;

font-size: 14px;

line-height:32px;

color: #FFF;

text-decoration: none;

}



#header ul li.home a

{

width:55px;

background: url(http://www.bayunderwater.co.nz/images/nav/home.png) no-repeat;

}

#header ul li.gallery a

{

width:55;

background: url(http://www.bayunderwater.co.nz/images/nav/gallery.png) no-repeat;

}

#header ul li.services a

{

width:60px;

background: url(http://www.bayunderwater.co.nz/images/nav/services.png) no-repeat;

}

#header ul li.health a

{width: 150px;background: url(http://www.bayunderwater.co.nz/images/nav/health.png) no-repeat;}

#header ul li.equipment a

{

width:75px;

background: url(http://www.bayunderwater.co.nz/images/nav/equipment.png) no-repeat;

}

#header ul li.contact a

{width: 107px;background: url(http://www.bayunderwater.co.nz/images/nav/contact.png) no-repeat;}

/***888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888***/

@media screen and (min-width: 1000px) {
	

#header ul li.gallery a

{

width:61px;

background: url(http://www.bayunderwater.co.nz/images/nav/gallery.png) no-repeat;

}

#header ul li.services a

{

width:71px;

background: url(http://www.bayunderwater.co.nz/images/nav/services.png) no-repeat;

}

#header ul li.health a

{

width:125px;

background: url(http://www.bayunderwater.co.nz/images/nav/health.png) no-repeat;

}

#header ul li.equipment a

{

width:90px;

background: url(http://www.bayunderwater.co.nz/images/nav/equipment.png) no-repeat;

}

#header ul li.contact a

{

width:100px;

background: url(http://www.bayunderwater.co.nz/images/nav/contact.png) no-repeat;

}

}

/***888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888***/

/*******************************************************************************/



@media screen and (max-width: 1000px) {





    #navigation a#pull {

    position: absolute;

    top: 130px;

    right: 10px;

    display: inline-block;

    width: 45px;

    height: 45px;

    background: #fff;

    border-radius: 100%;

    padding: 0;

    z-index: 1000;

    }

    #navigation a#pull:after {

    content:"";

    background: url(http://www.bayunderwater.co.nz/images/style/nav-icon.png) center no-repeat;

    background-size: 47% auto;

    width: 45px;

    height: 45px;

    display: inline-block;

    position: absolute;

    right: 0px;

    top: px;

    }

    #navigation {

    border-bottom: 0;

    }

    #navigation ul {

    display: none;

    height: auto;

    padding: 0;

    margin: 0px 0px 0px 0px;

    width: 100%;

    position: absolute;

    z-index: 100;

    top : 36px; 

    }

	#services #navigation ul{

		top : 203px; 

	}

    #home #navigation ul {

    position: relative;

    }
	
	#home #content p:last-child{
		text-align: center !important;
	}

    #navigation li {

    display: block;

    float: none;

    width: 100%;

    }

    #navigation li a {

    color: #545454 !important;

    display: block;

    font-size: 18px !important;

    line-height: 48px;

    text-decoration: none;

    text-indent: 0px;

    text-shadow: none;

    font-weight: normal !important;

    }



    #navigation li a:hover {

    background: transparent !important;

    color: #545454 !important;

    }

    a.homeLink

    {

    font-size: 18px !important;

    }

    #navigation ul li {

    width: 100% !important;

    margin: 0;

    padding: 0;

    height: auto !important;

    background: #fff;

    border-bottom: 1px solid #ccc;

    }

    #navigation a{

        margin-top:20px;

    }



}

/*------------------------------------------------------------------------------*/

#header ul li a:hover {
	color: #68a6ff;
}



#header h2

{

position: absolute;

bottom: 10px;

right: 22px;

margin: 0;

padding: 0;

font-size: 18px;

font-style: italic;

font-weight: normal;

color: #d2dce8;

}



.siteSearch	{position: absolute;right:0;top:15px;}

.siteSearch{

display:none;

}

.siteSearch .formInput	{

position: relative;

float:right;

width:224px;

color:#1b58a3;

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:12px;

border:0;


}

/***888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888***/

@media screen and (min-width: 1000px)

{

	.siteSearch	{display: block; position: absolute;right:55px;top:15px;}

	.siteSearch .formInput	{

	position: relative;

	float:left;

	width:224px;

	color:#1b58a3;

	font-family:Verdana, Arial, Helvetica, sans-serif;

	font-size:12px;

border:0;

}

}

/***888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888***/

.siteSearch .formButton	{
	float:left;
	width:23px;
	height:23px;
	cursor:pointer;
	border:0;
	position: absolute;
	left: -53px;
	top: -2px;
}



#galleryScroller

{float: left;position: relative;height: auto;width: 100%;background: none;}

/*----------------------------------------------------------*/

@media screen and (max-width: 1000px)

{

	

	#galleryScroller

	{

	/* margin-left: 50%; */

	/* left: -169px; */

	}

}

/*----------------------------------------------------------*/



/*----------------------------------------------------------*/

@media screen and (min-width: 1000px)

{

	#galleryScroller

	{

	width: 1058px;

	float: left;

position: relative;

height: 254px;



margin: 3px 0px 0px 20px;

background: none;

	}

}

/*----------------------------------------------------------*/

#headerLogo	{z-index:999;position: relative;top:15px;left:0px;margin-left: 5px;}



#galleryScroller img

{

margin: 0px 0px 0px 0px;

}

/*----------------------------------------------------------*/

@media screen and (max-width: 1000px)

{



#galleryScroller #galleryMask

{position: absolute;

display: none !important;

top: -375px;

left: 0px;

margin: 0;

width: 100%;/* height:280px; */}



}

/*----------------------------------------------------------*/

@media screen and (min-width: 1000px)

{

	#headerLogo	{

z-index:999;

position:absolute;

top:15px;

left:19px;

	}

#galleryScroller #galleryMask

{



display:block;

position: absolute;

top: 0px;

left: 0px;

margin: 0;

}

#headerLogo	{

top:60px;

left:19px;

}

}

/*----------------------------------------------------------*/



#content

{min-height: 200px;float: left;position: relative;width: 94%;padding: 0px 0px;border-radius: 15px;background-color: #ffffff;/* margin: 1%; */margin-top: 1%;/* margin-left: 1%; *//* margin-right: 1%; */margin-bottom: 1%;padding-left: 3%;padding-right: 3%;}

@media screen and (min-width: 1000px)

{

	#content

	{

	margin:0;

	padding:0;

	background: url(http://www.bayunderwater.co.nz/images/style/content_bg.png) repeat;

	min-height: 200px;

	float: left;

	position: relative;

	width: 976px;

	padding: 0px 40px;

	border-radius: 15px;

	top: -0px;

	}

}

/*----------------------------------------------------------*/

ul#subMenu

{

float: left;

position: relative;

width: 220px;

clear: both;

margin: 7px 0px 0px 0px;

padding: 0;

list-style-type:none;

}



ul#subMenu li

{

margin: 0;

padding: 0;

}



#subMenu li.top a

{

font-weight: normal;

font-style: normal;

font-size: 18px;

color: #093471;

padding: 3px 0px 3px 3px;

}



#subMenu li a

{

display: block;

text-decoration: none;

font-style: italic;

color: #666;

padding: 3px 0px 3px 3px;

font-size: 11px;

}



#subMenu li a.menuSecondarySelected

{

color: #093471;

}





#subMenu li a:hover

{

text-decoration: underline;

}



#rightContent

{

border-left: 1px solid #ccc;

float: right;

position: relative;

width:100%;

padding: 0px 0px 0px 30px;

margin: 10px 0px;

}



#footer

{float: left;width:100%;height:80px;background-color: #07387f;border-radius:15px;margin-left:0px;padding-top: 10px;}

#footer p

{

width: 100%;

display: block;

margin: 0;

padding: 0;

color: #b6c3d5;

font-size: 11px;

}

/*----------------------------------------------------------*/

@media screen and (min-width: 1000px)

{

	#rightContent

	{

	width:725px;

	}

	#footer

	{

	float: left;

	width:1056px;

	height:76px;

	background: url(http://www.bayunderwater.co.nz/images/style/bg_footer.png) no-repeat;

	margin-left:0px;

	}

	#footer p

	{

		width: 40%;

	}

}

/*----------------------------------------------------------*/





#footer p a

{

color: #b6c3d5;

text-decoration:none;

}

#footer p a:hover

{

text-decoration:underline;

}



#footer p.left

{





text-align: center;

padding: 0px 0px 0px 0x;



}



#footer p.right

{



text-align: center;

padding: 0px 0px 0px 0px;

}





#topDivider

{

display:none;



}





#bottomDivider

{

display:none;

}

/*----------------------------------------------------------*/

@media screen and (min-width: 1000px)

{

	#footer p.right

	{

	float: right;

	text-align: right;

	padding: 17px 40px 0px 0px;

	}

	#footer p.left

	{

	float: left;

	text-align: left;

	padding: 17px 0px 0px 40px;

	}



	#topDivider

	{

	display:block;

	float: left;

	position: relative;

	width:1056px;

	height: 38px;

	background: url(http://www.bayunderwater.co.nz/images/style/small_divider.png) no-repeat left bottom ;

	}

	#bottomDivider

	{

	display:block;

	float: left;

	position: relative;

	width:1056px;

	height: 24px;

	background: url(http://www.bayunderwater.co.nz/images/style/large_divider.png) no-repeat ;

	}

}

/*----------------------------------------------------------*/

#formTable

{

background: #347abf;

position: relative;

width:100%;

;

}

@media screen and (min-width: 1000px)

{

	#formTable

{

background: #347abf;

position: absolute;

top: 10px;

right: 22px;

padding: 10px;

width:333px;

}

}

td.labelHorizontal

{

font-size: 11px;

vertical-align: top;



}



td.valueHorizontal input,

td.valueHorizontal textarea

{

font-size: 11px;

vertical-align: top;

color: #000;

padding: 2px;

}



span.required

{

margin: 0px 0px 0px -7px ;

}



td.buttonBar

{

text-align: right;

}



td.buttonBar input

{

background: #1D3C6B;



color: #FFF;

}



td.buttonBar input:hover

{

background: #FFF;

color: #1D3C6B;

cursor: pointer;

}



#sliderContainer

{position: relative;float: left;top: 0;left: 0px;width: 98%;margin-left: 1%;margin-right: 1%;margin-top: 1%;}



	#leftSliderNav {

	position:relative;

	float:left;

	width:33px;

	height:57px;

	text-align:left;

	margin: 60px 0px 0px -43px;

	}



	#rightSliderNav {

	position:relative;

	float:right;

	width:33px;

	height:57px;

	text-align:left;

	margin: 60px 0px 0px -0px;

	

	top: -225px;

	}



	#rightSliderNav img {

	display:none;

	}



	#leftSliderNav img {

	display:none;

	}





/* Large panel slider */

.stepcarousel {float: left;position: relative; /*leave this value alone*/overflow: scroll; /*leave this value alone*/width: 100%; /*Width of Carousel Viewer itself*/height: auto; /*Height should enough to fit largest content's height*/margin: 0px 0px 0px 0px;padding: 0;}

/*----------------------------------------------------------*/

@media screen and (min-width: 1000px)

{



#sliderContainer

{

	margin:0;

}

	#rightSliderNav{

		display:block;

	}

	.stepcarousel {float: left;position: relative; /*leave this value alone*/overflow: scroll; /*leave this value alone*/width: 100%; /*Width of Carousel Viewer itself*/height: 254px; /*Height should enough to fit largest content's height*/margin: 0px 0px 0px 0px;padding: 0;}

	#rightSliderNav img {

	display:block !important;

	position:absolute;

	top:40px;

	right: 0px;

	border: none;

	}



	#leftSliderNav img {

	display:block;

	position:absolute;

	top:40px;

	left: 0px;

	border: none;

	}

	#sliderContainer

	{

	width:1088px;

	

	}

	.stepcarousel

	{

	width:1021px;

	}

}

/*----------------------------------------------------------*/

.stepcarousel .belt {position: relative; /*leave this value alone*/left: 0;top: 0;}

/*----------------------------------------------------------*/

@media screen and (max-width: 1000px)

{

	.stepcarousel .belt {

	width: 100% !important;

	position: relative;

	float: left;

	}

}



.stepcarousel .panel {float: left; /*leave this value alone*/overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*//* margin: 0 7px 0px 0px; */ /*margin around each panel*/padding: 0px;width: 333px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */text-align: center;}





.stepcarousel .panel img {

float: left; /*leave this value alone*/

overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/

margin: 0 0px 0px 0px; /*margin around each panel*/

padding: 0px ;

width: 333px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */

text-align: center;

}



.moduleItemGallery .title,

.moduleItemGallery .back,

.moduleItemEquipment .title,

.moduleItemEquipment .back

{

display: none;

}



.moduleItemEquipment .item,

.moduleItemGallery .item

{

float: left;

margin: 0px 10px 10px 0px;

}



/*----------------------------------------------------------*/

@media screen and (max-width: 1000px)

{

	#calloutSlider{

		overflow:visible !important;

	}

.stepcarousel .panel {

	display:none;

}

.stepcarousel .panel:nth-of-type(1) {

	display: inline-block;

	float:left !important;

	position:relative !important;



	width: 49.5% !important;

	left:auto !important;

	margin-right:1%;

}

.stepcarousel .panel:nth-of-type(2) {

	display: inline-block;

	float:left !important;

	position:relative !important;

	width: 49.5% !important;

	left:auto !important;

}

#galleryScroller img{

	width:100% !important;

	display:block !important;

	float:left !important;

	position: relative !important;

	overflow:visible !important;

	left:auto !important;

}

}

@media screen and (max-width:1000px)

{

	td.valueHorizontal input, td.valueHorizontal textarea{

		width:96%;

		



	}

	#emailForm .formHeaderText table tbody{

		display:block;

		position:relative;

		text-align:center;

		margin-left: auto;

		margin-right: auto;



	}

	#emailForm .formHeaderText table tbody tr{

		display:block;

		position:relative;

		text-align:center;

		margin-left: auto;

		margin-right: auto;



	}

	#emailForm #formTable{

		display:block;

		position:relative;

		text-align:center;

		margin-left: auto;

		margin-right: auto;

	}

	

	.contentPageTitle

	{

		display:block;

		position:relative;

		text-align:center;

		margin-left: auto;

		margin-right: auto;

	}

	#mf_text_field153

	{

	}

}



@media screen and (min-width:600px)

{

	.formHeaderText{

		display:inline;

		width:45%;

	}

#formTable{

	

	width:55%;

}

}

/*----------------------------------------------------------*/

@media screen and (max-width:1000px)

{

h1, h1.contentPageTitle{

margin-top: 20px;

}

#rightSliderNav{

	display:none;

}

}



@media screen and (min-width:1000px)

{

#formTable

{

background: #347abf;

position: absolute;

top: 10px;

right: 22px;

padding: 10px;

width:333px;

}

}

#home #content img{
	margin: 0px 20px;
}
@media (max-width: 767px){
	#home #content img{
		margin: 20px 20px;
	}
}