@import url("http://hello.myfonts.net/count/2a34f3")
@charset "utf-8";
/* CSS Document */
  
@font-face {font-family: 'Gotham'; src: url('fonts/GothamHTF-Book.woff') src: url('fonts/GothamHTF-Book.woff') format('woff'), url('fonts/GothamHTF-Book.eot') format('embedded-opentype'), url('fonts/GothamHTF-Book.svg') format('svg');}

body, html {position:relative;width:100%;height:100%;padding:0;margin:0;}

#areaMap {position:absolute;top:0;right:0;z-index:20;width:465px;height:1070px;}
#areaMap.stage_23 {background: url('/mapTool/images/Rosemerryn_stage_23_280625.png') no-repeat;width:710px;height:900px;}
#areaMap.stage_22 {background: url('/mapTool/images/Rosemerryn_stage_22_280625.png') no-repeat;width:710px;height:1070px;}
#areaMap.stage_21 {background: url('/mapTool/images/Rosemerryn_stage_21_soldout.png') no-repeat;width:710px;height:710px;}
#areaMap.stage_20 {background: url('/mapTool/images/Rosemerryn_stage_20_sold_out.png') no-repeat;width:710px;height:710px;}
#areaMap.stage_19 {background: url('/mapTool/images/Rosemerryn_stage_19_sold_out.png') no-repeat;width:710px;height:710px;}
#areaMap.stage_18 {background: url('/mapTool/images/Rosemerryn_stage_18_sold_out.png') no-repeat;width:710px;height:710px;}
#areaMap.stage_17 {background: url('/mapTool/images/Rosemerryn_stage_17_sold_out.png') no-repeat;width:710px;height:900px;}
#areaMap.stage_16 {background: url('/mapTool/images/Rosemerryn_stage_16.png') no-repeat;width:465px;height:620px;}
#areaMap.stage_15 {background: url('/mapTool/images/Rosemerryn_stage_15_sold_out.png') no-repeat;width:710px;height:800px;}
#areaMap.stage_14 {background: url('/mapTool/images/Rosemerryn_stage_14.png') no-repeat;width:465px;height:510px;}
#areaMap.stage_13 {background: url('/mapTool/images/Rosemerryn_stage_13.png') no-repeat;width:465px;height:670px;}
#areaMap.stage_12 {background: url('/mapTool/images/Rosemerryn_stage_12.png') no-repeat;width:465px;height:510px;}
#areaMap.stage_11 {background: url('/mapTool/images/Rosemerryn_stage_11.png') no-repeat;width:465px;height:620px;}
#areaMap.stage_9 {background: url('/mapTool/images/Rosemerryn_stage_9.png') no-repeat;width:465px;height:510px;}
#areaMap.stage_4 {background: url('/mapTool/images/Rosemerryn_stage_4.png') no-repeat;width:465px;height:620px;}
#areaMap article {cursor:pointer;}

