/* Media Query for Viewports using min options *************************/

@media (min-width: 602px) {
  #logo  img {
	display: block;
	width:50%; 
	
	/*margin-left: auto;
	margin-right: auto;*/
	
		
	}



    #commonHeader #logo a {
    position: absolute;
    top: -20px;
    margin-left: 5px;
    width: 230px;
    height: 85px;
}

}



@media (min-width: 610px) {

  #logo  img {
	display: block;
	width:100%;
	/* width:40%; HS updated to ensure logo is correct size for thie view */
	/*margin-left: auto;
	margin-right: auto;*/
	
		
	}


  #commonHeader #logo a {
    position: absolute;
    top: -10px;
    margin-left: 5px;
    width: 230px;
    height: 85px;
}
}



@media (min-width: 640px) {
  #logo  img {
	display: block;
	/*width:25%; HS updating to display full logo */
	width:100%;
	border:none; 
	/*margin-left: auto;
	margin-right: auto;*/
	
		
	}

	
  #commonHeader #logo a {
    position: absolute;
    top: 10px;
    margin-left: 5px;
    width: 230px;
    height: 85px;
}

	/* HS  Hidiing image in logo anchor as its in background */

    #logo a img {
    	position: absolute;
    top: -999px;
}
}




/* Media Query for Viewports using max options ***********************/

@media (max-width: 980px){

DIV#main, DIV#mostOuter, DIV#commonHeader, DIV#everything {
	/* width: 97% !important; Updated to make hr span the whole screen on small screens in Microsite Branding 2018 */
	/* width: 97% !important; */
	width: 98%;
	margin:1%;
	padding:0px;
	}


#commonHeader {
	/* width:980px;  Updated to help with Responsiveness Jul 2018 */
	width:97%;
	/*height:230px; Updated to remove scroller area */
	/*height:170px; Updated to minimise and fit A-Z as div below */
	/* height:110px; Updated by HS to reflect Microsite Branding 2018 */
	height:80px;
	/* background:url(../images/images/header.jpg) 0 0 no-repeat; Updated to have new header image */
	background:url('https://apps.bedford.gov.uk/brand/ObjectivePlanning/Resources/BBC_Logo.jpg') 0 0 no-repeat;
	background-size: 30% auto;  /* HS added 250918 as logo is now in background */
	overflow:hidden;
	}


  #commonHeader #logo a {
    position: absolute;
    /* top: -12px;  HS Updated to ensure logo stays in container on iPhone 4 + mobiles */
    top: -2px;
    margin-left: 5px;
    width: 230px;
    /* height: 85px; */
    height: 85px;
    width: 100%;
}

#commonHeader #logo a img {
	position:absolute;
	/*top:-999px; */
	top:-999px;
	width:230px;
	/* height:100px; HS updated to ensure anchor area is the same size as the logo */
	height:85px;
	border:none;
	} 


}







@media (max-width: 640px){


DIV.boxtop, DIV.boxbottom, SPAN.sys_CellStyle a, DIV.sys_header_row3_text, DIV.sys_header_row3, DIV#contactUs, DIV#leftWrapper h2, DIV#footer img, IMG.aip_image, DIV.clear {
			display: none;
			}



/* styles before menu corrections DIV.boxtop, DIV.boxbottom, SPAN.sys_CellStyle a, DIV.sys_header_row3_text, DIV.sys_header_row3, DIV#contactUs, DIV#leftWrapper h2, DIV#footer img, IMG.aip_image, DIV.clear, DIV#logo a {
			display: none;
			} */



/* Updated to display cleaerer and remove HR from above logo */
DIV.clear {
			display: block;
			}
		
DIV#main, DIV#mostOuter, DIV#commonHeader, DIV#everything {
	/* width: 97% !important; Updated to make hr span the whole screen on small screens in Microsite Branding 2018 */
	/* width: 97% !important; */
	width: 98% !important;
	margin:0;
	padding:0;
	}
	
div#mostOuter {
	/* margin: 5px  Updated to reflect Responsive design for Microsites 2018  */
	margin: 1px
	}

DIV#commonHeader {
	/* background: '../images/logo.gif' !important; */
	/*background-size: 225% auto !important;*/
	height: 95px;
	}



