/*DEFAULTS*/
body{background-color:#781433;margin:0;pading:0;}

* {
    box-sizing: border-box;
		font-family:"Arial";
		/*font-size:16px;*/
}

.myCrimson{color:#781433;}

.myheader{width:100%;height:auto;background-color:#781433;color:white;padding:0em 0em 0em 0em;;display:block;margin:0em 0em 0em 0em;margin:0em;overflow:hidden;z-index:100;font-size:1em;}

.myheader-link-other{display:inline-block; text-decoration:none;color:white;margin:0.25em 0em 0em 0em;}

.myheader-link-other:hover{cursor:text;color:white}

.myheader-link{display:inline-block; text-decoration:none;color:#FFCCCC;margin:0.25em 0em 0em 0em;}
.myheader-link:hover{color:yellow;}

#myHome{background-color:green;color:yellow;border-color:yellow;}
#myPhone:hover{cursor:text;}


.mynav{height:auto;margin:0em;background-color:#781433;margin:0em;overflow:hidden;padding:0em;text-align:center;}


.mynav-left, .mynav-right{display:inline-block;text-decoration:none;color:orange;padding:0.3em;vertical-align:middle;margin:0em;display:inline-block;width:3em;text-align:center;font-size:1.25em;background:#781433;opacity:0.9;}

.mynav-left {position:absolute;left:0%;}
.mynav-right {position:absolute;right:0%;}

.mynav-button{background-color:#E6E6E6;text-decoration:none;color:#781433;padding:0.25em;padding-left:0.5em;padding-right:0.3em;border-radius:0.5em;margin:0.25em;display:inline-block;border-style:solid;border-width:0.05em;;border-color:#781433;vertical-align:middle;font-size:1.25em;}

.mynav-button:hover, .mynav-button-highlighted{background-color:green;color:yellow;border-color:yellow;}

.mynav-button-other{background-color:white;text-decoration:none;color:#CC0066;padding:0.25em;padding-left:0.5em;padding-right:0.3em;border-radius:0.5em;margin:0.25em;display:inline-block;border-style:solid;border-width:0.05em;;border-color:#781433;vertical-align:middle;font-size:1.25em;}

.mynav-button-other:hover{background-color:#B8E6B8;}
.mycontainer{float:right;height:auto;padding:1em 1em 0em 1em;z-index:-10;background-color:#FFFFCC;border-style:solid;border-color:#781433;font-size:1em;}

.mybody{width:100%;height:auto;overflow-x:hidden;z-index:-20;}

.myul a{text-decoration:none;color:blue;}
.myul a:hover{color:red;}

.myul li{margin-top:0.25em;}
#myHome{background-color:green;color:yellow;border-color:yellow;}
#myPhone:hover{cursor:text;}


.LCActive, .LCSold{width:100%;height:auto;display:block;padding:0.25em;z-index:-10;border-radius:0.5em;border-style:solid;border-color:#1A0040;text-decoration:none;background-color:#E6E6E6;margin-bottom:1em;margin-top:1em;overflow:hidden;color:black;}
.LCPic{float:right;height:auto;min-width:20%;max-width:100%;display:inline-block;border-width:1px;border-style:solid;border-color:black;margin-left:0.25em;margin-right:0.25em;margin-bottom:0.25em;margin-top:0.25em}

.LCTitle{display:block;margin:0em;text-align:center;color:#781433;}
.LCAddress{text-align:center;width:110%;background-color:#1A0040;color:white;display:block;margin-left:-5%;margin-top:-0.25em;padding-top:0.5em;padding-left:10%;padding-right:10%;padding-bottom:0.25em;padding-top:0.25em;margin-bottom:0.25em;}
.LCPrice{display:block;text-align:center;margin-top:0;color:black;padding-top:0.25em;}
/*.LCPrice:before{content:"$";}*/
.LCAddress span{white-space:nowrap;}
.LCActive:hover{background-color:#B8E6B8;border-color:green}
.LCActive:hover .LCAddress{background-color:green;color:yellow;}
.LCActive p span, .LCSold p span{display:inline-block; white-space:nowrap;}


/*.LCSold{width:100%;height:auto;display:block;padding:0.25em;z-index:-10;background-color:#FFCCCC;font-size:125%;border-radius:0.5em;border-style:solid;border-color:#1A0040;text-decoration:none;background-color:#E6E6E6;margin-bottom:1em;margin-top:1em;overflow:hidden;color:black;}*/


.LCWrap{display:block;margin-left:auto;margin-right:auto;}


.LCDetails{color:blue;font-weight:bold;text-align:center;}
.LCDetails:after{content:"Click here for details";}

/*NEW*/
.LCActiveListing, .LCSoldListing{width:100%;height:auto;display:block;padding:0.25em;z-index:-10;background-color:#FFCCCC;;border-radius:0.5em;border-style:solid;border-color:#1A0040;text-decoration:none;background-color:#E6E6E6;margin-bottom:1em;margin-top:1em;overflow:hidden;color:black;}

.LCActiveListing .LCCatchPhrase{display:block;margin:0em;text-align:center;color:#781433;margin-top:0.125em;margin-bottom:0.125em;padding-bottom:0;padding-top:0.25em;}
.LCSoldListing .LCCatchPhrase{display:block;margin:0em;text-align:center;color:#781433;margin-top:0.25em;margin-bottom:0.25em;padding-bottom:0.25em;padding-top:0.25em;}


.LCDetailsClick, .LCDetailsSoon{color:blue;font-weight:bold;text-align:center;}
.LCDetailsClick:after{content:"Click here for details";}
.LCDetailsSoon:after{content:"Details coming soon";}

.LCActivePrice{display:block;text-align:center;margin-top:0.125em;margin-bottom:0.125em;padding-bottom:0;padding-top:0.5em;color:black;}
.LCActivePrice span, .LCSoldAddress span, .LCCatchPhrase span, .LCActiveListing p span, .LCSoldListing p span, .LCTitleBar span{white-space:nowrap;}
.LCActiveListing .LCTitleBar, .LCSoldListing .LCTitleBar{text-align:center;width:110%;background-color:#1A0040;color:white;display:block;margin-left:-5%;margin-top:-0.25em;padding-top:0.5em;padding-left:10%;padding-right:10%;padding-bottom:0.25em;padding-top:0.25em;margin-bottom:0.25em;} 

.LCSoldAddress{display:block;text-align:center;margin-top:0.25em;margin-bottom:0.25em;padding-bottom:0;padding-top:1em;color:black;}


.LCActiveListing:hover{background-color:#B8E6B8;border-color:green}
.LCActiveListing:hover .LCTitleBar{background-color:green;color:yellow;}

.LCActiveListing p, .LCSoldListing p{margin-top:0.125em;margin-bottom:0.125em;padding-bottom:0;padding-top:0.25em;}


/*BREAKING POINTS FROM: http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning*/
/*LAYOUT 1:
Older web-enabled phones and some small form factor devices will see the narrowest layout, which should probably be primarily text-based since there is little room to work with.*/
@media only screen and (max-width:240px)  {
.mynav{float:none;display:block;width:100%;white-space:nowrap;}
.mycontainer{display:block;width:100%;border-width:0;}
.mynav-button{display:inline-block;text-align:center;}
.mynav-button-other {display:inline-block;text-align:center;}
.mynav-button-other img{height:1em;width:auto;}
.LCPic{width:95%;}
.LCWrap{width:100%;}
/*
.mynav-left, .mynav-right {display:none;}
.myvertical-line{display:none;}
*/
}

/*LAYOUT 2:
iPhones in portrait orientation get their own layout, which will also be seen on those older web-enabled phones in landscape (if such a thing exists).*/
@media only screen and (min-width:241px) and (max-width:399px) {
.mynav{float:none;display:block;width:100%;white-space:nowrap;}
.mycontainer{display:block;width:100%;border-width:0;}
.mynav-button{display:inline-block;text-align:center;}
.mynav-button-other {display:inline-block;text-align:center;}
.mynav-button-other img{height:1em;width:auto;}
.LCPic{width:97%;}
.LCWrap{width:100%;}
/*
.mynav-left, .mynav-right {display:none;}
.mynav-button{display:inline-block;}
*/
}

/*LAYOUT 3:
iPhones in landscape and most Android phones in portrait would see this layout..*/
@media only screen and (min-width:400px) and (max-width:540px) {
.mynav{float:none;display:block;width:100%;white-space:nowrap;}
.mycontainer{display:block;width:100%;border-width:0;}
.mynav-button{display:inline-block;text-align:center;}
.mynav-button-other {display:inline-block;text-align:center;}
.mynav-button-other img{height:1em;width:auto;}
.LCPic{width:97%;}
.LCWrap{width:100%;}
/*
.mynav-left, .mynav-right {display:none;}
*/
}

/*LAYOUT 4:
A layout just for Kindle Fire in portrait orientation!*/
@media only screen and (min-width:541px) and (max-width:767px) {
.mynav{float:none;display:block;width:100%;white-space:nowrap;}
.mycontainer{display:block;width:100%;border-width:0;}
.mynav-button{display:inline-block;text-align:center;}
.mynav-button-other {display:inline-block;text-align:center;}
.mynav-button-other img{height:1em;width:auto;}
.LCPic{width:160px;}
.LCWrap{width:100%;}
/*
.mynav-left {display:inline-block;position:absolute;left:0%;background:gray;opacity:0.9;}
.mynav-right {display:inline-block;position:absolute;right:0%;background:gray;opacity:0.9;}
*/
}

/*LAYOUT 5:
iPads and most tablets in portrait orientation will see this layout, as will many Android phones in landscape orientation.*/
@media only screen and (min-width:768px) and (max-width:959px) {
.mynav{float:none;display:block;width:100%;white-space:nowrap;}
.mycontainer{display:block;width:100%;}
.mynav-button{display:inline-block;text-align:center;}
.mynav-button-other {display:inline-block;text-align:center;}
.mynav-button-other img{height:1em;width:auto;}
.LCPic{width:200px;}
.LCWrap{width:90%;}
}

/*LAYOUT 6:
Finally, the widest layout will be viewable on most tablets in landscape, plus desktops.*/
@media only screen and (min-width:960px) {
.mynav{float:left;top:0;width:22%;display:inline-block;overflow:visible;color:white;vertical-align:top;padding:1em;padding-top:0em;white-space:normal;}
.mynav-button{display:block;text-align:center;white-space:normal;}
.mynav-left, .mynav-right {display:none;}
.mycontainer{display:block;width:78%;border-width:0em 1em 0em 1em;}
.mynav-button-other {display:block;text-align:center;white-space:normal;}
.mynav-button-other img{width:100%;height:auto;}
.LCPic{width:240px;}
.LCWrap{width:80%;}
}
/*SUGGESTIONS FOR OTHER SITES:
@media (min-width:320px) {  smartphones, portrait iPhone, portrait 480x320 phones (Android) }
@media (min-width:480px) { smartphones, Android phones, landscape iPhone }
@media (min-width:600px) { portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android)  }
@media (min-width:801px)  { tablet, landscape iPad, lo-res laptops ands desktops }
@media (min-width:1025px) { big landscape tablets, laptops, and desktops }
@media (min-width:1281px) {  hi-res laptops and desktops  }

OR

@media (min-width:320px) { smartphones, iPhone, portrait 480x320 phones  }
@media (min-width:481px) {  portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide.  }
@media (min-width:641px) {  portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones  }
@media (min-width:961px) {  tablet, landscape iPad, lo-res laptops ands desktops  }
@media (min-width:1025px) { big landscape tablets, laptops, and desktops  }
@media (min-width:1281px) { hi-res laptops and desktops }

*/