X-Git-Url: https://source.tree.se/git?p=treecutter.git;a=blobdiff_plain;f=style%2Fbluenightsky%2Fcss%2Fstyles.css;fp=style%2Fbluenightsky%2Fcss%2Fstyles.css;h=146e482c2db930455d7e068f6a7c1fd5b393c2db;hp=0000000000000000000000000000000000000000;hb=ba356e6e6e51bee8a63eb7b24f7d04e6a292fc0d;hpb=9149a28b48cb3568c1c5a00bf1ab3e2256dcc9f9 diff --git a/style/bluenightsky/css/styles.css b/style/bluenightsky/css/styles.css new file mode 100644 index 0000000..146e482 --- /dev/null +++ b/style/bluenightsky/css/styles.css @@ -0,0 +1,467 @@ +/* Created by http://freehtml5templates.com */ + +/* reset */ +* { +margin: 0; +padding: 0; +} + +/* render html5 elements as block */ +header, footer, section, aside, nav, article { +display: block; +} + +body { +line-height: 1; +background: #0d144a; +font-family: Verdana, Arial, Helvetica, sans-serif; +color: #333; +font-size: 14px; +line-height: 18px; +} + +/* layout */ + +#wrapper { +width: 940px; +margin: 0 auto; +margin-top: 20px; +margin-bottom: 20px; +border: 3px solid #888; +background: #d5def7; +/* curved border radius */ +-moz-border-radius: 10px; +-webkit-border-radius: 10px; +} + +nav { +width: 940px; +height: 50px; +margin: 0 auto; +background: #000; +} + +#main { +width: 940px; +margin: 0 auto; +padding-top: 30px; +background: #d5def7 url(images/colbg.png) repeat-y; +overflow: hidden; +} + +#content { +float: right; +width: 640px; +margin: 0 0 10px 0; +padding: 10px 30px 5px 0; +} + +#sidebar { +float: left; +padding: 10px 0 0 20px; +width: 220px; +} + +footer { +width: 940px; +margin: 0 auto; +clear: both; +} + +/* basics */ + +h1,h2,h3,h4,h5,h6 { +font-weight: bold; +clear: both; +color: #333; +} + +a:link, a:visited { +color:#004C9A; +} + +a:hover, a:active { +color: #333; +} + +p { +margin-bottom: 18px; +} + +li { +padding-left: 5px; +} + +/* nav */ + +nav { +margin: 0 auto; +display: block; +float: left; +} + +nav .menu { +font-size: 16px; +font-weight: bold; +margin-left: 12px; +} + +nav .menu ul { +list-style: none; +margin: 0; +} + +nav .menu li { +float: left; +position: relative; +} + +nav .menu a { +display: block; +text-decoration: none; +color: #ccc; +padding: 0 30px; +line-height: 50px; +} + +nav .menu a:hover { +color: #fff; +text-decoration: underline; +} + +/* nav 1-level dropdowns */ +nav .menu li ul { +display: none; +z-index: 8888; +} + +nav .menu ul li a { +display: block; +text-decoration: none; +color: #FFF; +background: #000; +margin-left: 1px; +white-space: nowrap; +} +nav .menu ul li a:hover { +background: #333; +} + +nav .menu li:hover ul { +display: block; +position: absolute; +} + +nav .menu li:hover li { +float: none; +} + +nav .menu li:hover a { +background: #333; +} + +nav .menu li:hover li a:hover { +background: #333; +} + +/** HEADER */ + +header { +padding: 20px 0 0 0; +} + +header img { +clear: both; +display: block; +} + +header>h1 { +float: left; +margin: 0 0 18px 10px; +width: 600px; +font-size: 40px; +line-height: 36px; +} + +header>h1 a:link, header>h1 a:visited { +color: #333; +font-weight: bold; +text-decoration: none; +text-shadow: 0px 2px 3px #555; +} + +header>h2 { +color: #777; +clear: right; +float: right; +font-style: italic; +font-size: 14px; +margin: 14px 10px 18px 0; +} + +/** ARTICLES **/ + +article { +float: left; +padding: 20px 10px 10px 10px; +width: 620px; +} + +.featured { +width: 620px; +float: left; +margin-bottom: 10px; +background: #BDBFE1; +/* curved border radius */ +-moz-border-radius: 10px; +-webkit-border-radius: 10px; +} + +article .featuredthumb { +float: left; +width: 200px; +height: 200px; +/* curved border radius */ +-moz-border-radius: 10px; +-webkit-border-radius: 10px; +} + +article .featuredtitle { +float: right; +width: 400px; +font-size: 20px; +font-weight: bold; +line-height: 1.8em; +} + +article .featuredstory { +float: right; +width: 400px; +} + +article .thumb { +float: right; +width: 80px; +height: 80px; +/* curved border radius */ +-moz-border-radius: 10px; +-webkit-border-radius: 10px; +} + +article .title { +float: left; +width: 500px; +font-size: 16px; +font-weight: bold; +margin-bottom: 10px; +} + +article .story { +float: left; +width: 500px; +font-size: 12px; +} + +.even { +border-top: 1px solid #999; +border-bottom: 1px solid #999; +} + + + +#content h1, h2, h3, h4, h5, h6 { +color: #333; +margin: 0 0 20px 0; +line-height: 1.5em; +} + +.alignleft, img.alignleft { +display: inline; +float: left; +margin-right: 10px; +} + +.alignright, img.alignright { +display: inline; +float: right; +margin-left: 10px; +} + +.aligncenter, img.aligncenter { +clear: both; +display: block; +margin-left: auto; +margin-right: auto; +} + +#lightboxthumbs { +text-align: center; +padding-bottom: 10px; +} + +.frameit { +border: 5px #0D144A solid; +margin-right: 18px; +/* curved border radius */ +-moz-border-radius: 10px; +-webkit-border-radius: 10px; +} + +.frameitlast { +border: 5px #0D144A solid; +/* curved border radius */ +-moz-border-radius: 10px; +-webkit-border-radius: 10px; +} + +/* sidebar and footer widget blocks */ + +.tabwidget { +width: 200px; +font: 10px normal Verdana, Arial, Helvetica, sans-serif; +} + +ul.tabs { +margin: 0; +padding: 0; +float: left; +list-style: none; +height: 32px; +border-bottom: 1px solid #999; +border-left: 1px solid #999; +width: 100%; +} + +ul.tabs li { +float: left; +margin: 0; +padding: 0; +height: 31px; +line-height: 31px; +border: 1px solid #999; +border-left: none; +margin-bottom: -1px; +background: #e0e0e0; +overflow: hidden; +position: relative; +} + +ul.tabs li a { +text-decoration: none; +color: #000; +display: block; +font-size: 1.2em; +padding: 0 5px; +border: 1px solid #fff; +outline: none; +} + +ul.tabs li a:hover { +background: #ccc; +} + +html ul.tabs li.active, html ul.tabs li.active a:hover { +background: #BDBFE1; +border-bottom: 1px solid #BDBFE1; +} + +.tab_container { +border: 1px solid #999; +border-top: none; +clear: both; +float: left; +width: 100%; +margin-bottom: 20px; +background: #BDBFE1; +-moz-border-radius-bottomright: 5px; +-khtml-border-radius-bottomright: 5px; +-webkit-border-bottom-right-radius: 5px; +-moz-border-radius-bottomleft: 5px; +-khtml-border-radius-bottomleft: 5px; +-webkit-border-bottom-left-radius: 5px; +} + +.tab_content { +padding: 20px; +font-size: 1.2em; +line-height: 1.5em; +} + +.tab_content ul { +list-style: none; +} + +.tab_content h3 { +border-bottom: 1px dashed #03327d; +} + +.tab_content a { +color: #0A50C0; +} + +.tab_content a:hover, a:active { +color: #333; +} + +.tab_content img { +float: left; +margin-right: 15px; +border: 1px solid #03327d; +padding: 5px; +} + + +aside .standard h3 { +font-size: 18px; +text-shadow: 0px 2px 3px #ddd; +} + +aside .standard ul { +list-style: square; +color: #bbb; +margin: -15px 0 15px 25px; +} + +#footer-area { +background: #525588; +color: #FFF; +font-size: 90%; +padding: 18px 0; +overflow: hidden; +/* curved border radius */ +-moz-border-radius-bottomright: 8px; +-moz-border-radius-bottomleft: 8px; +-webkit-border-bottom-left-radius: 8px; +-webkit-border-bottom-right-radius: 8px; +} + +.footer-segment { +float: left; +margin-right: 20px; +margin-left: 20px; +width: 190px; +} + +footer aside h4 { +color: #faf0e6; +font-size: 16px; +line-height: 1.5em; +} + +footer ul { +list-style: none; +margin: -15px 0; +} + +footer a:link, footer a:visited { +color: #ccc; +} + +footer a:hover { +text-decoration: underline; +} + +footer p { +margin-top: -15px; +color: #faf0e6; +}