/*

 ******************************************************************************
 *                                                                            *
 *   File:          main.css                                                  *
 *                                                                            *
 *   Description:   Responsive CSS file for JLL OneSearch allowing scaling    *
 *                  to adjust the layout for multiple resolutions using       *
 *                  @media functionality.                                     *
 *                                                                            *
 *   Target:        All browsers                                              *
 *                                                                            *
 *   Dependencies:  css3-mediaqueries.js                                      *
 *                  html5.js                                                  *
 *                                                                            *
 *   Author:        TJE                                                       *
 *   Created:       2011-12-20                                                *
 *   Last Update:   2011-12-22                                                *
 *                                                                            *
 ******************************************************************************

*/

/*************************************/
/* RESET                             */
/*************************************/
/* General element reset */
* {margin:0;padding:0;outline:0;font-size:100%;font:inherit;vertical-align:baseline;}

/* HTML5-specific reset for older browers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}

/* Heights for sticky footer */
html, body {height:100%;}

/*************************************/
/* STANDARD ELEMENTS                 */
/*************************************/
body {font:100%/130% Arial,Helvetica,sans-serif;color:#333;background-color:#EFEFEF;}
body:before {content:"";height:100%;float:left;width:0;margin-top:-32767px;} /* Opera footer issue */

h1,h2,h3,h4,h5,h6 {font-weight:normal;}
a {text-decoration:none;}
abbr {border-bottom:none;}
ol,ul {list-style-type:none;list-style:none;}
table {border-collapse:collapse;border-spacing:0;empty-cells:show;}
td {vertical-align:top;}


/*************************************/
/* CONVENIENCE CLASSES               */
/*************************************/
.clearfix {display: inline-block;}  /* for IE/Mac */
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
.clr {clear:both;}
.ctr {text-align:center;}
.fll {float:left;}
.flr {float:right;}
.nob {border:0 !important;}
.skipNav {display:none;}
.no-show {display:none;}

/*************************************/
/* HEADER                            */
/*************************************/
#wrp {min-height: 100%;}
#hdr {clear:both;float:left;height:130px;width:100%;border-bottom:1px solid #DDD;}
#hdr p,#hdr h1,#hdr h2 {padding:.4em 15px 0 15px;margin:0;}

/* Top Menu */
#top_menu {float:left;width:100%;list-style:none;background:#000;}
#top_menu li {display:inline;list-style:none;}
#top_menu li a {display:block;float:right;padding:4px 10px 5px 10px;font-size:0.86em;text-align:center;text-transform:uppercase;color:#CCC;position:relative;line-height:1.3em;border-left:1px solid #777;}
#top_menu li a:hover {color:#FFF;background:#777;}
#top_menu li a:active {padding:5px 9px 4px 11px;color:#FFF;background:#000;}
#top_menu li a span {display:block;}

/* Remove focus outline from link */
#top_menu li a:focus,#top_menu li:active,#top_menu li:hover {outline:0px;-moz-outline-style:none;}
#top_menu li a::-moz-focus-inner {border:0;}


/*-----------------------------------*/
/*        RESPONSIVE LAYOUTS         */
/*-----------------------------------*/

/*************************************/
/* LOW MOBILE LAYOUT                 */
/*************************************/
	body:after
		{
		content: "less than 320px";
		padding: 20px;
		font-size: 300%;
		font-weight: bold;
		position: fixed;
		bottom: 60px;
		width: 100%;
		text-align: center;
		background-color: hsla(1,60%,40%,0.7);
		color: #fff;
		}

	/*---------------------------------*/
	/* HEADER                          */
	/*---------------------------------*/
	#hdr {clear:both;float:left;height:130px;width:100%;border-bottom:1px solid #DDD;}
	#hdr p,#hdr h1,#hdr h2 {padding:.4em 15px 0 15px;margin:0;}

	/* Logo Area */
	.top_logo {display:block;height:75px;margin:15px 0 0 15px;text-indent:-999em;background:url('/res/img/shr/jll_logo.png') 0% 50% no-repeat;border:1px solid #F0F;}
	.top_logo .hme {display:block;height:75px;width:150px;cursor:pointer;}

	/*---------------------------------*/
	/* CONTENT                           */
	/*---------------------------------*/
	/* Column Container */
	.colmask {position:relative;clear:both;float:left;width:100%;padding-bottom:150px;overflow:auto;}

	/* 2 Column Left Menu Settings */
	.leftmenu {background:#F00;}
	.leftmenu .colright {float:left;width:200%;position:relative;left:235px;background:#0FF;border-left:1px solid #D0D0D0;}
	.leftmenu .col1wrap {float:right;width:50%;position:relative;right:215px;padding-bottom:1em;}
	.leftmenu .col1 {margin:0 15px 0 225px;position:relative;right:100%;overflow:hidden;}
	.leftmenu .col2 {background:#CC0;float:left;width:215px;position:relative;right:225px;}


	/*---------------------------------*/
	/* FOOTER                            */
	/*---------------------------------*/
	#ftr {position:relative;margin-top:-200px;height:150px;width:100%;clear:both;text-align:center;background:#F00;z-index:0;}
	#ftr p {padding:10px;}

/*************************************/
/* MID MOBILE LAYOUT                 */
/*************************************/
@media only screen and (min-width: 320px)
	{
	body:after {content:"320 to 480px";background-color: hsla(90,60%,40%,0.7);}

	/*---------------------------------*/
	/* HEADER                          */
	/*---------------------------------*/
	#hdr {clear:both;float:left;height:130px;width:100%;border-bottom:1px solid #DDD;}
	#hdr p,#hdr h1,#hdr h2 {padding:.4em 15px 0 15px;margin:0;}


	/*---------------------------------*/
	/* CONTENT                           */
	/*---------------------------------*/
	/* Column Container */
	.colmask {position:relative;clear:both;float:left;width:100%;padding-bottom:150px;overflow:auto;}

	/* 2 Column Left Menu Settings */
	.leftmenu {background:#FFF;}
	.leftmenu .colright {float:left;width:200%;position:relative;left:235px;background:#0F0;border-left:1px solid #D0D0D0;}
	.leftmenu .col1wrap {float:right;width:50%;position:relative;right:215px;padding-bottom:1em;}
	.leftmenu .col1 {margin:0 15px 0 225px;position:relative;right:100%;overflow:hidden;}
	.leftmenu .col2 {background:#00F;float:left;width:215px;position:relative;right:225px;}


	/*---------------------------------*/
	/* FOOTER                            */
	/*---------------------------------*/
	#ftr {position:relative;margin-top:-200px;height:150px;width:100%;clear:both;text-align:center;background:#000;z-index:0;}
	#ftr p {padding:10px;}

	}


/*************************************/
/* HIGH MOBILE LAYOUT                */
/*************************************/
@media only screen and (min-width: 480px)
	{
	body:after {content: "480 to 768px";background-color: hsla(180,60%,40%,0.7);}

	/*---------------------------------*/
	/* HEADER                          */
	/*---------------------------------*/
	#hdr {clear:both;float:left;height:130px;width:100%;border-bottom:1px solid #DDD;}
	#hdr p,#hdr h1,#hdr h2 {padding:.4em 15px 0 15px;margin:0;}


	/*---------------------------------*/
	/* CONTENT                           */
	/*---------------------------------*/
	/* Column Container */
	.colmask {position:relative;clear:both;float:left;width:100%;padding-bottom:150px;overflow:auto;}

	/* 2 Column Left Menu Settings */
	.leftmenu {background:#CCC;}
	.leftmenu .colright {float:left;width:200%;position:relative;left:235px;background:#FF0;border-left:1px solid #D0D0D0;}
	.leftmenu .col1wrap {float:right;width:50%;position:relative;right:215px;padding-bottom:1em;}
	.leftmenu .col1 {margin:0 15px 0 225px;position:relative;right:100%;overflow:hidden;}
	.leftmenu .col2 {background:#F0F;float:left;width:215px;position:relative;right:225px;}


	/*---------------------------------*/
	/* FOOTER                            */
	/*---------------------------------*/
	#ftr {position:relative;margin-top:-200px;height:150px;width:100%;clear:both;text-align:center;background:#00F;z-index:0;}
	#ftr p {padding:10px;}

	}


/*************************************/
/* TABLET-RESOLUTION LAYOUT          */
/*************************************/
@media only screen and (min-width: 768px)
	{
	body:after {content: "768 to 1024px";background-color: hsla(270,60%,40%,0.7);}

	/*---------------------------------*/
	/* HEADER                          */
	/*---------------------------------*/
	#hdr {clear:both;float:left;height:130px;width:100%;border-bottom:1px solid #DDD;}
	#hdr p,#hdr h1,#hdr h2 {padding:.4em 15px 0 15px;margin:0;}


	/*---------------------------------*/
	/* CONTENT                           */
	/*---------------------------------*/
	/* Column Container */
	.colmask {position:relative;clear:both;float:left;width:100%;padding-bottom:150px;overflow:auto;}

	/* 2 Column Left Menu Settings */
	.leftmenu {background:#0FF;}
	.leftmenu .colright {float:left;width:200%;position:relative;left:235px;background:#000;border-left:1px solid #D0D0D0;}
	.leftmenu .col1wrap {float:right;width:50%;position:relative;right:215px;padding-bottom:1em;}
	.leftmenu .col1 {margin:0 15px 0 225px;position:relative;right:100%;overflow:hidden;}
	.leftmenu .col2 {background:#00F;float:left;width:215px;position:relative;right:225px;}


	/*---------------------------------*/
	/* FOOTER                            */
	/*---------------------------------*/
	#ftr {position:relative;margin-top:-200px;height:150px;width:100%;clear:both;text-align:center;background:#CC0;z-index:0;}
	#ftr p {padding:10px;}

  }


/*************************************/
/* HIGH-RESOLUTION LAYOUT            */
/*************************************/
@media only screen and (min-width:1024px)
	{
  body:after {content:"1024px to 1200px";background-color:hsla(360,60%,40%,0.7);}

	/*---------------------------------*/
	/* HEADER                          */
	/*---------------------------------*/
	#hdr {clear:both;float:left;height:130px;width:100%;border-bottom:1px solid #DDD;}
	#hdr p,#hdr h1,#hdr h2 {padding:.4em 15px 0 15px;margin:0;}


	/*---------------------------------*/
	/* CONTENT                           */
	/*---------------------------------*/
	/* Column Container */
	.colmask {position:relative;clear:both;float:left;width:100%;padding-bottom:150px;overflow:auto;}


	/* 2 Column Left Menu Settings */
	.leftmenu {background:#CF0;}
	.leftmenu .colright {float:left;width:200%;position:relative;left:235px;background:#CCC;border-left:1px solid #D0D0D0;}
	.leftmenu .col1wrap {float:right;width:50%;position:relative;right:215px;padding-bottom:1em;}
	.leftmenu .col1 {margin:0 15px 0 225px;position:relative;right:100%;overflow:hidden;}
	.leftmenu .col2 {background:#F00;float:left;width:215px;position:relative;right:225px;}


	/*---------------------------------*/
	/* FOOTER                            */
	/*---------------------------------*/
	#ftr {position:relative;margin-top:-200px;height:150px;width:100%;clear:both;text-align:center;background:#CF0;z-index:0;}
	#ftr p {padding:10px;}

	}


/*************************************/
/* VERY HIGH-RESOLUTION LAYOUT       */
/*************************************/
@media only screen and (min-width: 1200px)
	{
  body:after {content:"1200px and up";background-color:hsla(120,60%,40%,0.7);}

	/*---------------------------------*/
	/* HEADER                          */
	/*---------------------------------*/
	#hdr {clear:both;float:left;height:130px;width:100%;border-bottom:1px solid #DDD;}
	#hdr p,#hdr h1,#hdr h2 {padding:.4em 15px 0 15px;margin:0;}



	/*---------------------------------*/
	/* CONTENT                           */
	/*---------------------------------*/
	/* Column Container */
	.colmask {position:relative;clear:both;float:left;width:100%;padding-bottom:150px;overflow:auto;}


	/* 2 Column Left Menu Settings */
	.leftmenu {background:#F0F;}
	.leftmenu .colright {float:left;width:200%;position:relative;left:235px;background:#FFF;border-left:1px solid #D0D0D0;}
	.leftmenu .col1wrap {float:right;width:50%;position:relative;right:215px;padding-bottom:1em;}
	.leftmenu .col1 {margin:0 15px 0 225px;position:relative;right:100%;overflow:hidden;}
	.leftmenu .col2 {background:#0FF;float:left;width:215px;position:relative;right:225px;}


	/*---------------------------------*/
	/* FOOTER                            */
	/*---------------------------------*/
	#ftr {position:relative;margin-top:-200px;height:150px;width:100%;clear:both;text-align:center;background:#0CC;z-index:0;}
	#ftr p {padding:10px;}

	}