iPhone = 320px x 480px
iPad = 1024px × 768px
Kindle Fire = 1024px x 600px

/* ============== NEW STUFF 26/07/17 ============== */







.lt-ie9 {
	display:block;
}

#form1 {
	margin:0;
	clear:both;
}
ul {
	margin:0;
	padding:0;
	list-style:none;
}

/* ============== ERROR ============== */
#lblAddressError {
	background: none repeat scroll 0 0 #EEEEEE;
    border: 1px solid red;
    color: red;
    float: left;
    font-weight: bold;
    margin: 10px 4% 50px 4%;
    padding: 2%;
	width:88%;
	font-size:1.5em;
}

/* ========================================= MY NEIGHBOURHOOD ==================================== */
.column{
	width:100%;
	float:left;
	min-height:10px;
}
.column .dragbox{
	box-sizing:border-box;
	border:1px solid #eee;
	background:#fff;
	position:relative;
	float:left;
	width:92%;
	margin-bottom:20px!important;
	padding-bottom:20px;
}
.column .dragbox h2 {
	margin:0!important;
	font-size:1.7em!important;
	border-bottom:1px solid #d9dde7;
	color:#000;
	padding:30px 4% 21px 7%!important;
}
.column .dragbox h3 {
	font-size:1.3em!important;
	text-transform: uppercase;
	font-weight:bold;
	color:#444;
	clear:left;
}
.dateWrapper {
	margin-bottom:20px;
	float:left;
	width:100%;
}
.dateWrapper h3 {
	background: #d9dde7;
	margin: 0 auto;
	color: #000 !important;
	text-align: center;
	padding: 10px;
	border-bottom: 0;

}

.black,.blue, .brown, .green, .paper {
	height:150px;
}
.black + div,
.blue + div,
.brown + div,
.green + div,
.paper + div {
	padding:0 7%;
}
.black, .black + div span,
.blue, .blue + div span,
.brown, .brown + div span,
.green, .green + div span {
	color:black;
}
.column  .placeholder{
	background: #f0f0f0;
	border:1px dashed #ddd;
}


.item {
	color: black;
	xwhite-space: pre-wrap;
	xword-break: break-all;
	word-wrap: break-word;
}

.lastCollHeader{
	margin:5% 0;
}



/*============================= TABS ============================= */
#tabs {
	font-size: 1.4em;
	float: left;
	width: 100%;
	border-bottom: 2px solid #d9dde7;
	margin-bottom: 35px;
}
#tabs ul.toptabs {
	float: left;
    margin: 0 4%;
    width: 92%;
}


#tabs ul.toptabs li {  
	float:left;
	width:50%;
	
}

#tabs ul.toptabs li a {
	height:auto!important;
	border-bottom: 3px solid #ffffff;
	padding:15px 0; 
	color:#005A73; 
	text-decoration:none; 
	display:block; 
	text-align:center;
	font-size:1.05em;
}

.tabs-selected, .tabs-selected:hover { 
	cursor:auto;
	font-weight:bold;
	border:2px solid #d9dde7;
	border-bottom:2px solid #f0f3fa;
	margin-bottom:-2px;
}

#h1search-wrap {
	clear: both;
    float: left;
    margin: 0 4% 15px;
    width: 92%;
	border-bottom:2px solid #CCCCCC;
}
#h1search-wrap h1 {
	border-bottom:0;
	float:left;
	margin:33px 0 14px;
	font-size:1.9em;
	padding:0;
	border-width:1px;
}
/* ============== SEARCH ADDRESS ============== */
#AddressSrch {
	clear:both;
	margin:0 0 20px 0;
	width:100%;
	float:left;
}
#AddressSrch input[type="text"] {
	border: 0;
	xmargin: 0 1%;
	padding: 8px 3% 8px 10%;
	width: 87%;
	float: left;
	height: 22px;
	line-height: 22px;
	background: url('../images/mag@2x.png') no-repeat 10px center white;
	background-size: 12px 12px;
	-webkit-border-radius: 0px;
	font-family: "proxima-nova", Arial, sans-serif;
}
.lt-ie9 #AddressSrch input[type="text"] {
	background: url('../images/mag.gif') no-repeat 10px center white;
}
#AddressSrch input[type="submit"] {
	font-family:"proxima-nova", arial, sans-serif;
	font-size:1.5em;
	color:#fff;
	font-weight: bold;
	text-align:center;
	width:100%;
	margin:10px 0 0 1px;
	height:34px;
	line-height:34px;
	 -webkit-appearance: none;
	 -webkit-border-radius:0px;
	background:#222;
    border: 0;
	transition:all .3s ease;

} 
#AddressSrch input[type="submit"]:hover {
	cursor:pointer;
	background:#94BD10;
	color:white;
}

