pets/static/css/pets.css
html {
position: relative;
min-height: 100%;
}
body {
font-family: "Helvetica Neue", "Calibri Light", Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-bottom: 500px;
font-size: 1.6rem;
}
/** Home Page Banner **/
.banner {
background: url('../img/background.jpg') no-repeat center;
background-size: cover;
text-align: center;
}
.banner .callout {
padding-bottom: 180px;
padding-top: 250px;
}
.banner .callout .intro-text {
color: #fff;
font-size: 6.5rem;
text-transform: uppercase;
}
/** Home **/
.features {
background: url('../img/featuredbg.jpg') no-repeat center;
background-size: cover;
text-align: center;
}
.feature {
padding: 60px;
}
.c-red {
color: red;
}
.c-green {
color: #286B5A;
}
.c-blue {
color: #3a5795;
}
/** Navbar **/
.navbar {
background-color: #fff;
border: 0;
color: #333;
margin: 0;
min-height: 100px;
transition: all .3s;
}
.menu-group-name {
color: #666;
}
.navbar-collapse {
background-color: #fff;
color: #333;
}
.navbar.navbar-home {
border: 0;
}
.navbar li a {
color: inherit;
transition: all .3s;
}
.navbar-brand {
color: #333;
font-size: 20px;
height: 85px;
margin: 0 15px;
padding-top: 50px;
text-transform: uppercase;
}
.navbar-toggle {
background-color: #286B5A;
margin: 33px;
}
.navbar-toggle .icon-bar {
background-color: #e9f6f4;
}
.nav > li > a:focus,
.nav > li > a:hover,
.nav .open > a,
.nav .open > a:focus,
.nav .open > a:hover {
background-color: #fff;
}
.navbar-nav li > a:focus,
.navbar-nav li > a:hover,
.navbar-nav .open > a,
.navbar-nav .open > a:focus,
.navbar-nav .open > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover,
.navbar-brand:focus,
.navbar-brand:hover {
color: #fff;
background-color: #286B5A;
}
.navbar-nav .open .dropdown-menu .dropdown-header {
font-size: 1.5rem;
padding-left: 15px;
}
@media (min-width: 768px) {
.nav > li {
margin-top: 35px;
}
.navbar.navbar-home li a {
color: #fff;
}
.navbar-home .navbar-brand {
color: #fff;
}
.navbar.navbar-home {
background-color: transparent;
}
.navbar-collapse {
background-color: inherit;
}
.navbar li > a:focus,
.navbar li > a:hover,
.navbar .open > a,
.navbar .open > a:focus,
.navbar .open > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover,
.navbar-brand:focus,
.navbar-brand:hover {
color: #fff;
background-color: #286B5A;
}
.navbar-home .nav > li > a:focus,
.navbar-home .nav > li > a:hover,
.navbar-home .nav .open > a,
.navbar-home .nav .open > a:focus,
.navbar-home .nav .open > a:hover,
.navbar-home .dropdown-menu > li > a:focus,
.navbar-home .dropdown-menu > li > a:hover,
.navbar-home .navbar-brand:focus,
.navbar-home .navbar-brand:hover {
color: #286B5A;
background-color: #fff;
}
}
/** Sidebar **/
.sidebar {
margin-bottom: 10px;
}
.sidebar .title-text {
color: #333;
font-size: 2rem;
margin: 10px 0;
text-transform: uppercase;
}
.sidebar .nav li {
margin: 0;
text-align: center;
}
.sidebar .nav li a {
color: #11777A;
position: relative;
}
.sidebar .nav li a:after {
display: block;
position: absolute;
left: 0;
bottom: -5px;
width: 0;
height: 5px;
background-color: #11777A;
content: "";
transition: width 0.3s;
}
.sidebar .nav li a:hover:after {
width: 100%;
}
.sidebar .badge {
background-color: #286B5A;
}
/** General **/
.italic {
font-style: italic;
}
.mb-40px {
margin-bottom: 40px;
}
.ml-30px {
margin-left: 30px;
}
.heading {
background-color: #286B5A;
padding: 25px 0;
margin-bottom: 30px;
}
.heading .title-text {
font-size: 2.2rem;
color: #fff;
font-weight: 700;
margin: 0;
text-transform: uppercase;
}
.pagination li a,
.pagination li a:hover,
.pagination li a:focus {
color: #286B5A;
}
.pagination .active a,
.pagination .active a:hover,
.pagination .active a:focus {
background-color: #286B5A;
border-color: #286B5A;
}
/** About **/
.site-stats {
font-size: 2.4rem;
font-weight: 500;
margin-bottom: 10px;
margin-top: 20px;
}
.row.sponsors {
margin-bottom: 2.5rem;
}
/** Ads stuff **/
@media (min-width: 767px) {
.ad-pet-list,
.ad-pet-list-wrapper {
display: none;
}
}
/** Card Pet **/
.card-pet {
margin-bottom: 15px;
}
.card-pet .title-text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
li.active {
font-weight: 700;
}
/** Forms **/
.nonfield {
padding: 10px 0;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.errorlist {
list-style: none;
padding-left: 0;
font-weight: 700;
color: #A94442;
}
.form-inline {
display: inline;
}
.form-title {
border-bottom: 1px solid #e5e5e5;
}
/** Footer **/
.footer {
font-size: 1.4rem;
position: absolute;
bottom: 0;
background-color: #286B5A;
color: #e9f6f4;
height: 500px;
width: 100%;
}
.footer .title-text {
font-weight: 600;
margin: 0;
text-transform: uppercase;
}
.footer-head {
color: #fff;
background-color: #333;
padding: 30px 0;
}
.footer-head .small-text {
margin-top: 7px;
font-size: 1.2rem;
vertical-align: bottom;
text-transform: uppercase;
}
.footer-body {
margin-top: 30px;
}
.footer-body .title-text {
margin-bottom: 10px;
}
.footer a {
color: #fff;
}
/* Apoia-se button */
a.apoia-link {
padding: 4px 8px;
color: #fff;
font-size: 1.4rem;
background: #eb4a3b;
border-radius: 5px;
}
a.apoia-link:hover {
background: #cb4839;
text-decoration: none;
}
img.apoia-img {
height: 9px;
position: relative;
top: -1px;
}
/** Status indicator **/
.found-or-adopted {
position: relative;
width: 100%; /* for IE 6 */
}
.found-or-adopted > h2 {
position: absolute;
bottom: 33%;
left: 0;
width: 100%;
}
.found-or-adopted > h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(27, 68, 60); /* fallback color */
background: rgba(27, 68, 60, 0.7);
padding: 10px;
}
.found-or-adopted > h2 span.spacer {
padding: 0 5px;
}
/** Poster **/
.page {
width: 768px;
margin: 0 auto;
}
.print-logo {
width: 10%;
}
.poster-headline {
font-size: 6rem;
}
.poster-subheadline {
font-size: 2.5rem;
font-style: italic;
}
.font-1_8rem {
font-size: 1.8rem;
}
@media print {
body {
margin-bottom: 0;
}
}
/** Media queries **/
@media (min-width: 768px) {
body {
margin-bottom: 300px;
}
.footer {
height: 300px;
}
}