nyc-bookstores/css/site.css

139 lines
3.4 KiB
CSS

/* Page Specific CSS */
body {font-family: 'Lato', sans-serif; background: #fff; color: #333; font-size: 16px; margin: 0px; padding: 0px;}
h1 {font-size: 40px; font-family: 'Acme', sans-serif; font-weight: normal; margin: 0px; text-align: center;}
h2 {font-size: 30px; font-family: 'Acme', sans-serif; font-weight: normal; margin: 0px 0px;}
h3 {font-family: 'Acme', sans-serif; font-size: 24px; margin: 10px 0px;}
h4 {font-family: 'Lato', sans-serif; font-size: 20px;}
img {width: 100%;}
p a, a {color: #333; text-decoration: none; padding-bottom: 0px; border-bottom: 1px #FD9393 solid;}
a:hover {color: #47CCFC;}
small {padding: 10px 0px; font-size: 10px;}
p {margin: 0px; padding: 0px; font-size: 12px;}
li {line-height: 19px; font-size: 12px;}
ol {line-height: 24px;}
#map a {border: none;}
.mapboxgl-popup-content {font-family: 'Lato', sans-serif; font-size: 14px; padding: 10px;}
ul.nav {list-style: none; margin: 0px; padding: 10px; text-align: center;}
ul.nav li {display: inline; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding-right: 4px;}
ul.nav li h2 {font-family: 'Lato'; display: inline; font-size: 10px; letter-spacing: .1em;}
ul.nav li a {border: none;}
ul.nav li a:hover {border-bottom: 1px #FD9393 solid;}
#viewInfo {cursor: pointer;}
#selected {padding: 5px 10px; display: none}
#selected .description {font-size: 14px; padding: 4px 0px; line-height: 19px;}
#selected ul {list-style: none; margin: 15px 0px; padding: 0px;}
#siteInfo {padding: 5px 10px;}
#siteInfo p {font-size: 14px; padding: 4px; line-height: 19px;}
.store-details {text-transform: uppercase; font-size: 11px; letter-spacing: .1em; padding-right: 6px;}
.address {color: #FF4646; text-transform: uppercase; font-weight: 700;}
@media screen and (min-width: 750px) {
#map {
height: 100%;
width: 100%;
margin-left: 0px;
margin-top: 0px;
}
.floater {
border-radius: 4px;
box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.1);
background: white;
width: 390px;
}
.top-right {
position: absolute;
right: 0px;
top: 0px;
bottom:0px;
max-width:400px;
overflow:visible;
pointer-events:none;
background:none !important;
}
#header_block {
margin: 10px 10px 5px;
float: right;
pointer-events: initial
}
#info_wrapper {
margin: 5px 10px 5px;
float: right;
pointer-events: initial
}
#Stores {
margin: 5px 10px 5px;
float: right;
pointer-events: initial;
overflow: scroll;
bottom: 10px;
height: 400px;
}
#Stores table {
table-layout: fixed;
}
#Stores tr {
cursor: pointer;
font-size:14px;
}
#Stores tr td {
padding: 2px 10px;
width: 50%;
}
}
@media screen and (max-width: 750px) {
h1 {font-size: 30px; padding-top: 5px;}
h2 {font-size: 20px;}
ul.nav {padding: 0px 10px; line-height: .5;}
ul.nav li h2 {display: none;}
#map {
height: 20%;
width: 100%;
}
.mapboxgl-ctrl-top-left {
display: none;
}
.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl {
margin: 0;
}
.mapboxgl-ctrl-logo {
transform: scale(.75,.75);
}
#header_block {
margin: 0px;
}
#info_wrapper {
margin: 0px;
bottom: 0px;
overflow: scroll;
}
#selected {
padding: 10px 10px;
}
#Stores {
margin: 0px;
overflow: scroll;
height: 25%;
}
#Stores table {
table-layout: fixed;
}
#Stores tr {
cursor: pointer; font-size: 13px;
}
#Stores tr td {
padding: 2px 10px;
width: 50%;
}
}