#commonHeader {
	/* width:980px;  Updated to help with Responsiveness Jul 2018 */
	width:97%;
	/*height:230px; Updated to remove scroller area */
	/*height:170px; Updated to minimise and fit A-Z as div below */
	/* height:110px; Updated by HS to reflect Microsite Branding 2018 */
	height:100px;
	/* background:url(../images/images/header.jpg) 0 0 no-repeat; Updated to have new header image */
	background:url('https://apps.bedford.gov.uk/brand/ObjectivePlanning/Resources/BBC_Logo.jpg') 0 0 no-repeat;
	background-size: 50% auto;  /* HS added 250918 as logo is now in background */
	overflow:hidden;
	}


  #commonHeader #logo a {
    position: absolute;
    /* top: -12px;  HS Updated to ensure logo stays in container on iPhone 4 + mobiles */
    top: -2px;
    /* margin-left: 50%; */
    margin-left: 5px;
    /* height: 85px; */
    height: 85px;
    width: 285px;
}

#commonHeader #logo a img {
	position:absolute;
	/*top:-999px; */
	top:-999px;
	width:230px;
	/* height:100px; HS updated to ensure anchor area is the same size as the logo */
	height:85px;
	border:none;
	} 




	
#AtoZclear {
	margin-top: 0px;
	}

/* --- HELP AND CANCEL LINKS STYLING ONLY --- */	
	
DIV#leftWrapper, DIV#subNav, A#aip_help_link, A#aip_cancel_link {
	/* width: 99%; Updated to remove small hr on right hand side in Microsite Branding 2018 */
	width: 95%;
	background-color: #FFFFFF;
	margin: 0 auto;
		}

#subNav {		
		background-image: none !important;
		text-align: center;
		
		}
		
#subNav ul {
		background-image: none !important;
		width: 80%;
		margin: auto;
		}
						
#subNav ul li a {
	background-color: #662964 !important;
	color: #FFFFFF;
	}
				
/* --- END HELP AND CANCEL LINKS STYLING --- */
				
div#everything, BODY#aip_id_1 {
	padding: 0;
	}
	
p {
	text-align: justify;
	padding-right: 3px;
	padding-left: 3px;
	}
	
div#footer p, DIV#footerLinks, h1 {
	text-align: center;
	}
	
SPAN.aip_breadcrumb_item_label {
	border-style: none;
	background-color: #662964;
	color: #FFFFFF;
	padding: 1em;
	font-size: 1em;
	}

INPUT#FT_3284, INPUT#FT_3285, INPUT#FT_3286, INPUT#FT_3287, INPUT#FT_3288, INPUT#FT_3289 {
	width: 80%
	}
	
INPUT#PCI_565 {
	width: 35%
	}

fieldset {
	min-width: 100%
	}

} /* Close @media */


@media (max-width: 600px) {
  img 
  {
  	margin-top: -5px;
	display: block;
	/* width:56%; Updated to resize logo in landscape view on mobiles */
        width:100%;
	/*margin-left: auto;
	margin-right: auto; */
	
		
	}


    #commonHeader #logo a {
    position: absolute;
    /* top: -12px;  HS Updated to ensure logo stays in container on iPhone 4 + mobiles */
    top: 2px;
    margin-left: 5px;
    width: 230px;
    /* height: 85px; */
    height: 85px;
    width: 100%;
    /* margin-left: 50%;*/
    margin-right: 20px;
}

  } /* Close @media */


@media (max-width: 490px) {
  img {
	display: block;
	/*width:70%;HS updated to make logo fit within view*/
	width:100%;
	margin-left: auto;
	margin-right: auto;
	
		
	}

#commonHeader {
	/* width:980px;  Updated to help with Responsiveness Jul 2018 */
	width:97%;
	/*height:230px; Updated to remove scroller area */
	/*height:170px; Updated to minimise and fit A-Z as div below */
	/* height:110px; Updated by HS to reflect Microsite Branding 2018 */
	height:100px;
	/* background:url(../images/images/header.jpg) 0 0 no-repeat; Updated to have new header image */
	background:url('https://apps.bedford.gov.uk/brand/ObjectivePlanning/Resources/BBC_Logo.jpg') 50% 0 no-repeat;
	background-size: 70% auto;  /* HS added 250918 as logo is now in background */
	overflow:hidden;
	}


  #commonHeader #logo a {
    position: absolute;
    /* top: -12px;  HS Updated to ensure logo stays in container on iPhone 4 + mobiles */
    top: -2px;
    margin-left: 30%;
    /* height: 85px; */
    height: 85px;
    width: 100%;
}

