/* Detail Styles */

html, body { width: 100%; height: 100%; margin: 0; -webkit-text-size-adjust: none; }


.cmlDetailPhoto { width: 715px; margin: 0 auto; position: relative; top: -52px; }
.cmlDetailPhotoOptions { position: relative; topXXX: 48px; left: 30px; width: 715px; margin: 0 auto; z-index: 10; }
.tn3a-thumbs { background: #222 }

#groupSummary, #groupOptions { width: 100%; padding: 0; margin: 0; box-shadow: none; }
#groupMedia { float: left; width: 720px; }
#groupPhotos { clear: both; width: 720px; }
#groupDwelling { float: left; margin: 0 0 10px 10px; width: 225px; }
#groupContact { float: right; margin: 0 2px 0 10px; width: 360px; min-height: 520px; box-shadow: 1px 2px 2px #a2a2a2; }
#groupStandards { overflow: hidden; }
#groupDisclaimer { box-shadow: none; margin-bottom: 0; }

#groupPropertyDescription { float: right; margin: 0 2px 0 10px; width: 360px; min-height: 520px; box-shadow: 1px 2px 2px #a2a2a2; }

#photoOptions {  opacity: 0.75; cursor: pointer; }
#photoOptions:hover { opacity: 1 }
#photoOptionsList { display: none; width: 200px; background: #d8d8d8; border: 1px solid #a2a2a2; box-shadow: 2px 2px 2px #222; position: absolute; top: 31px; z-index: 100; }

.photoOption {  padding: 8px 0 8px 20px; font-size: 10pt; cursor: pointer; }
.photoOption:hover { background-color: #f8f8f8; opacity: 1; }
.cmlOptionsButton { min-width: 48px; height: 22px; text-align: center; font-size: 10pt; font-weight: bold; padding: 6px 10px 4px 10px; }
.cmlOptions { float: left; margin: 5px 10px 0 0; opacity: 0.75; cursor: pointer; }
.cmlOptions:hover { opacity: 1; }
.cmlOptionsList { display: none; width: 300px; max-height: 400px; background: #d8d8d8; border: 1px solid #a2a2a2; box-shadow: 2px 2px 2px #222; position: absolute; margin-top: 36px; z-index: 100; overflow-x: hidden; }
.cmlOptionsListRight { float: right; right: 0; box-shadow: -2px 2px 2px #222; }

.cmlOption {  padding: 8px 0 8px 20px; font-size: 10pt; cursor: pointer; }
.cmlOption:hover { background-color: #f8f8f8; }

#cmlContactLogo { float: left; margin-right: 10px; min-height: 150px; }
#cmlContactLogo img { max-width: 150px; max-height: 100px; }
#cmlContactAgency { font-weight: bold; }
#cmlContactLeaseName { font-weight: bold; }
#cmlInquiryCaption { font-size: large; margin: 5px 0; }
#cmlInquirySubmitButton { text-align: center; margin: auto; height: 42px; padding: 6px 10px 4px 10px; opacity: 0.75; cursor: pointer; }
#cmlInquirySubmitButton:hover { opacity: 1; }
#cmlInquiryCaptcha div { width: 100% !important; text-align: center; }

.cmlInquirySubmit { text-align: center; margin: auto; }
.cmlInquiryField input, .cmlInquiryField select, .cmlInquiryField textarea { padding: 0.5em; margin: 0.1em 0.5em; font-size: 14px; width: calc(100% - 2em); line-height: 1.2em; }
.cmlInquiryField label { display: none; }

.cmlDetailLocation { clear: both; padding: 5px; display: inline-block; }
.cmlDetailComments { clear: both; padding: 5px; display: inline-block; }
.cmlDetailSize { clear: both; padding: 5px; display: inline-block; }
.cmlDetailSizeIcons { clear: both; display: inline-block; vertical-align: bottom; width: 90%; width: calc(100% - 10px); border: none; background: #222; color: #fff; padding: 5px; overflow: hidden; }
.cmlDetailIcon {  float: left; margin: 1px; width: 12px; }
.cmlDetailLOGO { float: left; max-height: 100px; overflow: hidden; }
.cmlDetailLOGO img { float: left; width: 100px; }

.cmlDetailTAGL { float: left; width: 75%; width: calc(100% - 150px); font-size: large; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: none; }
.cmlDetailPRID { margin-top: -24px; width: ' $ g.cmlIntThumb $ 'px; font-weight: bold; color: #fff; text-shadow: 1px 1px 1px #000, -1px -1px 1px #000; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: none; }
.cmlDetailADDR { float: left; font-size: larger; font-weight: bold; display: none; }
.cmlDetailLOCN { font-size: initial; }
.cmlDetailCPLX { font-size: initial; }
.cmlDetailDAVL { font-size: initial; padding: 4px 0; }
.cmlDetailHTYP { font-size: initial; padding: 4px 0; }
.cmlDetailBEDS { font-size: initial; padding: 4px 0; }
.cmlDetailBATH { font-size: initial; padding: 4px 0; }
.cmlDetailSQFT { font-size: initial; padding: 4px 0; }
.cmlDetailREMS { clear: both; opacity: 0.75; display: none; }
.cmlDetailRENT { float: right; padding-left: 32px; }
.cmlDetailENGY { font-size: small; padding: 4px 0; }
.cmlDetailFURN { font-size: small; padding: 4px 0; }
.cmlDetailPOOL { font-size: small; padding: 4px 0; }
.cmlDetailPETS { font-size: small; padding: 4px 0; }
.cmlDetailHCAP { font-size: small; padding: 4px 0; }

#cmlDetail { display: block; width: 100%; height: 100%; margin: 0 auto; overflow-x: hidden; overflow-y: auto; }
#cmlDetailListing { display: block; width: 100%; margin: 0 auto; }
#cmlDetailContent { max-width: 1366px; text-align: center; margin: 0 auto; }

.cmlDetailHeader { clear: both; width: 100%; padding: 0; display: inline-block; }
.cmlDetailHeaderContent { clear: both; width: 99%; width: calc(100% - 10px); padding: 5px; display: inline-block; }
.cmlDetailActions { float: right; width: 150px; overflow: hidden; white-space: nowrap; }

#mapBox { display: inline-block; height: 400px; box-shadow: 5px 5px 10px #888; }
#searchBox { display: inline-block; box-shadow: 5px 5px 10px #888; margin-bottom: 10px; }
#listingsBox { display: inline-block; margin-top: 10px; }

.cmlListing { }
.cmlDetail { padding: 0; margin: 0; display: inline-block; }
.cmlDetailHi { }
.cmlDetailContent { clear: both; display: inline-block; width: 100%; width: calc(100% - 20px); padding: 10px; cursor: pointer; }
.cmlDetailContentLeft { float: left; display: inline-block; padding-right: 10px; }
.cmlDetailContentCenter { float: left; width: 50%; display: inline-block; padding-right: 10px; }
.cmlDetailContentRight { float: right; width: 150px; display: inline-block; }
.cmlDetailThumb { border: 5px solid #fff; box-shadow: 5px 5px 5px #222; background-color: #000; background-position: center top; background-repeat: no-repeat; }
.cmlDetailDetails { width: 100%; overflow: hidden; }

@media (max-width: 660px) { 
 #groupMedia { clear: both; width: 100%; }
 #groupPhotos { clear: both; width: 100%; }
 #groupContact { min-height: unset; }
 .cmlDetailPhoto { width: 100% !important; }
 .cmlDetailPhotoOptions { width: 100% !important; left: 0 !important; }
 .tn3a-gallery { width: 100% !important; }
 .tn3a-image { width: 100% !important; left: 0 !important; }
 .tn3a-thumbs { width: 100% !important; left: 0 !important; }
 .cmlInquiryField label { display: none; }
}

@media (max-width: 770px) { 
 .fieldGroupLeft { clear: both; width: 100%; }
 .fieldGroupRight { clear: both; width: 100%; }
 .cmlDetailTAGL { width: 100% !important; max-width: 50%; }
 .cmlDetailActions { max-width: 40%; }
 .cmlDetailPhoto { width: 100% !important; }
 .cmlDetailPhotoOptions { width: 100% !important; left: 0 !important; }
 .tn3a-gallery { width: 100% !important; }
 .tn3a-image { width: 100% !important; left: 0 !important; }
 .tn3a-thumbs { width: 100% !important; left: 0 !important; }
 #cmlDetail { min-width: 320px !important; }
 #cmlInquiryCaptcha { margin-left: 0 !important; }
 #groupSummaryLeft { float: none !important; clear: both !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
 #groupSummaryCenter { float: none !important; clear: both !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
 #groupSummaryRight { float: none !important; clear: both !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
}