/*
Hello developer,

This is a prototype.  It is not a website.

It is here to show how the website will work at different screensizes.  Its not possible to show that on paper 
any more so I've started doing it like this.  It lets people see what a site will do rather than just hear about 
it and look at snapshots of different wireframes.

But this is not a website.  It will break if you push it around too much.  The code is hacked together.  If you
take a look at the CSS you will not be impressed but that is because this is a prototype.  It is built to
illustrate and not to do.  The final code is much, much different.

Thanks
Michael Wood (@michaelwood)
*/

* { margin: 0px; padding: 0px;  -moz-box-sizing: border-box ; -webkit-box-sizing: border-box ; box-sizing: border-box ;  font-family: "Walter Turncoat" ; }


body  { font-size: 85%; line-height: 170%; font-family: "Walter Turncoat","CreativeBlock BB","RedStateBlueState BB",arial ;  }

#cnt  { max-width: 1600px; min-width: 320px; margin: 0px auto; position: relative; z-index: 15;  }

#head   { }
#head  nav ,
#head  ul.bread {  display: none;}

#head .box  { text-align: center; padding: 40px 0 30px; }
#head  h1  {  padding: 30px 0 0 ; font-size: 2em;}
#head  h2  {  padding: 30px 0 0; font-size: 1em; font-weight: 500; text-align: center; }
#head  .box .icons   { margin: 20px auto 0; width: 200px ;}
#head  .box .icons li  { font-size: 0.75em ; }
#head  .box .icons li img  { width: 40px; height: 40px;}
#head  .box ul.icons li:last-child   { margin-right:0px;}

#head  ul.bread  { clear: both ; background: rgba(255,255,255,0.1); margin: 10px -10px -10px; border-top: 1px solid rgba(0,0,0,0.2); border-bottom: 1px solid rgba(0,0,0,0.2); padding-left: 43px; }
#head  ul.bread li   { display: inline-block ; line-height: 40px; padding: 0px 0px 0px 40px ; background: url(i/play.png) 00% 50% no-repeat scroll; cursor: pointer; opacity: 0.6; }
#head  ul.bread li:nth-of-type(1)   { background-image: url(i/house.png) ; }
#head  ul.bread li:last-of-type:hover    { opacity: 0.6; }
#head  ul.bread li:hover { opacity: 1; }

#head  nav div ol    { list-style-type: none ;  background: transparent;  }
#head  nav div ul li.breadcrumbs    { display: none ; list-style-type: none ;  background: transparent; padding: 0px;  }
#head  nav div ul li.breadcrumbs ol li   { display: inline-block ; line-height: 40px; width: 38px; height: 38px; overflow: hidden ; border: 1px solid rgba(0,0,0,0.4) ; padding: 0px  ; margin: 0px; background: transparent; cursor: pointer; }
#head  nav div ul li.breadcrumbs ol li.home   { background: url(i/house.png) 50% 50% no-repeat scroll;cursor: pointer; text-indent: -5555px; }
#head  nav div ul li.breadcrumbs ol li.rolledup   { display: none; background: url(i/dots.png) 50% 50% no-repeat scroll;cursor: pointer; text-indent: -5555px;  }
#head  nav div ul li.breadcrumbs ol li.arrow   {  float: right ; text-indent: -5555px; }
#head  nav div ul li.breadcrumbs ol li.current   { display: none; line-height: 38px; width: auto; height: 38px; overflow: visible ; padding: 0px 5px ; position: relative; top: -14px; background-color: #666666 ;  color: #cccccc; }

.lorem  { padding-bottom: 10px; }