#commonHeader #logo a img {
	position:absolute;
	/*top:-999px; */
	top:-999px;
	width:230px;
	/* height:100px; HS updated to ensure anchor area is the same size as the logo */
	height:85px;
	border:none;
	} 


  } /* Close @media */


@media (max-width: 380px) {

div#mostOuter {
    margin: 3px;
}
  
  #commonHeader {
	/* width:980px;  Updated to help with Responsiveness Jul 2018 */
	width:97%;
	/*height:230px; Updated to remove scroller area */
	/*height:170px; Updated to minimise and fit A-Z as div below */
	/* height:110px; Updated by HS to reflect Microsite Branding 2018 */
	height:80px !important;
	/* background:url(../images/images/header.jpg) 0 0 no-repeat; Updated to have new header image */
	background:url('https://apps.bedford.gov.uk/brand/ObjectivePlanning/Resources/BBC_Logo.jpg') 50% 0 no-repeat;
	background-size: 70% auto;  /* HS added 250918 as logo is now in background */
	overflow:hidden;
	}


  #commonHeader #logo a {
    position: absolute;
    /* top: -12px;  HS Updated to ensure logo stays in container on iPhone 4 + mobiles */
    top: -2px;
    margin-left: 5px;
    width: 230px;
    /* height: 85px; */
    height: 85px;
    width: 100%;
}

#commonHeader #logo a img {
	position:absolute;
	/*top:-999px; */
	top:-999px;
	width:230px;
	/* height:100px; HS updated to ensure anchor area is the same size as the logo */
	height:85px;
	border:none;
	} 



  } /* Close @media */

  /* additional */

 
  .divLogout {
    float: right;
    margin-top: 0px;
	color: #662964;
	font-size: 120%;
}

@media all and (max-width: 600px) {
    .divLogout {
        float: left;
        margin-top: 0px;
    }
}

.divLogout a, .divLogout a:visited {
    text-decoration: underline;
}

.divLogout a:hover, .divLogout a:active {
        color: #662964;
    }

 .breadcrumb {
	list-style-type: none;
    padding-left: 0;
    background-color: transparent;
    margin-bottom: 5px;
    color: #662964;
	 font-size: 110%;
}

.breadcrumb > li {
	color: #000;
	 display: inline;
	 font-size: 110%;
}


.breadcrumb > li a {

	color: #662964;
		font-size: 110%;
    }

.breadcrumb > li + li:before {
    color: #000;
    content: ">";
	padding: 0 5px;
	font-size: 110%;
        }


/* HS transpose table columns so that they are individual rows */

@media (max-width: 640px) {

H1, .Heading1 {
    font-size: 40PX; /* HS reduced 45px */
 }

td#ContentsContainerControl1_TableCell3, td#ContentsContainerControl1_TableCell4 
{
margin: 0.5%;
width: 100%;
display: block;

 }


td#ContentsContainerControl1_TableCell3 UL, td#ContentsContainerControl1_TableCell4 UL

{
margin: 0.2em 0 0.4em 0.2em;
word-break: break-word;

 } 



td#ContentsContainerControl1_TableCell3 UL LI, td#ContentsContainerControl1_TableCell4 UL LI
{
background-color: #ecece8;
padding-top: 4%;
padding-bottom: 4%;
padding-left: 3%;
list-style: none;
border-left: 5px solid #c783c3;

 } 


td#ContentsContainerControl1_TableCell3 UL>LI:hover, td#ContentsContainerControl1_TableCell4 UL>LI:hover
{
border-left: 5px solid #000000;

 } 

Table#ContentsContainerControl1_tblContents2 {
Width: 100% !Important;
Margin-top: 4%;
 }

div#mostOuter, DIV#commonHeader, DIV#everything {
    margin: 1%;
}

}