You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
164 lines
2.5 KiB
164 lines
2.5 KiB
/* |
|
* Globals |
|
*/ |
|
|
|
/* Links */ |
|
a, |
|
a:focus, |
|
a:hover { |
|
color: #fff; |
|
} |
|
|
|
/* Custom default button */ |
|
.btn-default, |
|
.btn-default:hover, |
|
.btn-default:focus { |
|
color: #333; |
|
text-shadow: none; /* Prevent inheritence from `body` */ |
|
background-color: #fff; |
|
border: 1px solid #fff; |
|
} |
|
|
|
|
|
/* |
|
* Base structure |
|
*/ |
|
|
|
html, |
|
body { |
|
height: 100%; |
|
/*background-color: #666;*/ |
|
background-color: rgba(0,0,0,0.7); /*dim the background*/ |
|
} |
|
body { |
|
color: #fff; |
|
text-align: center; |
|
text-shadow: 0 1px 3px rgba(0,0,0,.5); |
|
} |
|
|
|
/* Extra markup and styles for table-esque vertical and horizontal centering */ |
|
.site-wrapper { |
|
display: table; |
|
width: 100%; |
|
height: 100%; /* For at least Firefox */ |
|
min-height: 100%; |
|
-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5); |
|
box-shadow: inset 0 0 100px rgba(0,0,0,.5); |
|
} |
|
.site-wrapper-inner { |
|
display: table-cell; |
|
vertical-align: top; |
|
} |
|
.cover-container { |
|
margin-right: auto; |
|
margin-left: auto; |
|
} |
|
|
|
/* Padding for spacing */ |
|
.inner { |
|
padding: 30px; |
|
} |
|
|
|
|
|
/* |
|
* Header |
|
*/ |
|
.masthead-brand { |
|
margin-top: 10px; |
|
margin-bottom: 10px; |
|
} |
|
|
|
.masthead-nav > li { |
|
display: inline-block; |
|
} |
|
.masthead-nav > li + li { |
|
margin-left: 20px; |
|
} |
|
.masthead-nav > li > a { |
|
padding-right: 0; |
|
padding-left: 0; |
|
font-size: 16px; |
|
font-weight: bold; |
|
color: #fff; /* IE8 proofing */ |
|
color: rgba(255,255,255,.75); |
|
border-bottom: 2px solid transparent; |
|
} |
|
.masthead-nav > li > a:hover, |
|
.masthead-nav > li > a:focus { |
|
background-color: transparent; |
|
border-bottom-color: #a9a9a9; |
|
border-bottom-color: rgba(255,255,255,.25); |
|
} |
|
.masthead-nav > .active > a, |
|
.masthead-nav > .active > a:hover, |
|
.masthead-nav > .active > a:focus { |
|
color: #fff; |
|
border-bottom-color: #fff; |
|
} |
|
|
|
@media (min-width: 768px) { |
|
.masthead-brand { |
|
float: left; |
|
} |
|
.masthead-nav { |
|
float: right; |
|
} |
|
} |
|
|
|
|
|
/* |
|
* Cover |
|
*/ |
|
|
|
.cover { |
|
padding: 0 20px; |
|
} |
|
.cover .btn-lg { |
|
padding: 10px 20px; |
|
font-weight: bold; |
|
} |
|
|
|
|
|
/* |
|
* Footer |
|
*/ |
|
|
|
.mastfoot { |
|
color: #999; /* IE8 proofing */ |
|
color: rgba(255,255,255,.5); |
|
} |
|
|
|
|
|
/* |
|
* Affix and center |
|
*/ |
|
|
|
@media (min-width: 768px) { |
|
/* Pull out the header and footer */ |
|
.masthead { |
|
position: fixed; |
|
top: 0; |
|
} |
|
.mastfoot { |
|
position: fixed; |
|
bottom: 0; |
|
} |
|
/* Start the vertical centering */ |
|
.site-wrapper-inner { |
|
vertical-align: middle; |
|
} |
|
/* Handle the widths */ |
|
.masthead, |
|
.mastfoot, |
|
.cover-container { |
|
width: 100%; /* Must be percentage or pixels for horizontal alignment */ |
|
} |
|
} |
|
|
|
@media (min-width: 992px) { |
|
.masthead, |
|
.mastfoot, |
|
.cover-container { |
|
width: 700px; |
|
} |
|
}
|
|
|