diff options
Diffstat (limited to 'cover.css')
| -rw-r--r-- | cover.css | 239 |
1 files changed, 81 insertions, 158 deletions
@@ -1,182 +1,105 @@ -/* - * Globals - */ - -/* Links */ -a, -a:focus, -a:hover { - color: #fff; +a{ + text-decoration: none; } - -/* 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; +a, label{ + color:#448; +} +a:hover{ + text-decoration:underline; + color:#77a; +} +label:hover{ + cursor:pointer; +} +h1,h2,h3,h4,h5{ + line-height:2em; + text-decoration: underline; } - - -/* - * Base structure - */ - html, body { - height: 100%; - background-color: #333; + height:100%; + font-family: "arial"; } body { - color: #fff; + color:#555; 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; +li{ + list-style:none; + text-align:left; } - -/* Padding for spacing */ -.inner { - padding: 30px; +.content{ + position:relative; + top:25%; } - - -/* - * Header - */ -.masthead-brand { - margin-top: 10px; - margin-bottom: 10px; +.navbar>li{ + display: inline-block; + padding:2em; + height:1em; } - -.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; +.dropdown{ + position:relative; + display:block; } -@media (min-width: 768px) { - .masthead-brand { - float: left; - } - .masthead-nav { - float: right; - } +input[type="checkbox"]{ + position:absolute; + top:-999px; } - - -/* - * Cover - */ - -.cover { - padding: 0 20px; +input[type="checkbox"] ~ label::after{ + content:"→ "; + display:inline-block; + width:1em; } -.cover .btn-lg { - padding: 10px 20px; - font-weight: bold; +input[type="checkbox"]:checked ~ label::after{ + content:"↓ "; } - - -/* - * Footer - */ - -.mastfoot { - color: #999; /* IE8 proofing */ - color: rgba(255,255,255,.5); +input[type="checkbox"]:checked ~ .dropdown-content{ + display:block; } - -/* - * Inverted dropdown - */ - - .inverse-dropdown { - background-color: #222; - border-color: #080808; - } - .inverse-dropdown > li > a { - color: #999; - } - .inverse-dropdown > li > a:hover { - color: #fff; - background-color: #000; - } - .inverse-dropdown > .divider { - background-color: #000; - } - - -/* - * Affix and center - */ - -@media (min-width: 768px) { - /* Pull out the header and footer */ - .masthead { - position: fixed; - top: 0; +.dropdown-content{ + position: absolute; + display:none; + border:1px solid black; + border-top:0px; + padding:1em; + border-radius:0px 0px 0.3em 0.3em; + z-index:1; +} +.dropdown-content, body{ + background-color: #eef; +} +.dropdown-content>*{ + margin:0; + padding:0; +} +@media only screen and (max-width: 1000px){ + .dropdown{ + position: inherit; + } + .navbar>li{ + display:block; + padding:0.5em; } - .mastfoot { - position: fixed; - bottom: 0; + .dropdown-content{ + position:relative; + padding:0 0 0 0; + margin: 0 0 0 0; } - /* Start the vertical centering */ - .site-wrapper-inner { - vertical-align: middle; + input[type="checkbox"]:checked ~ .dropdown-content{ + display: inherit; } - /* Handle the widths */ - .masthead, - .mastfoot, - .cover-container { - width: 100%; /* Must be percentage or pixels for horizontal alignment */ + label,a { + display:inline-block; + width:100%; } } -@media (min-width: 992px) { - .masthead, - .mastfoot, - .cover-container { - width: 700px; - } +.navigation{ + padding:0px; + margin:1em; + border:1px solid black; } + +.navigation > li{ + |