.section {font-family: 'Gotham', sans-serif; font-size:13px; src: url('fonts/GothamHTF-Medium.eot'); font-weight: 600 ; color: #fff; padding:-5px; display: inline-block; position: absolute; /*background:rgba(0,180,0,0.5);*/}
.section:hover {color:#fff;}
.section:hover .sectionPopout, .section.hoverEffect .sectionPopout {display:block;}
.section.hoverEffect .sectionPopout {display:block;height:210px;bottom:0px;z-index:200;}

.section .sectionPopout {color:#fff;display:none;position:absolute;width:330px;height:170px;top:40px;left:-150px;z-index:100;}
.section .sectionPopout span {display:block;position:absolute;width:330px;height:195px;border:solid 2px;background:#fff;}

.section .sectionPopout h2.lotHead {font-weight:600 !important; font-size:24px;  src: url('fonts/GothamHTF-Medium.eot'); height:40px; color:#fff; padding:15px 0 0 55px; margin:0 0 10px 0;}

/* General popout styles */
.section .sectionPopout span p, .section .sectionPopout p {display:block;padding:0; margin:0 0 0 115px; font-size:14px; line-height: 17px; color:#000; font-family: 'Gotham'; src: url('fonts/GothamHTF-Book.eot'); font-weight: 400;}
.section .sectionPopout a {text-decoration:none;color:#000;display:inline-block;padding:0; margin: 0 0 0 115px; font-size:14px; font-family: 'Gotham'; src: url('fonts/GothamHTF-Book.eot'); font-weight: 400;}
.section .sectionPopout a:hover {color:#000;border-bottom:dotted 1px #fff;}
.section .sectionPopout p.lotSubHead, .section .sectionPopout p.lotArea p.lotPrice {font-weight:500;}
.section .sectionPopout span p {margin-right:40px;}

.section .sectionPopout div.saleState {position:absolute;background:url('../images/sprite_lots.png') no-repeat;overflow:none;text-indent:-10000px;}

.section .sectionPopout p.lotArea {display:inline-block;margin:0 0 0 5px;position:relative;font-size:18px; font-family: 'Gotham'; src: url('fonts/GothamHTF-Book.eot');color:#fff;}

/* .section .sectionPopout p.lotPrice {display:inline-block;margin:0 0 0 5px;position:relative;font-size:18px; font-family: 'Gotham'; src: url('fonts/GothamHTF-Book.eot');color:#fff;} */


/* popout sold states */

.section.forsale .sectionPopout span {background:#b2bc55;border-color:#000;}
.section.forsale .sectionPopout h2 {background:#b2bc55;}
.section.forsale .sectionPopout div.saleState {left:10px;top:45px;width:100px;height:100px;background-position:-0px -0px;}
.forsale, .forsale .lotHead, .forsale .lotArea, .forsale  {color:#000 !important;}
.lotPrice  {color:#fff !important; font-weight:500 !important; font-size:16px !important;  * line-height: 14px !important;  margin: 0px 0px 0px 115px !important;}

.section.hold .sectionPopout span {background:#d6d9a4;border-color:#000;}
.section.hold .sectionPopout h2 {background:#d6d9a4;}
.section.hold .sectionPopout div.saleState {left:10px;top:45px;width:100px;height:100px;background-position:-100px -0px;}
.hold, .hold .lotHead, .hold .lotArea, .hold {color:#fff !important;}

.section.contract .sectionPopout span {background:#b6aaa7;border-color:#000;}
.section.contract .sectionPopout h2 {background:#b6aaa7;}
.section.contract .sectionPopout div.saleState {left:5px;top:45px;width:100px;height:100px;background-position:-200px -15px;}
.contract, .contract .lotHead, .contract .lotArea, .contract {color:#000 !important;}

.section.sold .sectionPopout span {background:#d0b686;border-color:#000;}
.section.sold .sectionPopout h2 {background:#d0b686;}
.section.sold .sectionPopout div.saleState {left:10px;top:45px;width:100px;height:100px;background-position:-300px -0px;}
.sold, .sold .lotHead, .sold .lotArea,.sold {color:#000 !important;}

/*.section.spec .sectionPopout span {border-color:#CC8752;}
.section.spec .sectionPopout h2 {background:#CC8752;}
.section.spec .sectionPopout div.saleState {left:16px;top:67px;width:91px;height:81px;background-position:-10px -10px;}
*/

/* temporarily using design popout for deadline sale
*/
.section.design .sectionPopout span {background:#f2c257;border-color:#000;}
.section.design .sectionPopout h2 {background:#f2c257;}
.section.design .sectionPopout div.saleState {left:9px;top:50px;width:100px;height:100px;background-position:-500px -0px;}
.design, .design .lotHead, .design .lotArea, .design {color:#000 !important;}
.lotPrice  {color:#fff !important; font-weight:500 !important; font-size:16px !important;  * line-height: 14px !important;  margin: 0px 0px 0px 115px !important;}

.section.show .sectionPopout span {background:#004961;border-color:#000;}
.section.show .sectionPopout h2 {background:#004961;}
.section.show .sectionPopout div.saleState {left:9px;top:67px;width:93px;height:80px;background-position:-397px -13px;}
.show, .show .lotHead, .show .lotArea, .show {color:#fff !important;}

.mapContainer {width:1070px;position:relative;clear:both;min-height:620px;}
.mapInfo {width:200px;}
.mapKey {margin:20px 0;}
.mapKey h2 {font-size:14px;font-weight:bold;margin:0;}
.mapKey h2 span {display:inline-block;width:40px;height:14px;margin:3px 10px 0 0;float:left;}
.mapInfo a {font-size: 14px; color: #974806;font-weight:bold;}
.mapHolder{/*top: 0px; right: 0px;*/ position: relative;margin:0 auto;width:465px;height:620px;}
.mapHolder-wide{/*top: 0px; right: 0px;*/ position: relative;margin:0 auto;width:710px;height:1000px;}