/* ============== CHOOSE ADDRESS ============== */
.Properties select {
	font-family: "proxima-nova", Arial, sans-serif;
	border: 1px solid #ccc;
	width: 100%;
	font-size: 1.5em !important;
}
.Properties select option {
	border-bottom:1px solid #ddd;
	padding:8px 2% 8px 39px;
	cursor:pointer;
	background:url("../images/bigpin@2x.png") no-repeat 10px 5px;
	background-size:18px 24px;
	color:black!important;
}

.no-flexboxlegacy .Properties select option {
	border:10px solid #fff;
}
.no-flexboxlegacy .Properties select option:hover {
	background-color:#ddd;	
}
.no-flexboxlegacy .Properties select option:focus {
	background-color:#333!important;
	color:white!important;
}
	
.Properties select option:hover {
	background:url("../images/bigpin-on@2x.png") no-repeat 10px 5px #f9f9f9;
	background-size:18px 24px;
	color:black!important;
}

.Properties select option:focus {
	color:black!important;
}



.Properties select option:visited {
	background:black!important;
}

/* ============== DISPLAY ADDRESS ============== */
#AddressResult {
    min-height:100px;
	clear:both;
	border-top:1px solid #d9dde7;
	padding:0 4% 20px 4%;
}

#AddressDisplay {
	min-height: 100px;
	clear: both;
	border-top: 1px solid #d9dde7;
	padding: 0 4% 20px 4%;
}
#AddressDisplay h2 {
	font-size: 1.1em;
	padding: 10px 5px 10px 45px;
	margin: 0;
	border-bottom: 1px solid #ccc;
	color: white;
	border-radius: 3px 3px 0 0;
	font-size: 1em;
	font-weight: normal;
}

#AddressButtons {
	float: left;
    padding: 15px 0;
    border-top: 1px solid #d9dde7;
    width: 100%;
    margin-top: -1px;
	display:none;
}
#AddressButtons a{
	width:100%;
	display:block;
	font-size:1.3em;
	color:#005A73;
	float:left;
	width:100%;
	text-decoration:none;
	margin-bottom:10px;
}
#AddressButtons a:nth-child(1):before {
    content: "\e050";
	font-family:"icomoon";
	margin:0 5px 0 3px;
	font-size:1em;
}
#AddressButtons input {
	float:left;
}
#AddressButtons label {
	font-size:1.3em;
	color:#005A73;
}
.AddressButtons-trigger {
	float: right;
    margin-top: -21px;
    font-size: 1.3em;
    color: #005A73;
    border: 1px solid #ddd;
    padding: 5px;
    text-decoration: none;
}
.AddressButtons-trigger:before {
	content: "\f0fe";
	font-family:"icomoon";
	margin-right:3px;
}
.AddressButtons-trigger-active {
	background: #005A73;
	color:white;
}
.AddressButtons-trigger-active:before {
	color:white;
}
.show {
	display:block!important;
}
.todayNotification {
	display:block;
	background:#111;
	color:crimson;
	font-size:2.2em;
	padding:23px 0;
	text-transform:uppercase;
	text-align:center;
	font-weight:bold;
}
.followingCollection {
	background:#111;
	color:#ccc;
	display:block;
	text-align:center;
	width:100%;
	font-size:1.2em;
}
/* ============== THUMBNAIL MAP ============== */
#MapWindow {
    float:right;
	margin:0 0 0 15px;
}
#MapWindow img {
	width:120px;
	height:60px;
	border:0;
}
.SelectedProperty {
	width:100%;
	position:relative;
}
.SelectedProperty p {
	font-size:1.2em;
	padding:0;
	margin:0;
	font-weight:bold;
}
.SelectedProperty p span{
	display:block;
	font-size:1.6em;
	margin:15px 116px 0 0;
}
.AddressHighlight {
	font-size:3em!important;
	padding:10px 0 0px 0;
	line-height:1em;
}
.SelectedProperty label {
	margin-top:-1px;
}