.box  { width: 33.3333%; float: left ; background: #999999 ; border: 1px solid #ffffff ;  padding: 10px; }
.box.span2  { width: 66.6666%; }
.box.span3  { width: 100%; }
.box.column6 { width: 16.6667%; padding: 0 10px 0 0 ; border-width: 0px; }
.box.pin-right { float: right ; }
.box.pin-left { float: left ; }

.start-hidden  { display: none; }
.row.signin .box { min-height: 180px; }
.row.signup .box { min-height: 200px; }

.navrows  { overflow: hidden; list-style-type: none; margin: 0px ; padding: 0px; width: 100% }
.navrows  li { float: left; height: 40px; margin: 0px; padding: 10px; border: 1px solid #ffffff ; background: #ffffff ; cursor: pointer; }
.navrows  li.finds-jobs { float: right ; }
.navrows  li.on  { background: #999999 ; color: #000000 ; } 
.navrows  li:before  { font-family: 'Typicons' ; content: 'F'; padding: 0 0.25em ; margin: 0 0.25em 0 0; }
.navrows  li.on:before  { font-family: 'Typicons' ; content: 'H'; }
.navrows.navrows-colors  li { background: #999999 ; }
.navrows.navrows-colors  li.on  { background: #9999cc ; color: #000000 ; } 



.ad_265x235  { width: 265px; height: 235px; }

.row .field { margin: 0 0 5px;  }
.row .field input,
.row .field select { display: block ; line-height: 20px; padding: 5px 0px ; width: 100%;}
.row .field input[type=checkbox] ,
.row .field input[type=radio] { display: inline ; line-height: 20px; padding: 0px ; margin: 5px 5px 5px 0 ; width: 15px; height: 15px; vertical-align: -15%; }
.row .box .map img { max-width: 100% ; }
.row .field.inline  { display: inline; }

.row .field.inline input ,
.row .field.inline select { width: 50%; display: inline; }
.row .field.inline input[type=checkbox],
.row .field.inline input[type=radio]   { width: 15px ; }
.align-right  { text-align: right ; }

.row .box .inline-list   { margin:0px; padding: 0px; list-style-type: none;}
.row .box .inline-list li  { margin:0px; padding: 0px; list-style-type: none; display: inline; }
.row .box .inline-list.with-cancel li:before  { content: 'x'; opacity: 0.5; background: rgba(0,0,0,0.25) ; font-weight: bold; padding: 0 0.25em ; margin: 0 0.25em 0 0; }
.row .box .is-opener  { cursor: pointer; font-weight: 500 ; }
.row .box .is-opener:before  { font-family: 'Typicons' ; content: 'F'; width: 1em ;  padding: 0 ; margin: 0 0.25em 0 0; opacity: 0.5;}
.row .box .is-opener.on:before  { font-family: 'Typicons' ; content: 'H'; }
.row .box .has-opener  {}

.row.product { background: url(i/long-cross.png) 50% 50% ; background-size: cover;  }
.row.nospan   { display:block; }

.find-the-right-job .padding-box  { padding-right: 66%; }

.box  {position: relative;}
.box .controls  { position: absolute; bottom: 0px; left: 0px;  }
.box .controls.no-align  { position: static; }
.box .controls button { padding: 10px 20px; }
button { border: 0px; padding: 5px 20px; background: #000000; color: #ffffff; }

ul.logos  { margin:0px; padding: 0px; list-style-type: none; overflow: hidden;}
ul.logos li  { margin:0px; padding: 0px 0px 10px; list-style-type: none; float: left; width: 100px; }
ul.logos li img { margin:0px auto; padding: 0px; list-style-type: none; width: 90px; height: 35px; display: block;}

.box.text-advert  { text-align: center; }

.box ul   { margin: 20px 10px 20px 30px; }
.box ul.icons   { margin: 10px 0px 0px 0px ; list-style-type: none;  }
.box ul.icons  li  { margin: 0px 10px 10px 0px; float: left; }
.box ul.icons  li img { display: block ; outline: 1px solid rgba(0,0,0,0.5) ;}


.box.tabbed-box { background: #666666 ; padding: 0px; margin: 0px; }
.box .tabs  { list-style-type: none; margin: 0px ; padding: 0px; width: 100% }
.box .tabs  li { width: 20%; float: left; height: 120px; margin: 0px; padding: 10px; border: 1px solid #ffffff ; background: #666666 ; }
.box .tabs  li.on  { background: #9999cc ; } 
.box .tabs  li.on.not-active  {  background: #666666 ; }
table  { width: 100%; }
table  th  { vertical-align: top; text-align: left; font-weight: normal ; background: rgba(0,0,0,0.25); padding: 0.25ex; margin: 0px; }
table  td  { vertical-align: top; text-align: left; padding: 0.25ex; margin: 0px; }

.filter-box { background: rgba(0,0,0,0.15) ; padding: 10px 20px; margin: 0px -10px ; }
.filter-box  select { line-height: 40px; font-size: 18px; width: 50%; }

.box p.pipe-list  { margin: 0px; padding: 10px 0 0;}
.box p.pipe-list span { margin: 0px; padding: 0px; display: inline; color: #0000ff; cursor: pointer; }
.box p.pipe-list span:hover { text-decoration: underline ; }
.box p.pipe-list span.on { color: #000000; cursor: default; }

.visual-element  { }
.visual-element ul  { position: relative ; margin: 0px; padding: 0px; list-style-type: none; }
.visual-element ul li  { position: relative ;  margin: 0px; padding: 0px; list-style-type: none; }
.visual-element ul li   { width: 10%; float: left; -moz-transition: 1s all linear ;  -webkit-transition: 1s all linear ; overflow: hidden ; }
.visual-element ul li.on  { width: 70%; }
.visual-element ul li div  {  }
.visual-element ul li div img { /*width: 100%; */ }

.columns-2  { -moz-column-count: 2; -webkit-column-count: 2; }
.columns-3  { -moz-column-count: 3; -webkit-column-count: 3; }
.columns-4  { -moz-column-count: 4; -webkit-column-count: 4; }
.columns-6  { -moz-column-count: 6; -webkit-column-count: 6; }

#foot   { height: 60px ;  background: rgba(0,0,0,0.5) ;  padding: 10px; }
#foot  nav ul { list-style-type: none ; }

.no-tr-hotjob .tr-hotjob  { display: none !important ;}
.no-tr-latest .tr-latest  { display: none !important ;}
.no-tr-closing .tr-closing  { display: none !important ;}

.visual-element:after,
.visual-element ul:after,
.icons:after ,
.row:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.visual-element  ,
.visual-element ul ,
.icons, 
.row {	 /* display: inline-block; */}
html[xmlns] .visual-element  ,
html[xmlns] .visual-element ul ,
html[xmlns] .row ,
html[xmlns] .icon  {	display: block;}
* html .visual-element  ,
* html .visual-element ul ,
* html .icon , 
* html .row {	height: 1%;}


@media only screen and (min-width : 1px) {
	.breakpoints .box  ,
	.breakpoints .box.span2  { width: 50%; }
	.breakpoints .box.span3  { width: 100%; }
	.icons li img  { width: 60px; height: 60px; }
}
@media only screen and (min-width : 320px) {
	.icons li img  { width: 60px; height: 60px; }
	.columns-2  { -moz-column-count: 1; }
	.columns-4  { -moz-column-count: 1; }
}
@media only screen and (max-width : 321px) {
	.icons li img  { width: 60px; height: 60px; }
	.columns-2  { -moz-column-count: 1; }
	.columns-4  { -moz-column-count: 1; }
}


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

}

@media only screen and (min-width: 600px) {
	.breakpoints .box  { width: 33.33333%; }
	.breakpoints .box.span2  { width: 66.66666%; }
	.breakpoints .box.span3  { width: 100%; }
	.icons li img  { width: 80px; height: 80px; }
	}
@media only screen and (max-width: 600px) {
	.box.products ul { height: 320px; }
	.box.products ul li { width: 50% ; }
	.find-the-right-job .padding-box  { padding-right: 33% ; }
	}

@media only screen and (max-width: 900px) {
	.the-sign-up-box  .box  ,
	.the-last-box  .box  { width: 50%; }
	.the-sign-up-box  .box:last-of-type  ,
	.the-last-box  .box:last-of-type  { display: none; }
	}

@media only screen and (min-width : 768px) {
	.breakpoints #cnt  { width: 768px ; }
	.icons li img  { width: 100px; height: 100px; }
	}

@media only screen and (max-width : 768px) {
	#head  .box .icons   { margin: 5px auto -10px; width: 110px; }
	#head  .box .icons  li:nth-of-type(3) { clear: left; }
	.row .field.inline input[type=text] { width: 100%; display: block; }
	.box.column6  { width: 33.3333333%; }
	}
@media only screen and (max-width : 481px) {
	.box  ,
	.box.span2  ,
	.box.span3  { width: 100%; float: none;}
	#head .box  { padding: 10px 0; }
	#head .box:nth-of-type(1)  { display: none ; }
	#head  h1  {  padding: 0px ;}
	#head  h2  {  padding: 0px ; }
	#head  .box .icons   { margin: 5px auto -10px; width: 200px; }
	#head  .box .icons  li:nth-of-type(3) { clear: none ; }
	.columns-3  { -moz-column-count: 1; }
	.columns-6  { -moz-column-count: 1; }
	.row-expand-height  { min-height: 1px !important ; }
	.row.signin .box:nth-of-type(2)  { display: none; }
	.row.signup .box { min-height: 1px;}
	.box ul.logos   { margin: 0px ; }
	.the-sign-up-box  .box  ,
	.the-last-box  .box  { width: 100%; }
	.box.column6 { padding: 0 0px 10px ; width: 100%;}
	.map  { max-width: 160px; }
	}
@media only screen and (max-width : 639px) {
	.controlled-table_of_jobs tr th:nth-of-type(7) ,
	.controlled-table_of_jobs tr th:nth-of-type(8) ,
	.controlled-table_of_jobs tr td:nth-of-type(7) ,
	.controlled-table_of_jobs tr td:nth-of-type(8) { display:none; }
	}
@media only screen and (max-width : 580px) {
	.controlled-table_of_jobs tr th:nth-of-type(2) ,
	.controlled-table_of_jobs tr td:nth-of-type(2) { display:none; }
	}
@media only screen and (max-width : 480px) {
	.controlled-table_of_jobs tr th:nth-of-type(6) ,
	.controlled-table_of_jobs tr td:nth-of-type(6) { display:none; }
	}
@media only screen and (max-width : 360px) {
	.controlled-table_of_jobs tr th:nth-of-type(1) ,
	.controlled-table_of_jobs tr td:nth-of-type(1) { display:none; }
	}
	
@media only screen and (min-width : 990px) {
	.breakpoints #cnt  { width: 990px ; }
	.icons li img  { width: 120px; height: 120px; }
	.box.products ul { }
	.box.products ul li { width: 20% ; }
	
}

@media only screen and (max-width : 1185px) {
.find-the-jobs .box .row .field.inline input , 
.find-the-jobs .box .row .field.inline select  { width: 100%; }
}
@media only screen and (min-width : 1185px) {
	.find-the-jobs .box .row .field.inline input , 
	.find-the-jobs .box .row .field.inline select  { width: 100%; }
	.find-the-jobs .box .field  button { display: block ;  }
}

@media only screen and (min-width : 1100px) {
	.breakpoints #cnt  { width: 1100px ; }
}

@media only screen and (max-width : 1100px) {
	.columns-4  { -moz-column-count: 2; }
	.columns-6  { -moz-column-count: 3; }
}

@media only screen and (min-width : 1300px) {
	.breakpoints #cnt  { width: 1300px ; }
}