div.colleft{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column wrap;
    flex-direction: column wrap;
}
div.colleft div.col1 {order: -2; min-width: 300px;  margin: 2% 2%; padding:2% 2%; -webkit-flex: 1; flex: 1; } /* search */
div.colleft div.col2 {order: -3; -webkit-flex: 1;flex:1; display:none; } /*register */
div.colleft div.col3 {order: -1;   -webkit-flex: 1;flex: 1;  padding: 5% 5%; background:#e8eef4 ;}

/* heading */
div.colleft div.col1 h1{word-wrap: break-word;}

/* margin between buttons*/

div.colleft div.col1 div#mymenu > form > input {margin-top: 5px;}
   
div#mymenu {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: column nowrap;
    flex-flow: column nowrap;
    
    
}

div.colleft div.col1 div#mymenu form#offices input#btn1{order: 1;-webkit-flex: 1; flex: 1;}
div.colleft div.col1 div#mymenu form#offices input#btn2{order: 2;-webkit-flex: 1; flex: 1;}
div.colleft div.col1 div#mymenu form#offices input#btn3{order: 3;-webkit-flex: 1; flex: 1;}
div.colleft div.col1 div#mymenu form#offices input#btn4{order: 4;-webkit-flex: 1; flex: 1;}

div.colleft div.col1 div#mycontent img{
    float: none; 
    width: 260px;
}
/* Middle page search menu */
div.colleft div.col1 div#mycontent{font-size:20px; margin-top: 50px; }

div.colleft div.col1 div#mymenu > form > input{font-size: 18px; padding: 2% 1%; width : 120px;}

/*deals roll changes*/
div.colleft div.col3 div.dealsRoll{font-size: 18px; margin-bottom: 50px;}
div.colleft div.col3 div.dealsRoll table tbody tr td a img{
       font-size: 18px;
       height: 75px;
       width: 100px;
       overflow: auto;
    }
/*remove the header menu buttons*/
body > #header > #headermenusystem{display:none;}

/*remove the login-change location to dropdown menu as not enought room in header*/
body div#header div.login{ display: none;} 

/* remove header buttons*/
.menubar1{ display: none;;}

/* remove banner picture*/
#topBar{display: none}

/* remove home button*/
div#header div#headermenusystem div.menubarHome a img{display: none;}

 /* bottom display below search etc change to column layout */
 div.displayBot{ display: -webkit-flex;
                 display: flex;
                -webkit-flex-direction: column;
                flex-direction: column;
                padding-bottom:25px;
                background: #e8f4ee;
      
}

div.displayBot div.block1{order: 8;-webkit-flex: 1; flex: 1; padding: 3%;  }
div.displayBot div.block2{order: 9;-webkit-flex: 1; flex: 1; padding: 3%;}
div.displayBot div.block3{order: 10;-webkit-flex: 1; flex: 1; padding: 3%;}

/*changes page bottom to column*/
div#pageBot{ -webkit-flex-flow: column ; flex-flow: column ;}

/*search page changes*/
form#signupform div.searchCol{font-size: 16px;}
form#signupform div.searchCol div.searchCol3 button#signupbtn{font-size:26px;} 
form#signupform div.searchCol div.searchCol1 input,select{font-size : 16px;}
form#signupform div.searchCol div.searchCol2 input,select{font-size : 16px;}
form#signupform div.searchCol div.searchCol3 input,select{font-size : 16px; }

/*to display the menus which are current display:none in style.css so they don't show up on screen > then 550px'*/
.cornerMenu{ display: inline-block;}   
nav{ display: inline-block;}

/*Then don't display the <details><summary> tagged menu in windows- as it don't work!' */
/*explorer 10 and Edge*/
_:-ms-lang(x), .cornerMenu { display: none;}
 
/*This stops the <details><summary> tagged menu for appearing in firefox but not in firefox 48.0 on linux mint!!!*/
/*@media screen and (-moz-images-in-menus:0) {.cornerMenu{ display: none;}}*/
/*This stops all firefox browsers tested from displaying the <summary><details> elements*/
_:-moz-tree-row(hover), .cornerMenu {display: none;}