#Ward p {
	font-size:1.5em;
	margin-bottom:0;
	margin:20px 7% 0 7%;
}
#CouncilTax, #Councillors, #Ward, .BinErrors {
	width:92%;
	margin:0 4%;
	border-top:5px solid black;
}
#Councillors {
	padding-bottom:0;
}
#Councillors ul li a {
	width: 92%;
    padding: 0 4%;
}
#Councillors h3 {
	margin: 15px 7% 20px;
}
#Councillors.bins:nth-child(2) {
	padding: 0 3%;
}


.BinErrors{
    width:92%!important;
    
}
.BinErrors p{
    font-size:1.5em;
}
.column .dragbox.BinErrors h2{
    padding-left:20px!important;
}
.BinErrors p a {
	display:block;
	color:#005a73;
	border:1px solid #bfbfc0;
	padding:11px 0;
    margin-top:10px;
	text-align:center;
	text-decoration:none;
}

.BinActions {
	margin:0!important;
	padding:20px 7%;
	width:100%!important;
	border:none!important;
}
.BinActions p {
	margin:0;
}
.BinActions p:first-child {
	margin-bottom:20px;
}
.BinActions p a {
	display:block;
	color:#005a73;
	border:1px solid #bfbfc0;
	padding:11px 0;
	text-align:center;
	text-decoration:none;
}


.BinActions p:nth-child(1) a:before {
	font-family:"icomoon";
	content:"\e08b";
	margin-right:5px;
}
.BinActions p:nth-child(2) a:before {
	content: "\e035";
	font-family:"icomoon";
	margin-right:5px;
}



/*========================== COUNCIL TAX ================================*/


ul.CouncilTax li {
	padding:20px 3% 20px 7%;
}
.portletfooter {
	padding:0!important;
	border-bottom:0!important;
}
.CTBand, .CTYear {
	background:white;
}
.CTBand  {
	float:left;
	width:90%;
	font-size:1.3em;
	text-transform:uppercase;
	color:#555;
	font-weight:bold;
}
.CTBand span {
	font-size:4em;
	font-weight:bold;
	display:block;
	color:black;
}
.CTYear {
	font-size:1.3em;
	text-transform:uppercase;
	color:#555;
	font-weight:bold;
}
span.CTAmount {
	display:block;
	font-weight:bold;
	color:black;
	font-size:1.5em;
	margin-top:5px;
}
#Ward span  {
	font-weight:bold;
	text-transform:uppercase;
	color:#666;
}

/*========================== COUNCILLORS ================================*/


#Councillors ul li a, #MPs ul li a {
	display:block;
	padding-bottom:10px;
	text-decoration:none;
	border-bottom:none;
	float:left;
}
#Councillors ul {
	background: white;
    margin-bottom: 20px;
    float: left;
    width: 100%;
}
#Councillors ul li {
	width:100%;
	float:left;
}
#Councillors ul li a, #MPs ul li a {
	background-color:white;
	color:black;
	font-size:1.1em;
}
.CllrImage, .MPImage {
    float: left;
    margin: 0 12px 0;
    width: 50px;
    height: 50px;
    background-size: cover!important;
    background-position: center!important;
	border:1px solid #ccc;
	border-radius:50px;
}
.CllrImage img, .MPImage img {
	width: 100%;
	height: auto;
}
span.CllrName, span.MPName {
	font-size:1.2em;
	color:#005A73;
}
span.CllrParty, span.MPParty {
	display: block;
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 5px;
    font-weight: bold;
    color: #555;
}


/*========================== BINS & RECYCLING ================================*/
.BinsRecycling {
	float:left;
	margin:0 4%;
}
.BinsRecycling p {
	margin:0 7%;
}
.BinsRecycling p:first-of-type {
	margin:20px 7% 5px 7%;
}
.BinsRecycling p a {
	margin-top:20px;
}
.BinsRecycling p a,
.portletfooter a {
	font-size: 1.3em;
	text-decoration: none;
	color: #005A73;
	display: block;
	border: 1px solid #d9dde7;
	text-align: center;
	padding: 5px 0;
}
.portletfooter a {
	margin:0 7%;
	clear:both;
}
#BinsRecycling h2,
.BinsRecycling h2 {
	padding:30px 4% 21px 7%!important;
}

