forked from I2P_Developers/i2p.www
97c0cee69a
The navbar on danimoth's theme is now absolutely positioned, which does mean that on pages without the .news div, there is an empty space above the navbar
285 lines
11 KiB
CSS
285 lines
11 KiB
CSS
@import url('reset.css');
|
|
|
|
body {
|
|
font-family:Droid Sans, Helvetica, sans-serif; font-size:10px;
|
|
background-color:#ffffdd;
|
|
min-height:800px; width:100%; padding-top:1em;
|
|
background:-moz-radial-gradient(50% 30% , circle , #fffff9, #ffffcc) no-repeat scroll 0 0 #ffffcc;
|
|
background:-webkit-radial-gradient(50% 30% , circle , #fffff9, #ffffcc) no-repeat scroll 0 0 #ffffcc;
|
|
}
|
|
a {color:#d00e0e; text-decoration:none;}
|
|
a:hover {color:#f00e0e;}
|
|
|
|
div.hide {display:none;}
|
|
|
|
div#topbar {width:80%; /*margin:1em auto;*/ margin: 1em auto 0; position:relative;}
|
|
div#topbar #logo img:hover {
|
|
filter:alpha(opacity=60);
|
|
-moz-opacity: 0.6;
|
|
opacity: 0.6;
|
|
}
|
|
div#topbar .title {
|
|
font-family:"URW Gothic L", "Century Gothic", sans-serif; text-transform:uppercase; font-size:3.5em;
|
|
font-weight:bold; text-shadow:1px 1px 1px rgba(0,0,0,.2); color:#333333;
|
|
position:absolute; top:0; right:0; line-height:41px; vertical-align:middle;
|
|
max-width: 70%; text-align: right;
|
|
}
|
|
div#topbar .languages {
|
|
display: none;
|
|
}
|
|
|
|
div.navigation {position:relative;}
|
|
ul.languages {margin: 0 2px !important;}
|
|
ul.languages li {display:inline-block; *display:inline; *zoom:1; margin: 0 -2px !important;}
|
|
|
|
/* Dropdown menu CSS */
|
|
|
|
menu ul,
|
|
#cssmenu li,
|
|
#cssmenu span,
|
|
#cssmenu a {
|
|
margin: 0;
|
|
padding: 0;
|
|
position: relative;
|
|
}
|
|
#cssmenu {
|
|
/*height: 49px;*/
|
|
height: 40px;
|
|
/*background: #141414;
|
|
background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
|
|
background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
|
|
background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
|
|
background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
|
|
background: linear-gradient(to bottom, #32323a 0%, #141414 100%);*/
|
|
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
|
|
/*border-bottom: 2px solid #0fa1e0;*/
|
|
}
|
|
#cssmenu:after,
|
|
#cssmenu ul:after {
|
|
content: '';
|
|
display: block;
|
|
clear: both;
|
|
}
|
|
#cssmenu a {
|
|
/*background: #141414;
|
|
background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
|
|
background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
|
|
background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
|
|
background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
|
|
background: linear-gradient(to bottom, #32323a 0%, #141414 100%);*/
|
|
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
|
|
/*color: #ffffff;*/
|
|
color: #d00e0e;
|
|
display: inline-block;
|
|
font-family: "URW Gothic L", "Century Gothic", sans-serif;
|
|
/*font-size: 11pt;*/
|
|
font-size: 2em;
|
|
font-weight: bold;
|
|
text-shadow: 1px 1px 1px rgba(100,20,20,.2);
|
|
/*line-height: 49px;*/
|
|
line-height: 40px;
|
|
/*padding: 0 20px;*/
|
|
padding: 0 10px;
|
|
text-decoration: none;
|
|
}
|
|
#cssmenu ul {
|
|
list-style: none;
|
|
}
|
|
#cssmenu > ul {
|
|
float: left;
|
|
padding: 0 10%;
|
|
}
|
|
#cssmenu > ul > li {
|
|
float: left;
|
|
}
|
|
#cssmenu > ul > li.right {
|
|
position: absolute;
|
|
right: 10%;
|
|
}
|
|
#cssmenu > ul > li:hover:after {
|
|
content: '';
|
|
display: block;
|
|
width: 0;
|
|
height: 0;
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 0;
|
|
border-left: 10px solid transparent;
|
|
border-right: 10px solid transparent;
|
|
/*border-bottom: 10px solid #0fa1e0;*/
|
|
border-bottom: 10px solid #abcc71;
|
|
margin-left: -10px;
|
|
}
|
|
/*#cssmenu > ul > li:first-child > a {
|
|
border-radius: 5px 0 0 0;
|
|
-moz-border-radius: 5px 0 0 0;
|
|
-webkit-border-radius: 5px 0 0 0;
|
|
}
|
|
#cssmenu > ul > li:last-child > a {
|
|
border-radius: 0 5px 0 0;
|
|
-moz-border-radius: 0 5px 0 0;
|
|
-webkit-border-radius: 0 5px 0 0;
|
|
}*/
|
|
#cssmenu > ul > li > a {
|
|
border-radius: 5px 5px 0 0;
|
|
-moz-border-radius: 5px 5px 0 0;
|
|
-webkit-border-radius: 5px 5px 0 0;
|
|
}
|
|
#cssmenu > ul > li.active > a {
|
|
box-shadow: inset 0 0 3px #000000;
|
|
-moz-box-shadow: inset 0 0 3px #000000;
|
|
-webkit-box-shadow: inset 0 0 3px #000000;
|
|
background: #070707;
|
|
background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
|
|
background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
|
|
background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
|
|
background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
|
|
background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
|
|
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
|
|
}
|
|
#cssmenu > ul > li:hover > a {
|
|
/*background: #070707;
|
|
background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
|
|
background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
|
|
background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
|
|
background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
|
|
background: linear-gradient(to bottom, #26262c 0%, #070707 100%);*/
|
|
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
|
|
box-shadow: inset 0 0 3px #000000;
|
|
-moz-box-shadow: inset 0 0 3px #000000;
|
|
-webkit-box-shadow: inset 0 0 3px #000000;
|
|
}
|
|
#cssmenu .has-sub {
|
|
z-index: 1;
|
|
}
|
|
#cssmenu .has-sub:hover > ul {
|
|
display: block;
|
|
}
|
|
#cssmenu .has-sub ul {
|
|
display: none;
|
|
position: absolute;
|
|
width: 200px;
|
|
top: 100%;
|
|
left: 0;
|
|
}
|
|
#cssmenu .has-sub ul li {
|
|
*margin-bottom: -1px;
|
|
}
|
|
#cssmenu .has-sub ul li a {
|
|
/*background: #0fa1e0;*/
|
|
/*border-bottom: 1px dotted #6fc7ec;*/
|
|
background: #abcc71;
|
|
border-bottom: 1px dotted #ffffcc;
|
|
filter: none;
|
|
font-size: 9pt;
|
|
display: block;
|
|
line-height: 120%;
|
|
padding: 10px;
|
|
}
|
|
#cssmenu .has-sub ul li:hover a {
|
|
/*background: #0c7fb0;*/
|
|
background: #8bbc51;
|
|
}
|
|
#cssmenu .has-sub .has-sub:hover > ul {
|
|
display: block;
|
|
}
|
|
#cssmenu .has-sub .has-sub ul {
|
|
display: none;
|
|
position: absolute;
|
|
left: 100%;
|
|
top: 0;
|
|
}
|
|
#cssmenu .has-sub .has-sub ul li a {
|
|
/*background: #0c7fb0;
|
|
border-bottom: 1px dotted #6db2d0;*/
|
|
background: #8bbc51;
|
|
border-bottom: 1px dotted #ffffcc;
|
|
}
|
|
#cssmenu .has-sub .has-sub ul li a:hover {
|
|
/*background: #095c80;*/
|
|
background: #6bac31;
|
|
}
|
|
|
|
/* End of dropdown menu CSS */
|
|
|
|
div#content {display:block;}
|
|
/**
|
|
* The .main class is for content wrapper on the home page (with the big banner)
|
|
*/
|
|
div#content .main {
|
|
background:url('../images/dots.png') 0 10% no-repeat rgba(171, 204, 113, 0.6); background-size:100% auto; width:auto; padding:4em 35% 4em 10%; position:relative;
|
|
margin:0 auto; text-shadow:1px 1px 1px rgba(255,255,255,.5); font-size:1.6em; line-height:1.5em;
|
|
border:2px solid #abcc71; border-left:none; border-right:none; box-shadow:0px 2px 8px rgba(0,0,0,.2)}
|
|
div#content .main h1 {font-family:"URW Gothic L", "Century Gothic", sans-serif; font-size:2.5em;
|
|
text-shadow:1px 1px 2px rgba(0,0,0,.3); color:white; margin-bottom:.5em;}
|
|
.main .get-i2p {
|
|
position:absolute; display:block; top:50%; right: 10%;
|
|
margin-top:-1em; height:1em; padding:.5em; line-height:1em;
|
|
font-size:2em; color:white; font-family:Arial, Helvetica, sans-serif; font-weight:bold;
|
|
text-transform:uppercase; text-decoration:none; text-align:center;
|
|
background:green; border-radius:.3em; -moz-transform:rotate(-5deg);
|
|
text-shadow:1px 1px 1px rgba(0,0,0,.2);
|
|
box-shadow:2px 2px 4px rgba(0, 0, 0, 0.3), 1em 3em 2em 0.5em rgba(255, 255, 255, 0.3) inset, inset -.2em -.5em 1em -0em rgba(0,0,0,.3)}
|
|
.main .get-i2p:hover {box-shadow:2px 2px 2px rgba(0, 0, 0, 0.3), inset 0 -2.2em 2.2em rgba(255, 255, 255, 0.3), inset .2em .5em 1em 0em rgba(0,0,0,.3);}
|
|
div#content .aside-wrap {width:80%; margin:2em auto;}
|
|
div#content .aside {position:relative; width:30.9%; margin-left:3%; display:inline-block; vertical-align:top; font-size:1.2em}
|
|
div#content .aside:first-child {margin-left:0%;}
|
|
div#content .aside a {font-weight:bold;}
|
|
div#content .aside h1 {padding:1em 0; border-bottom:1px solid rgba(171, 204, 113, 0.6); font-size:1.4em; color:#222200; text-shadow:1px 1px 1px rgba(0,0,0,.3)}
|
|
div#content .aside p {margin:1em 0;}
|
|
div#content .aside ul {margin:1em 0;}
|
|
div#content .aside ul li {list-style-type:none; margin:1em 0; line-height:1.3em;}
|
|
|
|
div#content .feed-icon {
|
|
background-image: url('../images/feed-icon-28x28.png');
|
|
display: block;
|
|
float: right;
|
|
height: 28px;
|
|
margin: 1em;
|
|
text-indent: -9999px;
|
|
width: 28px;
|
|
}
|
|
|
|
div#content .lastupdated {
|
|
background-color: #ffffdd;
|
|
border-radius: 0 0 5px 5px;
|
|
padding: 2px 4px;
|
|
position: absolute;
|
|
right: 10%;
|
|
text-align: right;
|
|
top: 0;
|
|
width: 200px;
|
|
}
|
|
|
|
/**
|
|
* The .inner class is for the content wrapper on inner pages (as opposed to the home page)
|
|
*/
|
|
div#content .inner {
|
|
width:auto; margin: 0 5%; padding: 4em 5%; position:relative;
|
|
background: rgba(171, 204, 113, 0.6); border-top:2px solid #abcc71;
|
|
border-left: 2px solid #abcc71; border-right: 2px solid #abcc71; border-radius: 5px 5px 0 0;
|
|
color:black; font-size:1.2em; line-height:1.4em;
|
|
}
|
|
div#content .inner h1, div#content .inner h2, div#content .inner h3 {color:white; text-shadow:1px 1px 1px rgba(0,0,0,.3); margin:1em 0 .5em; border-bottom:1px solid white; padding-bottom:.2em;}
|
|
div#content .inner h1 {font-size:2.2em; margin:0em 0 1em; width:auto;}
|
|
div#content .inner h2 {font-size:1.6em;}
|
|
div#content .inner h3 {font-size:1.4em;}
|
|
div#content .inner ul {margin:1.5em; 1em;}
|
|
div#content .inner p {margin:1em 0;}
|
|
div#content .inner td {padding:2px 5px;}
|
|
|
|
footer {width:auto; border-top:3px solid #883333; background:#552222; box-shadow:0px -4px 8px rgba(0,0,0,.3); padding:1em 10%; background:-moz-linear-gradient(#883333, #772222);}
|
|
footer .aside {display:inline-block; width:15%; margin-left:1%; vertical-align:top;}
|
|
footer .aside.first {margin-left:0;}
|
|
footer .aside.third, div#footer .aside.fifth {margin-left:2.5%}
|
|
footer .aside h1 {color:#ffdd88; font-size:1.2em; text-shadow:-1px -1px 1px rgba(0,0,0,.2); border-bottom:1px solid #ccaa66; margin:1em 0; line-height:1.3em;}
|
|
footer .aside ul {margin:0; padding:0;}
|
|
footer .aside ul li {list-style-type:none; line-height:1.5em;}
|
|
footer .aside ul li a {color:#ccaa66; font-weight:bold;}
|
|
footer .aside ul li a:hover {text-decoration:underline;}
|
|
footer a.button {padding:.5em 2em; background-color:#cc2222; border:1px solid #bb2222; border-radius:3px; display:inline-block; color:white; margin:1em auto; text-align:center; width:auto; font-weight:bold;}
|