/*This removes the display from  Safari probably but also windows and chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {nav{display:none;}} 

/*so turn it back on in windows!*/
:-ms-lang(x), nav { display: inline-block;}

/*+++++++++++++++++++++++details page changes for mobile less than 550px+++++++++++++++++++++++ */

body {
font-size: 18px;
}
/* menu tabs- change text size */
.tabmenu li a{ 
    font-size:16px;
    padding: 8px 7px;
}
.tabmenu li.active a{
    font-size: 16px;
   
}
div.details {
    
    -webkit-flex-flow:column wrap;
    flex-flow: column wrap;
   
    
    
   }

div.details div.detailsCol1 {order: 1; min-width: 300px;  flex: 1; margin: 0% 3% 0% 3%;} 
div.details div.detailsCol2 {order: 2; min-width: 300px;  flex: 1; margin: 0% 3% 0% 3%;} 

/*hide title as takes up too much space*/
div.details div.detailsCol1 h1{display: none;}

/*reduce fixed-size of map */
div.details div.detailsCol1 div#location.content iframe{width: 300px;height: 225px}

/* remove line under location/description/terms/plans menu*/
.content{border-top:0px; font-size:0.8em; padding:0px;width: 100%;}

/* location/description/terms/plans menu changes*/
.tabmenu li a{ 
    text-decoration: none;
    /*round the bottoms*/
    border-radius: 3px 3px 3px 3px;
    border:#000 1px solid;
    /*put a boarder back on the bottom of the buttons*/
/*    border-bottom: none;*/
}
.tabmenu li a:hover{border-bottom-color:#000;}

 div.details div.detailsCol1 div#drawings.content img.plan{width: 300px;height: 400px;}
 
 /*agents contact details change position*/
 table.agent{margin:0px;width: 100%}
 
 /*float view similiar properties button right so out of the way of menu */
 form#similar-s button#sSearch{float: right; width: 100px;}
 div.details div.detailsCol1 a.backSearch, a button.backSearch{float: right;width: 70px;text-align: center;}

 /*contact page changes width of text from 60% in style.css*/
article.contact{ max-width: 100%;}

/*+++++++++++++++++++search list changes for mobile less than 550px wide++++++++++++++++++++++++++*/

body {
font-size: 14px;
}
div.listProp{
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow :column;
    flex-flow: column;
   }

div.listProp div.listPropCol1 {order: 1; min-width: 290px;-ms-flex: 1; flex:1; margin: 2% 2%;} 
div.listProp div.listPropCol2 {order: 2; min-width: 290px;  display: -webkit-flexbox; display: flex;  -webkit-flex-flow :row wrap; flex-flow: row wrap; -webkit-flex-justify-content:flex-start; justify-content: flex-start; margin: 2% 2%; padding-bottom: 25px;} 

/* removes two end columns of table */
div.listProp div.listPropCol1 div#searchtble table.myTable tbody tr td.mobile{ display:none;}

/* removes property size information column */
div.listProp div.listPropCol1 div#searchtble table.myTable tbody tr td.mobile2Remove{display: none;}

div.listProp div.listPropCol1 div#searchtble table.myTable tbody tr{
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow :row nowrap;
    flex-flow: row nowrap;
    align-content: center;
    
    
    
}
div.listProp div.listPropCol1 div#searchtble table.myTable tbody tr td{
    -webKit-flex: 1; 
    flex:1;
    
    
}
/*gets the property size and property terms to display next to the picture as is blocked in searchlist.css to 
stop appearing in the wider screen options*/
div.listProp div.listPropCol1 div#searchtble table.myTable tbody tr td div.mobile2Add{ display:inline-block;}

/*changes margin between search results box and search params box */
div.listProp div.listPropCol2 table#searchParams{
   
    margin: 20px auto 20px;
   font-size: 16px;
}
/*positions saved search button */
div.listProp div.listPropCol2 form#form .reviseBtn{
     float: left; 
    margin: -27px 350px;
}
/* positions the image better when the sold/let banner is displayed  */
div.listProp div.listPropCol1 table.myTable tbody tr td div.banner img{
    margin: -10px 0px 0px 0px;
}