.BlackBin h2 {
	background:url(../images/blackbin@2x.png) no-repeat 98% 7px;
}
.BlueBin h2 {
	background:url(../images/bluebin@2x.png) no-repeat 98% 7px;
}
.BrownBin h2 {
	background:url(../images/brownbin@2x.png) no-repeat 98% 7px;
}
.GreenBin h2 {
	background:url(../images/greenbin@2x.png) no-repeat 98% 7px;
}



#BinsRecycling ul li,
.BinsRecycling ul li {
	font-size:1.3em;
	padding:5px 0 0 0;
}
#BinsRecycling ul li:last-child, #Councillors ul li:last-child,
.BinsRecycling ul li:last-child {
	border-bottom:0;
}
.BinTxt {
	font-size:0.7em;
}
.BinDate {
	display:block;
	font-weight:bold;
}
/*
.black {
	background:url(../images/blackbin@2x.png) no-repeat  22% 45px;
	xbackground-size:20%;
}
.paper {
	background:url(../images/bluebin@2x.png)no-repeat  22% 45px;
	xbackground-size:20%;
}
.brown { 
	background:url(../images/brownbin@2x.png) no-repeat  22% 45px;
	xbackground-size:20%;
}
.green {
	background:url(../images/greenbin@2x.png) no-repeat  22% 45px;
	xbackground-size:20%;
}
*/
.BlueBin {
	border-top: 5px solid #0096C1 !important;
}
.BlackBin {
	border-top:5px solid #000!important;
}
.GreenBin {
	border-top: 5px solid #6cbe45 !important;
}
.BrownBin {
	border-top: 5px solid #a15b28 !important;
}
.BinIntel {
	padding-bottom:20px;
	min-height:40px;
}
.BinIntel ul li:before {
	font-family:"icomoon";
	content:"\e08d";
	font-size:1.2em;
	margin-right:3px;
}

.dateWrapper-next {
		background:#333;
		float:right;
		width:100%;
		color:white;
		padding:15px 0;
		font-size:1.3em;
		text-align:center;
}

span.bin-day, span.bin-date, span.date-month-year {
	display:block;
	text-align:center;
}
span.bin-date-number {
	font-size:4em;
	padding:5px 0;
	font-weight:bold;
}
span.bin-date-month {
	margin-right:3px;
}
span.bin-date-indicator {
	margin-right:3px;
	font-size:1.5em;
}
.bin-lastcollection {
	font-weight:bold;
	font-size:1.5em;
}
.collectionToday span.todayNotification,
.collectionToday div.dateWrapper-next {
	background:#111;
}
.collectionToday div.dateWrapper-next {
	padding-top:7px;	
}
.collectionToday span.bin-day, 
.collectionToday span.bin-date, 
.collectionToday span.date-month-year {
	display:inline;
	font-weight:bold;
}


.collectionToday span.bin-date-number,
.collectionToday span.bin-date-indicator {
	font-size:1em;
	font-weight:bold;
}
.collectionToday span.bin-date-number {
	margin-left:4px;
}
.collectionToday span.bin-date-indicator {
	margin-right:4px;
}
/*
.dateWrapper span {
	float:left;
	font-size:1.3em;
	font-weight:bold;
	padding-top:10px;
	text-align:center;
}
.dateWrapper span:nth-child(1) {
	width:100%;
}
.dateWrapper span:nth-child(2){
	font-size:6em!important;
	width:62%;
	text-align:right;
	letter-spacing:-0.1em;
	line-height:0.8em;
}
.dateWrapper span:nth-child(3){
	font-size:2em;
	text-align: left;
	padding-left:7px;

}

.dateWrapper span:nth-child(4){
	clear:both;
	margin-right:4px;
	width:62%;
	padding-bottom:10px;
}
*/

/*========================== Universal Credit ================================*/
#UniversalCredit h2 {
	background:	url("../images/cmsicon-credit@2x.png") no-repeat 7px 5px #4D585E;
	background-size:30px 30px;
	border-radius:3px 3px 0 0;
}
#UniversalCredit ul li:first-child {
	padding: 0px;
	margin: 10px;
}

