/* Developments Master - 22 Jul 25 - Turquoise #009999, LightSeaGreen #20B2AA, Red #dd0000, LightSlateGray #778899, Grey #ccc */
html { overflow-x:auto; overflow-y:scroll; background-color:#fff; padding:0; margin:0; }
body { color:#222; font:normal 14px Arial, Sans-serif; padding:0; margin:0; }
th { text-align:left; }
ul { list-style-type:disc; padding:0; margin-left:15px; }
ol { list-style-type:decimal; padding-left:5px; margin-left:20px; }

/* h1 32, 10.72; h2 24, 13.28; h3 18.72, 16; h4 16, 21.28; h5 13.28, 26.72; h6 10.72, 37.28 */
/* PX: 32, 24, 18.72, 16, 13.28, 12 / 10.72 | EM: 2, 1.5, 1.17, 1.00, 0.83, 0.67 */
h1 { font-size:32px; font-weight:normal; }
h2 { font-size:24px; font-weight:normal; }
h3 { font-size:19px; }
h4 { font-size:16px; }
h5 { font-size:13px; }
h6 { font-size:11px; }

p { font-weight:normal; margin:18px 0; }

a { text-decoration:none; color:#0000ee; }
a:hover { text-decoration:underline; color:#0000ee; }
a:focus { outline:none; text-decoration:none; }

hr { height:1px; color:#aaa; background-color:#aaa; border-width:0; }

@media screen and (min-width: 960px) {
    a[href*="tel:"] { pointer-events:none; cursor:default; color:#222; }
    a[href*="tel:"]:hover { text-decoration:none; }
}

/* input */
input[type="text"], input[type="password"], textarea, select { font:normal 14px Arial, Sans-serif; border:solid 1px #ccc; border-radius:3px; }
input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus { font:normal 14px Arial, Sans-serif; outline:none; border-color:#0000ff; }  
input[type="text"], input[type="password"], textarea { width:300px; height:28px; padding-left:4px; }
select { width:308px; height:32px; }
input[type="checkbox"], input[type="radio"] { width:18px; height:18px; margin-left:0; }

/* buttons */
input[type="submit"], input[type="button"], a.NextPrev, #Videos a, #ResultsRight div:first-of-type a { cursor:pointer; text-decoration:none; color:#fff; font-size:16px; 
    outline:none; background:#dd0000; padding:6px 10px 5px 10px; border:solid 1px #dd0000; border-radius:4px; }
input[type="submit"]:hover, input[type="button"]:hover, a.NextPrev:hover, #Videos a:hover, #ResultsRight div:first-of-type a:hover { background:#ee0000; }

/* all forms */
.AllForms input[type="checkbox"] { vertical-align:middle; position:relative; bottom:1px; }
.AllForms div { padding-bottom:10px; }
.AllForms div strong { display:block; padding-bottom:2px; }
.AllForms b { display:inline-block; vertical-align:top; height:10px; color:#ff0000; font-size:20px; padding-right:3px; margin-left:-12px; }
.AllForms div span { color:#ff0000; white-space:nowrap; }

/* modals */
#ModalBG { display:none; position:absolute; top:0; left:0; z-index:800; width:100%; min-height:100%; background-color:#222; opacity:0.8; }
.Modal { display:none; width:290px; height:auto; z-index:1000; position:fixed; left:50%; top:50px; margin-left:-146px;
         background-color:#fff; border:solid 1px #ccc; border-radius:6px; padding-bottom:10px; }
.Modal > span:first-child { display:block; height:46px; line-height:46px; font-weight:bold; font-size:18px; background:#eee; padding:0 0 0 20px; border-radius:6px 6px 0 0; }
.Modal > span:first-child label { display:none; }
.Modal > span:first-child span { display:block; float:right; width:44px; height:46px; background:url(../images/Close30.png) no-repeat 0 8px; }
.Modal > span:first-child span:hover { cursor:pointer; }
.Modal > div:nth-of-type(1) { padding:15px 0 0 20px; }
.Modal p { text-align:center; padding-right:15px; margin:0 0 12px 0; }
.Modal input[type="text"], .Modal textarea { width:242px; }

@media screen and (min-width: 400px) {
    .Modal { width:380px; margin-left:-192px; }
    .Modal > span:first-child label { display:inline-block; }
    .Modal > div:nth-of-type(1) { padding:15px 0 0 30px; }
    .Modal p { padding-right:30px; }
    .Modal input[type="text"], .Modal textarea { width:314px; }
}

/* loader */
img#LoaderFs, img#Loader, #ContactRight > #upsContactRight img, #ModalShare > #upsShare img { width:50px; height:50px; }
img#Loader { position:absolute; left:50%; top:50%; margin:-25px 0 0 -25px; }
#ContactRight > #upsContactRight div, #ModalShare > #upsShare div { display:flex; align-items:center; justify-content:center; position:absolute;
    top:0; left:0; z-index:800; width:100%; height:100%; background-color:#eee; opacity:0.8; }

/* overlays */
#FeaturedDevs a span, .RowImage span, #lblOverlay, .MainImageU span { z-index:100; position:absolute; left:0; display:inline-block; color:#fff; background:#dd0000;
    font-size:14px; padding:7px 10px 5px 10px; border-radius:0 0 8px 0; }

#FeaturedDevs a span:empty, #lblOverlay:empty, .MainImageU span:empty { display:none; }

.req span { color:#ff0000; }
.req input[type], .req select, .req textarea { border-color:#ff0000; }

#lblNoData, .NoData, #pnlNoData span { color:#ff0000; font-size:16px; }

/* master page */
.content-wrapper { max-width:960px; margin:0 auto; }

@media screen and (max-width: 1000px) {
    .content-wrapper { padding:0 2%; }
}

header { order-bottom:solid 1px #20B2AA; }
header > .content-wrapper { position:relative; display:flex; align-items:center; justify-content:space-between; eight:70px; }
header .content-wrapper > a { display:block; padding:10px 0 2px 10px; }
header .content-wrapper img { width:250px; }

/* nav */
nav a { display:block; text-decoration:none !important; color:#222 !important; font:normal 16px/44px Arial; }

.toggle, [id^=drop] { display:none; }

@media screen and (max-width: 750px) {
    [id^=drop]:checked + ul { display:block; }
    
    .toggle + a, nav > ul { display:none; }
    .toggle { display:block; text-decoration:none; color:#fff; font:normal 17px/34px Arial; padding:2px 18px 0 18px; }
    .toggle:hover { color:#222; }
    
    .hamburger { text-align:center; cursor:pointer; height:35px; }
    .hamburger span { display:inline-block; height:35px; width:25px; }
    .open { background:url(../images/hamburgerB.png) no-repeat 0 4px; background-size:25px; }
    .close { background:url(../images/closeB.png) no-repeat 2px 5px; background-size:22px; }
    
    nav { margin:0 -2%; }
    nav ul { position:absolute; left:0; top:52px; z-index:2000; width:100%; list-style-type:none; background:#ddd; order-top:solid 1px #20B2AA; padding:0; margin:0; }
    nav ul li { padding:0 15px; }
    nav ul li a { border-bottom:solid 1px #fff; padding-left:10px; }
    nav ul li:last-child a { border:none; }
}

@media screen and (min-width: 750px) {
    header .content-wrapper img { width:300px; }
    
    nav ul { position:static; }
    nav ul li { display:inline-block; padding:0 20px; }
    nav ul li a { border-bottom:none; }
    nav a { color:#000 !important; }
    nav a:hover { color:#dd0000 !important; }
}

#SearchWrapper { clear:both; text-align:center; background:#20B2AA; padding:10px 0 10px 0; }
#SearchWrapper h1 { color:#fff; margin:0 0 10px 0; }
#SearchWrapper input[type="text"] { width:93%; max-width:450px; height:36px; font-size:14px; border:solid 1px #20B2AA; border-radius:5px; padding-left:5px; }
#SearchWrapper input[type="submit"] { font-size:17px; padding:5px 10px; border:solid 1px #20B2AA; }
#SearchWrapper .Desktop { display:none; }
#SearchWrapper > div div:nth-child(2) span { display:inline-block; padding:5px 10px; background:#888; border-radius:4px; margin:0 10px 5px 10px; }
#SearchWrapper > div div:nth-child(2) span a { color:#fff; text-decoration:none; }
#SearchWrapper > div div:nth-child(2) span:hover { background:#999; }


#SearchWrapper > div div:nth-child(4) { text-align:center; }
#SearchWrapper > div div:nth-child(4) span { color:#fff; margin:0; }
#SearchWrapper > div div:nth-child(5) { text-align:left; padding:20px 0 0 0; }
#SearchWrapper > div div:nth-child(5) a { display:inline-block; text-align:left; text-decoration:none; width:145px; font-size:16px; color:#fff; padding-bottom:8px; }
#SearchWrapper > div div:nth-child(5) a:hover { color:#222; }

@media screen and (min-width: 550px) {
    #SearchWrapper input[type="text"] { border-radius:5px 0 0 5px; margin-bottom:0; }
    #SearchWrapper input[type="submit"] { border-radius:0 4px 4px 0; padding:9px 10px 10px 10px; margin-left:-2px; }
    #SearchWrapper .Desktop { display:block; }
    #SearchWrapper .Mobile { display:none; }
    #SearchWrapper > div div:nth-child(2) span { display:inline-block; padding:5px 10px; background:#888; border-radius:4px; margin:0 10px 5px 10px; }
    #SearchWrapper > div div:nth-child(2) span a { color:#fff; text-decoration:none; }
    #SearchWrapper > div div:nth-child(2) span:hover { background:#999; }
    #SearchWrapper > div div:nth-child(3) { display:flex; align-items:flex-start; justify-content:center; height:45px; }
    #SearchWrapper > div div:nth-child(4) span { display:block; margin:0 0 0 -134px; }
    #SearchWrapper > div div:nth-child(5) { text-align:center; padding:0 0 0 0; margin:0 auto; }
    #SearchWrapper > div div:nth-child(5) a { width:auto; padding:3px 8px; }
} 

/* search dropdown */
.ui-autocomplete { position:absolute; cursor:pointer; z-index:500 !important; }	
* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */

.ui-menu { list-style:none; display:block; float:left; text-align:left; padding:2px; margin:0; }
.ui-menu .ui-menu { margin-top:-3px; }
.ui-menu .ui-menu-item { zoom:1; float:left; clear:left; width:100%; padding:0; margin:0; }
.ui-menu .ui-menu-item a { text-decoration:none; display:block; zoom:1; cursor:pointer; color:#222; font-size:13px; padding:5px; }
.ui-menu .ui-menu-item a span { float:right; color:#999; font-size:12px; }
.ui-menu .ui-menu-item a.ui-state-hover, .ui-menu .ui-menu-item a.ui-state-active { font-weight:normal; margin:-1px; }

/* .ui-widget { font-family:Verdana, Arial, sans-serif; font-size:1.1em; } */
.ui-widget .ui-widget { font-size:1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family:Verdana, Arial, sans-serif; font-size:1em; }
.ui-widget-content { border:1px solid #ccc; background:#fff; color:#222; }
.ui-widget-content li { height:24px; }
.ui-widget-content a:hover { color:#222; background:#eee; border:1px solid #778899; }

#Body { clear:both; min-height:300px; padding-bottom:20px; }

footer { clear:both; color:#000; background-color:#dcdcdc; padding:20px 0 40px 0; }
footer .content-wrapper { display:flex; flex-flow:row wrap; justify-content:center; }
footer img { width:230px; }
footer a { display:block; max-width:120px; color:#000; padding-bottom:10px; }
footer p { font-size:12px; margin:25px 30px 40px 0; }

@media screen and (min-width: 780px) {
    footer .content-wrapper { justify-content:space-between; }
}

/* homepage */
#FeaturedDevs { display:flex; flex-flow:row wrap; justify-content:center; padding-top:20px; }
#FeaturedDevs .Dev { width:100%; max-width:400px; margin:0 auto 20px auto; }
#FeaturedDevs .Dev > div:nth-child(2) { text-align:center; color:#000; background:#eee; border-radius:5px 5px 0 0; }
#FeaturedDevs .Dev > div:nth-child(2) div:first-child { font-size:15px; padding:5px 0; }
#FeaturedDevs a { position:relative; display:block; overflow:hidden; width:100%; height:202px; padding:0; margin:0; }
#FeaturedDevs img { position:absolute; left:50%; top:50%; width:100%; min-height:202px; transform:translate(-50%,-50%); }
#FeaturedDevs .Dev div > span:last-child { display:block; font-size:18px; color:#000; padding:5px 0; }
#FeaturedDevs .Dev span span { display:block; color:#dd0000; }

/* sponsored */
#FeaturedDevs .Dev > #lblSponsored { display:inline-block; color:#fff; background:#888; border-radius:5px 5px 0 0; padding:3px 10px; margin-left:20px; }
#FeaturedDevs .Dev > #lblSponsored:empty { height:12px; background:#fff; }

@media screen and (min-width: 366px) {
    #FeaturedDevs a { height:231px; }
    #FeaturedDevs img { min-height:231px; }
}

@media screen and (min-width: 418px) {
    #FeaturedDevs a { height:264px; }
    #FeaturedDevs img { min-height:264px; }
}

@media screen and (min-width: 713px) {
    #FeaturedDevs > div { width:45%; }
    #FeaturedDevs a { height:202px; }
    #FeaturedDevs img { min-height:202px; }
    #FeaturedDevs div div { font-size:15px; }
}

@media screen and (min-width: 815px) {
    #FeaturedDevs a { height:231px; }
    #FeaturedDevs img { min-height:231px; }
}

@media screen and (min-width: 931px) {
    #FeaturedDevs a { height:263px; }
    #FeaturedDevs img { min-height:263px; }
}

/* development results */
#ResultsWrapper h1 { text-align:center; font-size:22px; }
#ResultsLeft { width:100%; max-width:700px; }
#ResultsRight { text-align:center; width:100%; max-width:700px; }
#ResultsRight #List div:first-child h3 { margin-top:0; }
#ResultsRight #List a { display:inline-block; }
#ResultsRight hr { margin-top:24px; }
#ResultsRight #About a { display:inline-block; padding-bottom:10px; }

@media screen and (min-width:550px) {
    #ResultsRight #List { display:flex; justify-content:space-between; }
    #ResultsRight { text-align:left; width:100%; max-width:700px; }
    #ResultsRight #List div:last-child h3 { margin-top:0; }
    #ResultsRight #List div { isplay:normal; width:240px; }
}

@media screen and (min-width: 1000px) {
    #ResultsWrapper h1 { text-align:left; font-size:30px; }
    #ResultsLeft { float:left; }
    #ResultsRight { float:right; display:block; text-align:left; width:240px; padding:0; }
    #ResultsRight #List { display:block; }
    #ResultsRight #List div:last-child h3 { margin-top:25px; }
}

#RegionLinks { display:none; }

#pnlPageNotFound div { font-weight:bold; padding-bottom:10px; }

#SearchText a { display:inline-block; margin-bottom:5px; }
#SearchText h2 { font-size:20px; }

@media screen and (min-width: 600px) {
    #ResultsWrapper h1 { text-align:left; font-size:30px; }
    #SearchText h2 { font-size:24px; }

    #RegionLinks { display:block; padding-bottom:15px; }
    #RegionLinks a { display:inline-block; width:180px; font-size:14px; padding-bottom:10px; }
}

#BreadcrumbsRes { display:none; }
#BreadcrumbsRes a { color:#222; }

#SortAndPager { height:40px; max-width:400px; margin:0 auto 5px auto; }
#SortAndPager > div { float:left; display:inline-block; }
#SortAndPager strong { display:none; }
#SortAndPager select { width:140px; margin-top:3px; }
#SortAndPager > span { float:right; line-height:40px; }
#SortAndPager b { font-weight:normal; }

@media screen and (min-width: 624px) {
    #BreadcrumbsRes { display:block; margin:15px 0 20px 0; }
    
    #SortAndPager { overflow:hidden; max-width:none; background-color:#eee; padding:3px 15px 0 15px; border:1px solid #ccc; border-radius:5px; }
    #SortAndPager strong { display:inline-block; padding-right:5px; }
    #SortAndPager b { font-weight:bold; }
}

a.ResultsRow { display:block; text-decoration:none; cursor:pointer; color:#222; background:#eee; margin-bottom:15px; }
a.ResultsRow:hover { background:#ddd; }

.RowImage { position:relative; width:100%; height:220px; overflow:hidden; padding:0; margin:0; }
.RowImage img { position:absolute; top:50%; left:50%; display:block; min-width:100%; min-height:100%; transform:translate(-50%,-50%); }
.RowImage div { position:absolute; left:0; bottom:0; z-index:1000; font-size:18px; color:#fff; background:#444; padding:5px 15px; }
.RowDetails { font-size:15px; min-height:50px; padding:5px 0 5px 10px; }
.RowDetails > div:first-child > div:first-child { padding:4px 0 10px 0; }
.RowDetails > div:first-child > div:last-child span { color:#dd0000; }
.RowDetails img { display:inline-block; vertical-align:top; width:auto; max-width:145px; max-height:50px; margin-right:10px; }

@media screen and (min-width: 660px) {
    .RowDetails { overflow:hidden; }
    .RowDetails > div:first-child { float:left; width:50%; }
    .RowDetails > div:last-child { float:right; } /* logos */
}

@media screen and (min-width: 800px) {
    .RowDetails { overflow:hidden; font-size:16px; }
}

/* pager */
#PagerBottom { display:block; text-align:center; line-height:28px; background-color:#eee; border:1px solid #ccc; border-radius:5px; padding:10px 0; margin-bottom:30px; }
#PagerBottom a, span.Current { display:none; font-size:16px; padding:0 6px; margin:auto 10px; }
span.Current { text-decoration:none; color:#fff; background:#888; border:1px solid #888; border-radius:3px; }
#PagerBottom a:first-child, #PagerBottom a:last-child { display:inline-block; }
#PagerBottom a.aspNetDisabled { cursor:default; color:#555; background:#aaa; border:solid 1px #ccc; }
#PagerBottom div { display:inline-block; font-size:16px; padding:1px 10px; } /* counter */

@media screen and (min-width: 700px) {
    #PagerBottom a, span.Current { display:inline-block; }
    #PagerBottom a:first-child { float:left; }
    #PagerBottom a:last-child { float:right; }
    #PagerBottom div { display:none; }
}

/* development details d */
@media screen and (min-width: 750px) {
    #pnlDevDetailsBody { padding-top:390px; }
}

/* fullscreen gallery */
.Fullscreen-wrapper { position:absolute; left:0; right:0; }
#FullscreenImg, #FullscreenVid, #FullscreenMap { display:none; position:fixed; top:0; left:0; z-index:1000; width:100%; height:100%; background-color:#000; }
.FullscreenHeader { display:flex; flex-flow:row wrap; justify-content:space-between; align-items:center; color:#fff; width:100%; height:34px;
                    position:absolute; top:0; left:0; z-index:2000; font-size:18px; background:#222; padding:1px 0 0 0; }
.FullscreenHeader div { padding:0 5px; margin:0 50px; }

#CloseFsImg, #CloseVid, #CloseMap { width:20px; height:35px; background:url(../images/Close24.png) no-repeat 5px 8px; background-size:18px; }
#CloseFsImg:hover, #CloseVid:hover, #CloseMap:hover { cursor:pointer; }
#FullscreenImg input { border-width:0; }

#ImageFs { text-align:center; display:flex; justify-content:center; align-items:center; height:100%; }
#DevImageFs { max-width:100%; max-height:100vh; width:auto; margin:auto; }

#PreviousFs, #NextFs { cursor:pointer; display:block; position:absolute; top:46%; z-index:600; width:62px; height:62px; }
#PreviousFs { left:15px; background:url(../images/Previous60.png) no-repeat; }
#NextFs { right:15px; background:url(../images/Next60.png) no-repeat; }
#CounterFs { position:absolute; right:20px; bottom:25px; z-index:600; width:70px; color:#fff; background:#000; font-size:16px; padding:5px 0 4px 0; }

/* video */
#FullscreenVid #IframeFs { position:absolute; top:50%; right:0; left:0; overflow:hidden; padding-bottom:56.2%; margin-top:-28.1%; } /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
#FullscreenVid iframe { position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; border:0; }

@media screen and (max-width: 600px) {
    .FullscreenHeader span:first-child { display:none; }
}

@media screen and (min-width: 600px) {
    .FullscreenHeader span:last-child { display:none; }
}

@media screen and (min-width: 910px) {
    #FullscreenVid #IframeFs { top:0; width:100%; margin-top:34px; }
    #FullscreenVid iframe { height:88vh; }
}

@media screen and (min-width: 1000px) {
    #FullscreenVid iframe { height:95.1vh; }
}

/* map */
.gm-fullscreen-control { display:none; }

/* panoramic wrapper */
#panoramic-wrapper { display:none; }
#Breadcrumbs { font-size:16px; color:#fff; background:#20B2AA; padding:8px 0 7px 0; margin:0 -2%; }
#Breadcrumbs a { color:#fff; }
#Breadcrumbs > div > div:first-child { text-decoration:none; background:url(../images/BackArrowW.png) no-repeat left 3px; background-size:20px; padding-left:14px; }
#Breadcrumbs > div > div:last-child { display:none; }
#Breadcrumbs input[type="submit"] { font-size:14px; color:#fff; border:none; background:none; }
#Breadcrumbs input[type="submit"]:hover { text-decoration:underline; }

@media screen and (min-width: 750px) {
    #panoramic-wrapper { display:block; position:absolute; left:0; right:0; top:104px; overflow:hidden; min-height:330px; background:#20B2AA; }
    #Breadcrumbs { position:absolute; left:0; right:0; top:71px; margin:0; }
    #Breadcrumbs .content-wrapper { display:flex; align-items:center; justify-content:space-between; }
    #Breadcrumbs > div > div:last-child { display:block; }
    
    #panoramic-wrapper #PanImg { position:relative; min-height:330px; overflow:hidden; }
    #panoramic-wrapper #PanImg img { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; min-height:330px; }
    
    #DevGroupName { position:relative; margin-top:-39px; }
    #DevGroupName div { display:inline-block; background:#444; color:#fff; font-weight:normal; font-size:25px; padding:5px 15px; }
}

#ImagesDisplayNone, .ImagesDisplayNoneU { display:none; }

/* layout */
#DevDetails-wrapper { display:flex; flex-flow:row wrap; justify-content:center; }
#ImageColumn { width:100%; max-width:650px; }

@media screen and (min-width: 750px) {
    #DevDetails-wrapper { justify-content:space-between; }
}

/* gallery */
#Gallery { position:relative; width:100%; height:203px; max-width:650px; margin:0 auto; } /* device width 360px */
#Gallery a { cursor:default; }
#Gallery img { display:block; width:100%; height:100%; object-fit:cover; }
#Gallery input { border-width:0; }
#Previous, #Next { cursor:pointer; position:absolute; top:45%; z-index:600; display:block; width:40px; height:40px; }
#Previous { left:0; background:url(../images/Previous60.png) no-repeat center center; background-size:30px; }
#Next { right:0; background:url(../images/Next60.png) no-repeat center center; background-size:30px; }

@media screen and (min-width: 400px) {
    #Gallery { height:225px; }
}

@media screen and (min-width: 450px) {
    #Gallery { height:253px; }
}

@media screen and (min-width: 500px) {
    #Gallery { height:281px; }
}

@media screen and (min-width: 550px) {
    #Gallery { height:309px; }
}

@media screen and (min-width: 600px) {
    #Gallery { height:338px; }
}

@media screen and (min-width: 650px) {
    #Gallery { height:366px; }
}

#GalleryFooter { display:flex; justify-content:space-between; align-items:center; color:#fff;
                 font-size:14px; background:#555; border-radius:0 0 6px 6px; padding:3px 30px 1px 30px; } /**/
#GalleryFooter div { display:inline-block; }
#GalleryFooter span, #GalleryFooter a { color:#fff; font-size:14px; display:inline-block; line-height:26px; padding-left:28px; margin-right:30px; }
#GalleryFooter a { background:url(../images/Video.png) no-repeat 4px 3px; background-size:19px; }
#GalleryFooter div span:last-child { background:url(../images/Map.png) no-repeat 6px 2px; background-size:16px 19px; }
#GalleryFooter div span { display:none; }

@media screen and (min-width: 800px) {
    #Previous, #Next { width:45px; height:45px; background-size:40px; }
    #GalleryFooter { justify-content:space-around; }
}

@media screen and (min-width: 900px) {
    #Gallery a { cursor:pointer; }
    #GalleryFooter div span { cursor:pointer; display:inline-block; background:url(../images/Photos.png) no-repeat left 3px; background-size:23px; }
    #GalleryFooter div span:hover { text-decoration:underline; }
}

/* sub nav */
#SubNav > div:first-child { display:flex; justify-content:space-between;align-items:center; max-width:400px;
                            background:#eee; padding:6px 15px 5px 15px; margin:20px 0; }
#SubNav div:first-child input:first-child, #SubNav div:first-child a:nth-child(2) { display:none; }
#SubNav a { display:inline-block; }
#SubNav input { border:none; background:none; color:#0000ee; font-size:16px; cursor:pointer; padding:0; }
#SubNav input:hover { text-decoration:underline; }
#SubNav div:last-child { padding:0 0 20px 0; font-size:20px; }
#SubNav div:last-child span { color:#dd0000; }
#SubNav a { font-size:16px; }
#SubNav h3 { color:#009999; }

@media screen and (min-width: 700px) {
    #SubNav > div:first-child { max-width:700px; }
    #SubNav div:first-child input:first-child, #SubNav div:first-child a:nth-child(2) { display:inline-block; }
}

@media screen and (min-width: 750px) {
    #SubNav > div:first-child { margin:0 0 20px 0; }
    #SubNav h3 { display:none; }
}

/* mobile */
#Mobile { display:none; }
#Mobile input { display:inline-block; width:40%; max-width:175px; margin:0 15px; }

@media screen and (max-width: 699px) {
    #Mobile { display:block; width:100%; text-align:center; position:fixed; bottom:0; left:50%; transform:translate(-50%, 0); z-index:1000; padding:5px 0; margin:0 auto; background:#ccc; }
}

/* catchphrase, description, pdfs, features */
#Description { line-height:19px; padding:10px 0 0 0; }
#Description h1 { font-size:18px; }

#Features span { display:block; width:150px; height:20px; background:url(../images/Check16.png) no-repeat right 0px; margin-bottom:10px; }

/* units */
#uplUnits { margin-bottom:30px; }
#uplUnits h2 { text-align:center; }

.Unit { max-width:320px; background:#f5f5f5; border:solid 1px #aaa; margin:0 auto 15px auto; }
.Unit table { width:100%; padding-bottom:3px; margin:0 0 0 10px; }
.Unit table th { width:120px; font-weight:normal; }

.HeadU { font-size:15px; font-weight:bold; margin:6px 0 2px 0; }
.HeadU div { text-align:center; padding-bottom:5px; }
.HeadU div:first-child { color:#009999; }
.HeadU div:last-child { color:#dd0000; }

.BodyU { display:flex; flex-flow:row wrap; justify-content:center; align-items:flex-start; }

.Beds { height:20px; }
.Beds td { vertical-align:middle; }
.Beds span { display:inline-block; width:45px; padding:1px 0 0 25px; }
.Beds span:empty { display:none; }
.Beds span:first-child { background:url(../images/Beds.png) no-repeat 0 1px; background-size:20px 14px; }
.Beds span:nth-child(2) { background:url(../images/Baths.png) no-repeat 0 0; background-size:20px; }
.Beds span:last-child { background:url(../images/Garages.png) no-repeat 0 0; background-size:20px; }

.Desc td { padding-bottom:6px; }

.UnitPdfs th { vertical-align:top; }
.UnitPdfs a { display:block; }

.MainImageU { position:relative; width:318px; height:200px; z-index:200; margin-bottom:2px; }
.MainImageU a { position:relative; display:block; overflow:hidden; width:100%; height:202px; padding:0; margin:0;  }
.MainImageU img { position:absolute; left:50%; top:50%; width:100%; min-height:210px; transform:translate(-50%,-50%); background:#eaeaea; }

.MainImageU input[type="image"]:first-of-type { text-decoration:none; position:absolute; right:4px; bottom:1px; z-index:500; width:28px; height:28px;
                                                background:#fff url(../Images/enlarge30.jpg) no-repeat center; background-size:24px;
                                                border:solid 1px #222; border-radius:6px 0 0 0; }

@media screen and (min-width: 670px) {
    #uplUnits h2 { text-align:left; }
    .Unit { max-width:650px; padding:0; }
    .HeadU div { display:inline-block; text-align:left; padding:0; margin-left:10px; }
    .HeadU div:first-child { width:323px; }
    .BodyU { justify-content:space-between; }
    .Unit table { width:50%; }
    .MainImageU { width:300px; }
}

/* unit gallery */
#GalleryU { display:none; width:360px; height:360px; z-index:1000; position:fixed; left:50%; top:50%; transform:translate(-50%, -50%);
            background-color:#eee; border-radius:6px; } /* device width 360px */
#GalleryU div { position:relative; z-index:600; display:flex; flex-flow:row wrap; justify-content:space-between; height:20px; padding:3px 1%; border-radius:6px 6px 0 0; }
#GalleryU div span { display:block; font-weight:bold; }
#GalleryU div span:nth-child(2) { text-align:center; line-height:24px; font-size:15px; background-color:#000; color:#fff; padding:0 8px 0 8px; border-radius:4px; }
#GalleryU #CloseU { width:25px; height:25px; background:#000 url(../images/Close24.png) no-repeat center; background-size:15px; border-radius:25px; }
#GalleryU #CloseU:hover { cursor:pointer; }
#GalleryU img { max-width:360px; max-height:360px; position:absolute; left:50%; top:50%; z-index:500; transform:translate(-50%,-50%); } /* device width 360px */
#GalleryU input { border-width:0; }
#PreviousU, #NextU { cursor:pointer; position:absolute; top:45%; z-index:600; display:block; width:40px; height:40px; }
#PreviousU { left:0; background:url(../images/Previous60.png) no-repeat center center; background-size:30px; }
#NextU { right:0; background:url(../images/Next60.png) no-repeat center center; background-size:30px; }

@media screen and (min-width: 400px) {
    #GalleryU { width:400px; height:400px; }
    #GalleryU img { max-width:400px; max-height:400px; }
}

@media screen and (min-width: 450px) {
    #GalleryU { width:450px; height:450px; }
    #GalleryU img { max-width:450px; max-height:450px; }
}

@media screen and (min-width: 500px) {
    #GalleryU { width:500px; height:500px; }
    #GalleryU img { max-width:500px; max-height:500px; }
}

@media screen and (min-width: 550px) {
    #GalleryU { width:550px; height:550px; }
    #GalleryU img { max-width:550px; max-height:550px; }
}

@media screen and (min-width: 600px) {
    #GalleryU { width:600px; height:600px; }
    #GalleryU img { max-width:600px; max-height:600px; }
}

/* contact bottom */
.DevContacts { text-align:center; min-width:190px; }
.DevContacts > div:nth-of-type(odd) { font-size:18px; }

.EmailDeveloper { padding:0 0 0 20px; }
.EmailDeveloper input[type="text"], .EmailDeveloper textarea { width:230px; }
.EmailDeveloper textarea { height:51px; }
.EmailDeveloper div:nth-child(4) { display:none; }

@media screen and (max-width: 1001px) {
    #ContactBottom { display:none; }
}

#ContactBottom .ContactDeveloper { display:flex; flex-flow:row wrap; justify-content:space-around; flex-direction:row-reverse; }
#ContactBottom .EmailDeveloper { padding:0; }
#ContactBottom { padding:15px 0 20px 0; border:solid 1px #ff0000; border-radius:5px; }
#ContactBottom h2 { text-align:center; font-size:22px; margin-top:0; }

#ContactRight { border-color:#ff0000; }
#ContactRight .EmailDeveloper { padding-top:18px; }

#EmailDevMobile { padding-bottom:25px; }
#EmailDevMobile .DevContacts { display:none; }
#EmailDevMobile .EmailDeveloper { padding:25px 0 0 41px; }

.ShowPhone a { display:inline-block; height:34px; background:url(../Images/telephone1.png) no-repeat 5px 3px; background-size:29px;
             padding:0 8px 0 38px; border:solid 1px #dd0000; border-radius:4px; margin:5px 0 15px 0; }
.ShowPhone a { display:inline-block; line-height:34px; height:100%; color:#dd0000; }

.ShowPhone div:last-child a { background:url(../Images/telephone1.png) no-repeat 5px 3px; background-size:29px; }
ShowPhone div:last-child a { background:url(../Images/whatsapp25.png) no-repeat 5px 3px; background-size:29px; }

.ShowPhone div:first-child a:hover { background-color:#ccc; }
.ShowPhone a:hover { text-decoration:none; }

/* contact column */
@media screen and (min-width: 670px) {
    #ContactColumn { width:650px; display:flex; flex-flow:row wrap; justify-content:space-between; align-self:flex-start; }
}

@media screen and (min-width: 1001px) {
    #ContactColumn { width:280px; }
}

#ContactColumn > div:last-child > div, #ContactColumn #ContactRight  { width:280px; padding:15px 0 20px 0; border:solid 1px #ccc; border-radius:5px; margin:0 0 10px 0; }
#ContactColumn h2 { text-align:center; margin-top:0; }
#ContactColumn #ContactRight { align-self:flex-start; border-color:#ff0000; }

#ContactColumn #ViewAllDevs { text-align:center; }
#ContactColumn #ViewAllDevs a { display:block; margin-top:10px; }

#Alerts { text-align:center; }
#Alerts > div:nth-child(2) span { cursor:pointer; color:#0000ee; }
#Alerts > div:nth-child(2) span:hover { text-decoration:underline; }
#Alerts span { white-space:nowrap; color:#ff0000; font-weight:bold; }

#Share { text-align:center; }
#Share > div:first-of-type > div { display:inline-block; text-align:center; padding-bottom:10px; }
#Share #hlkPrintDev { display:none; }
#Share #ModalShare { text-align:left; overflow:hidden; }
#Share #ModalShare > div div:first-child { argin-top:10px; }
#Share #ModalShare > div div:nth-of-type(3) { display:none; }
#Share #ModalShare div div:last-child { margin-top:-3px; }
#Share #ModalShare textarea { height:51px; }

#pnlMonthRepay > div { padding:0 0 0 20px; }
#pnlMonthRepay > div div { padding-bottom:20px; }
#pnlMonthRepay > div span { display:inline-block; width:120px; }
#pnlMonthRepay > div span#Repayment, #pnlMonthRepay > div span#lblInterestRate { width:auto; }
#pnlMonthRepay input[type="button"] { margin-top:20px; }

#pnlNoData { border-top:solid 1px #20B2AA; }

@media screen and (min-width: 1001px) {
    #Share #hlkPrintDev { display:inline-block; width:140px; height:30px; line-height:30px; font-size:16px;
                          background:url(../images/Print.png) no-repeat 0 0; background-size:30px; padding:0 0 0 35px; }
}

/* contact us */
#ContactUs h1 { text-align:center; }
#ContactUs > div { display:flex; flex-flow:row wrap; justify-content:center; }
#ContactUs .ContactUsForm, #ContactUsRight > div { margin:0 0 50px 0; }

.ContactUsForm, #ContactUsRight div { width:318px; background:#eee; border:solid 1px #20B2AA; border-radius:8px; padding:25px 0 25px 10px; }
.ContactUsForm > div:nth-of-type(6) { display:none; }

#ContactUsRight div { text-align:center; padding:25px 6px; }
#ContactUsRight div h2 { margin-top:0; }
#ContactUsRight div:last-child { background:none; }

@media screen and (min-width: 420px) {
    .ContactUsForm, #ContactUsRight div { width:348px; padding:25px 0 25px 40px; }
    #ContactUsRight div { padding:25px 20px; }
}

@media screen and (min-width: 830px) {
    #ContactUs h1 { text-align:left; }
    #ContactUs > div { justify-content:space-between; }
}

/* sign in */
#SignIn { border:solid 2px #ccc; border-radius:6px; margin:30px auto; }
#SignIn h1 { text-align:center; height:36px; line-height:36px; font-size:18px; background:#eee; border-radius:5px 5px 0 0; margin:0; }
#SignIn .AllForms { width:300px; padding:10px 0 10px 15px; margin:0 auto; }
#SignIn .AllForms div:last-child { padding-top:15px; }
#SignIn .AllForms input[type="text"], #SignIn .AllForms input[type="password"] { width:280px; }
.SignInFailed { color:#ff0000; font-weight:bold; margin:0 -10px; }

@media screen and (min-width: 392px) {
    #SignIn { width:370px; }
}

/* calculators */ 
#CalculatorsHeading { text-align:center; }
#NavCalc { text-align:center; }
#NavCalc > div { display:inline-block; vertical-align:top; width:180px; margin:0 auto; }
#NavCalc div.onCalc, #NavCalc div.offCalc { cursor:pointer; text-align:center; height:26px; line-height:27px; background:linear-gradient(#eee, #ccc);
                                            font-size:16px; border:solid 1px #ccc; border-radius:5px; margin-bottom:10px; }
#NavCalc div.onCalc { color:#cc0000; font-weight:bold; }
#NavCalc div.offCalc { color:#222; }
#NavCalc div.onCalc:hover, #NavCalc div.offCalc:hover { background:linear-gradient(#ccc, #eee); }
#NavCalc a { text-decoration:none; color:#222; }

#Calculators h2 { text-align:center; margin-top:7px; }
#Calculators div div { text-align:center; background:#eee; padding:3px 10px; border:solid 1px #ccc; border-radius:3px; margin-bottom:15px; }
#Calculators table { width:100%; }
#Calculators th { width:55%; font-weight:normal; font-size:13px; }
#Calculators td { white-space:nowrap; }
#Calculators input[type="text"] { width:80px; height:24px; font-size:13px; }
#Calculators hr, #Disclaimer hr { height:1px; }

div.showCalc { width:100%; }
div.hideCalc { display:none; overflow:hidden; width:650px; }

#ComparisonTitle { font-weight:bold; }
#ComparisonTitle span { padding:0 47px 0 14px; }

.CalcButtons { text-align:center; }

span#ooba { font-size:19px; }

#Disclaimer { text-align:center; margin-top:15px; }

@media screen and (min-width: 640px) {
    #CalculatorsHeading { text-align:left; }
    #NavCalc, #Calculators { display:inline-block; vertical-align:top; }
    #NavCalc { width:180px; padding-top:11px; margin-right:30px; }
    #NavCalc > div { display:block; }
    #Calculators { width:65%; }
    #Calculators th { width:310px; font-size:14px; font-weight:600; }
}

/* errors */
#Error { width:100%; }
#Error div { vertical-align:top; }
#Error div:first-child { display:none; }
#Error div:last-child { text-align:center; font-size:16px; padding-top:20px; }

@media screen and (min-width: 750px) {
    #Error div:first-child { display:inline-block; width:370px; height:270px; background:url(../images/Oops250.png) no-repeat 50px 40px; }
    #Error div:last-child { display:inline-block; padding-top:40px; }
}

/* articles */
#ArticleResults { max-width:750px; }
#ArticleResults div { line-height:20px; }
#ArticleResults a { display:block; font-size:16px; margin-bottom:10px; }
#ArticleResults span { white-space:nowrap; font-style:italic; }
#ArticleResults span span:before { content:" - "; }
#ArticleResults hr { height:1px; color:#ddd; background-color:#ddd; border:0 none; }

@media screen and (min-width: 700px) {
    #ArticleResults a { font-size:18px; }
    #ArticleResults span { display:block; margin:10px 0; }
    #ArticleResults span span:before { content:""; }
}

#ArticleResults div div a { display:inline-block; font-size:14px; margin-bottom:0; }

.ArticleDetails h1 { clear:both; }
.ArticleDetails p { line-height:20px; }
.ArticleDetails h3 { font-weight:normal; }
.ArticleDetails > strong { clear:both; display:block; margin:20px 0; }
.ArticleDetails a { font-size:17px; }

@media screen and (min-width: 769px) {
    .ArticleDetails .Left { float:left; width:45%; padding-bottom:20px; }
    .ArticleDetails .Right { float:right; width:45%; padding-bottom:20px; }
    .ArticleDetails p { clear:both; }
}

.ParkPlace img { width:100%; }
.ParkPlace li { padding-bottom:4px; }

.TheAnura img, .GrowingTrend img { width:100%; }

.Construction img { display:block; width:100%; max-width:450px; margin:20px auto 0 auto; }
.Construction h1:nth-of-type(2) { margin-bottom:0; }

.SandtonGate h1 span { font-size:18px; }
.SandtonGate img { width:100%; margin-bottom:15px; }

@media screen and (min-width: 769px) {
    .SandtonGate > div:nth-of-type(n+2) > img { display:inline-block; vertical-align:top; width:400px; }
    .SandtonGate div div { display:inline-block; vertical-align:top; width:40%; line-height:22px; padding-left:5%; }
}

@media screen and (min-width: 850px) {
    .SandtonGate div div { padding-left:10%; }
}

@media screen and (min-width: 960px) {
    .SandtonGate div div { padding-left:16%; }
}

#SpectrumTop div:first-child { width:100%; }
#SpectrumTop div:last-child { text-align:center; }
.TheSpectrum img { width:100%; max-width:400px; margin:0 auto; }

@media screen and (min-width: 800px) {
    #SpectrumTop { display:flex; flex-flow:row wrap; justify-content:space-between; }
    #SpectrumTop div:first-child { width:56%; }
    #SpectrumTop div:last-child { text-align:right; width:44%; padding-top:21px; }
    .TheSpectrum img { width:90%; margin:0; }
    .TheSpectrum #First { margin-top:4px; }
} 

/* privacy policy and terms of use */
#PrivacyTerms li { padding-bottom:8px; }
#PrivacyTerms ol ul { list-style-type:disc; padding-top:8px; }
#PrivacyTerms ol ul li { padding-bottom:0; }
#PrivacyTerms h2 { margin-top:8px; }

/* manage alerts d */
#ManageAlerts h1 { font-size:26px; }
#pnlRegister #lblCompleteForm { display:block; text-align:center; max-width:550px; background:#eee; border:solid 1px #ccc; border-radius:5px; padding:10px; margin:0 0 20px 0; }
#pnlRegister strong { display:block; padding-bottom:5px; }
#pnlRegister b { display:inline-block; vertical-align:top; height:10px; color:#ff0000; font-size:20px; margin-left:-12px; }
#pnlRegister input[type="text"] { width:250px; }
#pnlRegister select { width:257px; height:31px; }

#pnlProfile { width:280px; }
#pnlProfile > div, #pnlAlert > div { padding:0 0 15px 0; }
#pnlProfile span { color:#ff0000; }
#pnlProfile div:nth-child(4) { display:none; }
div#pnlSaveProfile, div#pnlSaveAlert { padding-top:8px; }

#pnlAlert { width:100%; max-width:450px; }
.pnlAlert { margin-top:20px; }
#pnlAlert label { font-weight:normal; }
#pnlAlert select { height:31px; }
#pnlAlert div:first-child label { padding-right:40px; }
#pnlAlert .select2 { idth:100% !important; }
#pnlAlert .select2-selection { in-height:32px !important; adding:4px 0 0 0; } /**/
#pnlAlert input[type="checkbox"] { width:15px; height:15px; margin:0 3px 0 0; }
#pnlAlert div:nth-child(4) label { display:inline-block; width:27.5%; padding-bottom:5px; } /**/
#pnlAlert > div:nth-child(5) div { display:inline-block; }
#pnlAlert > div:nth-child(5) select { width:120px; }

#pnlManage > h2 { margin-bottom:6px; }
#pnlManage > div:first-child h4 { color:red; margin-bottom:5px; }
#pnlManage > div:first-child ul { margin:0 0 0 15px; }

@media screen and (min-width: 770px) {
    #ManageAlerts h1 { font-size:32px; }
    #pnlRegister #lblCompleteForm { max-width:720px; margin:0 0 20px 0; }
    
    #pnlProfile, #pnlAlert { display:inline-block; vertical-align:top; }
    #pnlProfile { width:320px; }
    .pnlProfile { adding-top:37px; } /**/
    
    #pnlAlert { width:400px; }
    .pnlAlert { margin-top:0; }
    #pnlAlert div:first-child strong { padding-bottom:12px; } /**/
}

#AlertRow { max-width:350px; background:#eee; padding:4px 10px; margin-bottom:10px; }
#AlertRow h4 { color:#b22222; font-size:15px; margin:0 0 5px 0; }
#AlertRow > div:last-child { display:flex; align-items:center; justify-content:space-between; }
#AlertRow > div span { display:inline-block; vertical-align:top; color:#555; padding:5px 0 0 0; }