/*========================== Polling Stations ================================*/
#PollingStations h2 {
	background:	url("../images/cmsicon-mps@2x.png") no-repeat 7px 5px #4D585E;
	background-size:30px 30px;
	border-radius:3px 3px 0 0;
}
#PollingStations ul li:first-child{
	padding: 4%;
	border-bottom: 1px solid #ccc;
}

span.PollingPlace
{
    font-weight:bold;
}


.lt-ie9 #UniversalCredit h2 {
		background:url("../images/cmsicon-credit.png") no-repeat 7px 5px #4D585E!important;
	}

.lt-ie9 #AddressResult h2 {
		background:url("../images/cmsicon-pin.png") no-repeat 7px 5px #4D585E!important;
	}
	.lt-ie9 #BinsRecycling h2 {
		background:	url("../images/cmsicon-bin.png") no-repeat 7px 5px #4D585E!important;
	}
	.lt-ie9 #CouncilTax h2 {
		background:	url("../images/cmsicon-pound.png") no-repeat 7px 5px #4D585E!important;
	}
	.lt-ie9 #Councillors h2 {
		background:	url("../images/cmsicon-councillors.gif") no-repeat 7px 5px #4D585E;
	}
	.lt-ie9 #MPs h2 {
		background:	url("../images/cmsicon-mps.gif") no-repeat 7px 5px #4D585E;
	}	
	.lt-ie9 .portletfooter a, .lt-ie9 #Councillors ul li a, .lt-ie9 #MPs ul li a {
		background:	url("../images/arrow.png") no-repeat #fff!important;
		background-position:96% center!important;
	}
	.lt-ie9 #Councillors ul li a, .lt-ie9 #MPs ul li a {
		background-size:18px 25px!important;
	}		
	.lt-ie9 .black {
		background:url(../images/blackbin.png) no-repeat 9px center #fff!important;
	}
	.lt-ie9 .paper {
		background:url(../images/bluebin.png) no-repeat 9px center #fff!important;
	}
	.lt-ie9 .brown { 
		background:url(../images/brownbin.png) no-repeat 9px center #fff!important;
	}
	.lt-ie9 .green {
		background:url(../images/greenbin.png) no-repeat 9px center #fff!important;
	}
.AddrResultDropDown {
	border:none!important;
}
#CampaignBanner {
	display:block;
	margin:0 4%;
	width:92%;
	padding-bottom:0;
}
#CampaignBanner img {
	width:100%;
	height:auto;
	display:block;
}
#CampaignBanner img:nth-child(2) {
	display:none;
}


.fmn-landingpage {
	background:url(../images/bg-rooftops2.jpg) no-repeat center bottom #1e627e;
	background-size:100%;
	margin-bottom:50px;
	float:left;
	width:100%;
	padding-bottom:30px;
}
.fmn-landingpage h1{
	color:white;
	border:none;
	font-size:3.5em!important;
	margin-top:60px!important;
}
#h1search-wrap {
	border:none;
	float:left;
	width:auto;
}
.fmn-landingpage p {
	clear:both;
	color:#fff;
	font-size:1.5em;
	margin:25px 0;
}
#AddressSrch {
	clear:both!important;
	float:left!important;
}

@media only screen and (min-width: 480px) {
/* iPhone Portrait Styles*/
/* Main Layout */
	.column .dragbox {
		width:45%;		
	}
	.BinsRecycling {
		margin:0;
	}
	.BlackBin, .GreenBin { margin:0 2% 0 4%!important;}
	.BrownBin {}
	.GreenBin {}
	.BlueBin {}
	
	.ui-tabs .ui-tabs-nav li a{
		font-size:1em!important;
	}
	x#AddressSrch input[type="text"] {
		background: url('../images/mag.gif') no-repeat 10px center white;
		border-right:0;
		width:340px;
	}
	#AddressDisplay {
		float: left;
	}
	.SelectedProperty p {
		font-size:1.1em;
		font-weight: bold;
	}
	#MapWindow img, #MapWindow {
		width:200px;
		height:100px;
	}
	.BinTxt {
		font-size:0.8em;
	}		
	.pleaseselect {
		display:none;
	}
}

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

	#AddressSrch input[type="text"] {
		float: left;
		padding: 6px 3% 6px 8%;
		width: 55%;
		border:none;
	}
	#AddressSrch input[type="submit"] {
		width:32%;
		margin:0;
		font-size:1.5em;
		border:none;
		color:#eee;
	}
	#AddressSrch {
		float:left;
	}
	
	
	ul#gridalicious-wrap {
		width:100%;
		margin-left:0%;
	}

	
}

/*iPad Portrait Styles ===================================================*/
@media only screen and (min-width: 768px) {
	.fmn-landingpage p {
		width:45%;
	}
	.column {
		position:relative;
	}
	.column .dragbox {
		margin:0;
		xwidth:49.3%;
	}
    .BinErrors{
        width:92%!important;
        margin:0 4%!important;
    }
	.BinActions p {
		float:left;
		width:45%;
	}
	.BinActions p:first-child {
		margin-right:7%!important;
		margin-bottom:0;
	}
	
	.ui-tabs {
		margin:63px 0 20px 0!important;
		width:100%;
	}
	.ui-tabs .ui-tabs-nav {
		margin: -38px 0 0 -1px;
	}
	.ui-tabs .ui-tabs-nav li {
		width: auto!important;
	}
	.ui-tabs .ui-tabs-nav li a{
		padding:0 1em!important;
	}	
	#tabs ul.toptabs {
		float:left;
	}
	#tabs ul.toptabs li {
		float:left;
		width:23%;
	}
	
	.SelectedProperty p {
		font-size:1.5em;
	}
	#AddressDisplay {
		float: left;
		font-size: 0.9em;
	}
	
	#AddressSrch {
		clear: none;
		float: right;
		margin-top: 31px;
		width: 352px;
		padding:0;
	}
	#AddressButtons {
		display:block;
		float:right;
		margin-top:-58px;
		border:0;
		width:170px;
	}
	#AddressButtons a {
		font-size:1.4em;
	}
	#AddressButtons label {
		font-size:1.4em;
		line-height:1.5em;
	}
	.AddressButtons-trigger {
		display:none;
	}
	ul#gridalicious-wrap {
		width:99.2%;
		margin-left:0.5%;
	}
	#CouncilTax, #Councillors{
		width:29%;
	}
	#Councillors{
		margin-bottom:90px!important;
	}
	#CouncilTax {
		margin-right:0;
	}
	#Ward {
		position: absolute;
		bottom: 88px;
		left: 0;
		margin: 0 0 0 4%;
		margin-bottom: 0px;
		width: 29%;
	}
	#Councillors {
		margin:0 2.5%;
	}
	#CampaignBanner {
		width:29%;
		margin:0;
	}
	#CampaignBanner img:nth-child(1) {
		display:none;
	}
	#CampaignBanner img:nth-child(2) {
		display:block;
	}
	
}

/*Desktop Styles ===================================================*/
@media only screen and (min-width: 992px) {

	/* APPLY IE8 fixes for retina graphics */
	#h1search-wrap {
		margin:0;
		width: 100%;
	}
    .BinErrors{
        width:100%!important;
        margin:0!important;
    }
	.BinActions {
		margin:0!important;
	}
	#AddressDisplay {
		margin: 0 auto;
		padding: 0 0 30px 0;
		float: none;
	}
	#tabs ul.toptabs {
		width:98%;
		margin:0;
	}
	.breadcrumb div { 
		margin-left:0;
		margin-right:0;
	}
	
	.column .dragbox {
		width:23.5%;		
	}
	.BinsRecycling {
		margin:0;
	}
	.BlackBin { margin:0!important;}
	.BrownBin {margin:0 2%!important;}
	.GreenBin {margin:0 2% 0 0!important;}
	.BlueBin {}
	#CouncilTax, #Councillors, #CampaignBanner {
		width:32%;
	} 
	#CouncilTax {
		margin-left:0;
	}
	#Ward {
		margin: 0;
		width: 32%;
	}
	#Councillors {
		margin: 0 2%;
	}   
	#AddressResult{
		padding:0;
	}
}

@media only screen and (min-width: 1312px) {
	#Ward {
		position: absolute;
		bottom: 265px;
	}
}