c3d2-web/content/static/style/default.css

912 lines
16 KiB
CSS

/* -- General -- */
body {
font: 0.8em Verdana, Arial, sans-serif;
background-image: url(../images/background.png);
text-align: center;
min-width: 1024px;
/* max-width: 1280px; margin: 0 auto; */
}
pre {
border: thin dotted #ccc;
margin-left: 1em;
margin-right: 1em;
background-color: #fafafa;
padding: 1em;
}
#content img {
/* prevent overflow */
max-width: 33em;
}
/* -- Logo -- */
#logo::before {
margin-bottom: -20px;
height: 30px;
display: block;
border: none;
padding: 0;
line-height: 0.1em;
font-size: 1px;
}
#logo {
margin: 2em 2em 0 2em;
height: 150px;
background: url(../images/c3d2_blue.jpg);
text-align: left;
border-top-left-radius: 30px;
-moz-border-radius-topleft: 30px;
-webkit-border-top-left-radius: 30px;
border-top-right-radius: 30px;
-moz-border-radius-topright: 30px;
-webkit-border-top-right-radius: 30px;
}
#logo h1 {
position: relative;
top: 47px;
left: 23px;
padding: 65px 0 0 0;
overflow: hidden;
background-image: url(../images/logo.png);
background-repeat: no-repeat;
height: 0px !important;
}
/* -- Body -- */
#body {
display: block;
border: thin solid #ccc;
border-top: none;
background-color: white;
margin: 0 2em 0 2em;
background: #fff url(../images/background_bottom.png) no-repeat left bottom;
}
/* -- Navigation -- */
#navigation {
float: left;
text-align: left;
width: 14em;
margin: 0;
padding: 0 1em;
padding-top: 100px;
background: url(../images/ck.png) top center no-repeat;
}
#navigation ul {
list-style-type: square;
list-style-image: url(../images/bullet.png);
font-size: small;
padding-left: 2em;
padding-top: 0.2em;
border-top: #ebc63c 1px solid;
}
#navigation li {
line-height: 2em;
}
#navigation li:nth-child(7), #navigation li:nth-child(11) {
border-top: #ebc63c 1px solid;
margin-right: 2em;
}
#navigation a {
color: #676767;
text-decoration: none;
font-weight: bold;
}
#navigation a:hover {
text-decoration: underline;
}
/* -- Content -- */
#content {
text-align: left;
border-left: #ccc 1.1px dashed;
border-right: #ccc 1.1px dashed;
line-height: 1.3em;
padding: 2em;
min-height: 300px;
min-width: 30em;
margin: 0 24em 0 16em;
}
#content p {
margin: 1.5em 1em;
}
#content a {
text-decoration: none;
border-bottom: #ebc63c 1px solid;
margin-bottom: 1px;
color: #555;
}
#content a:hover {
border-width: 2px;
margin-bottom: 0px;
}
#content h1,
#content h2,
#content h3,
#content h4,
#content h5 {
letter-spacing: 3px;
margin: 0px;
background-color: transparent;
font-weight: bold;
}
#content h1 {
line-height: 1em;
}
#content h2 {
line-height: 1em;
font-size: 200%;
margin-bottom: 1em;
margin-top: 0px;
color: #333;
}
#content h3 {
line-height: 1.3em;
font-size: 130%;
margin-top: 30px;
color: #555;
}
#content h4 {
font-size: 120%;
}
#content hr.news {
visibility: hidden;
/*clear: both;*/
}
#content div.news {
padding: 1em;
margin: 0;
margin-bottom: 0.5em;
}
.news_author {
font-size: small;
font-style: italic;
margin-left: 1em;
font-weight: bold;
}
#content h2.news, #content h3.news {
border-bottom: #ebc63c 3px solid;
padding: 0px;
line-height: 1.1em;
margin-bottom: 0px;
}
#content h3.news a {
border: none;
}
#content ul {
list-style-type: square;
list-style-image: url(../images/bullet.png);
}
#content li {
margin-top: .5em;
}
/* -- Comments -- */
div.comments > p:first-child {
padding: 1em 0 0;
/* like h2 */
font-size: 1.2em;
font-weight: bold;
color: #666;
}
div.comment {
border-bottom: #ccc 1.1px dashed !important;
border-top: #ccc 1.1px dashed !important;
padding: 1em 2em 1em !important;
margin: 0 -2em -1.1px;
}
div.comment .author {
font-weight: bold;
}
p.new_comment {
margin-bottom: 4em !important;
}
p.new_comment a:before {
content: url(../images/bullet.png);
padding-right: 4px;
}
/* -- Sidebar right -- */
#rsidebar {
width: 24em;
float: right;
margin: 0;
padding: 0;
font-size: small;
text-align: left;
}
/* -- News -- */
#news {
background: url(../images/pesthoernchen.png) top center no-repeat;
padding: 90px 1em 0 2em;
}
#news h2 {
font-size: 1.2em;
border-top: #ebc63c 1px solid;
padding-top: 5%;
}
#news ul {
list-style-type: circle;
list-style-image: url(../images/bullet.png);
font-size: small;
margin-left: -1em;
/*max-width: 20em !important;*/
}
#news ul li {
line-height: 1.5em;
margin-top: .5em;
}
#news a {
color: #666;
text-decoration: none;
font-style: italic;
}
#news a:hover {
text-decoration: underline;
}
/* -- Adspace -- */
#adspace {
padding: 0.5em 1em 0 2em;
text-align: center;
}
#adspace h2 {
font-size: 1.2em;
color: #666;
padding: 0;
margin-top: 0;
}
#adspace p {
margin: 0;
padding: 0;
margin-top: 1em;
}
#adspace a {
color: #666;
text-decoration: none;
}
/* -- Upcoming -- */
#upcoming {
padding: 0 1em 0 2em;
}
#upcoming h2 {
font-size: 1.2em;
border-top: #ebc63c 1px solid;
padding-top: 5%;
}
#upcoming ul {
list-style-type: none;
font-size: small;
margin-left: -2em;
}
#upcoming ul li {
line-height: 1.5em;
margin-top: .5em;
}
#upcoming a {
color: #666;
text-decoration: none;
font-style: italic;
}
#upcoming a:hover {
text-decoration: underline;
}
/* -- footer -- */
#footer {
clear: both;
margin: 0 auto;
text-align: center;
font-size: small;
}
#footer ul, #footer li {
display: inline;
list-style-type: none;
}
#footer li a {
margin: 0 1em;
color: #676767;
text-decoration: none;
font-weight: bold;
}
#footer li a img {
border: none;
}
.hidden {
color: white;
font-size: xx-small;
clear: both;
}
#update {
font: xx-small sans-serif;
letter-spacing: 0.8px;
color: #666;
}
/* some little helpers */
img.left {
float: left;
margin-right: 1em;
}
img.right {
float: right;
margin-left: 1em;
}
dt {
font-weight: bold;
font-style: italic;
margin-left: 2em;
margin-top: 0.5em;
color: #555;
}
dt:after {
content: ":";
}
dl {
font-size: 90%;
margin-top: 2em;
margin-bottom: 3em;
}
dt.main {
font-style: normal;
font-size: 100%;
margin-left: 1em;
margin-top: 1em;
color: #000;
}
dt.main:after, dt.main:before {
content: "";
}
dd, dt {
font-size: 95%;
}
dd {
margin-left: 4em;
}
ul.details_event {
list-style-type: none;
}
abbr.dtstart, abbr.dtend {
border-bottom: none;
}
.spacestatus {
float: right;
padding: 0;
margin: 0 0 1em 0.5em;
width: 128px;
height: 128px;
}
/* -- Portal -- */
#portal {
text-align: center;
white-space-collapsing: discard;
}
#portal article {
display: inline-block;
text-align: left;
margin: -0.4em -0.15em;
}
#portal article > a {
display: block;
position: relative;
width: 25em;
height: 25em;
overflow: hidden;
border-bottom: none;
margin: 0;
}
#portal article > a:hover {
margin: 0;
}
#portal h3, #portal .footer {
position: absolute;
left: 0;
right: 0;
height: 1.2em;
margin: 0;
padding: 0;
font-size: medium;
line-height: 1.2em;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 100;
background-color: black;
color: white;
opacity: 0.7;
z-index: 2;
}
/* <header/> */
#portal h3 {
top: -1.3em;
transition: top 0.3s ease-out;
letter-spacing: 0;
}
#portal a:hover h3 {
top: 0;
transition: top 0.1s ease-in;
}
/* <footer/> */
#portal .footer {
bottom: -1.3em;
transition: bottom 0.3s ease-out;
letter-spacing: 0;
}
#portal a:hover .footer {
bottom: 0;
transition: bottom 0.1s ease-in;
}
/* <content-text/> */
#portal h4 {
position: absolute;
left: 0;
top: 1em;
line-height: 0.9em;
font-size: x-large;
font-weight: bold;
letter-spacing: 0;
color: #333;
text-shadow: -1px 0 1.5px white, 0 1px 1.5px white, 1px 0 1.5px white, 0 -1px 1.5px white;
}
#portal a:hover h4 {
color: black;
}
#portal .wiki h4 {
text-align: justify;
word-break: break-all;
}
#portal .wiki h4:before, #portal .wiki h4:after {
color: #999;
font-size: 120%;
}
#portal .wiki h4:before {
content: '[[';
}
#portal .wiki h4:after {
content: ']]';
}
/* -- Calendar -- */
table.calendar {
table-layout: fixed;
width: 99%;
border: 1px solid #ccc;
}
table.calendar th {
background: #DDD;
padding: .5em
}
table.calendar tr {
min-height: 5em;
}
table.calendar tr td {
border: none;
vertical-align: top;
background: #eee;
padding: .5em
}
table.calendar tr td span.day {
font-size: 200%;
font-weight: bold;
}
td.calweek1 {
color: black;
}
td.calsun1 {
color: red;
}
td.calweek2 {
color: #6f6f6f;
}
td.calsun2 {
color: #ff6f6f;
}
td.calweek3 {
color: #bfbfbf;
}
td.calsun3 {
color: #ffbfbf;
}
table.calendar tr td ul {
font-size: 70%;
padding: 2px 0px;
margin: 0px;
}
table.calendar tr td ul li {
list-style-type: none;
list-style-image: none;
overflow: hidden;
line-height: 1.3em;
margin-top: 1.5em;
}
table.calendar tr td:hover ul li {
overflow: visible;
}
/* -- MIME Icons -- */
/* Icons from the Tango Project, http://art.gnome.org/themes/icon/1150 */
/* CSS Idea by Tigion, http://blog.tigion.de/2007/06/28/link-indication-der-kompromiss-des-linkbildes/ */
a.mime:before {
padding-right: 0.3em;
content: url(../images/mime/text.png);
text-align: right;
vertical-align: middle;
}
a[href$=".pdf"].mime:before {
content: url(../images/mime/document.png);
}
a[href$=".ps"].mime:before {
content: url(../images/mime/document.png);
}
a[href$=".html"].mime:before {
content: url(../images/mime/document.png);
}
a[href$=".mp3"].mime:before {
content: url(../images/mime/audio.png);
}
a[href$=".ogg"].mime:before {
content: url(../images/mime/audio.png);
}
a[href$=".opus"].mime:before {
content: url(../images/mime/audio.png);
}
a[href$=".m4a"].mime:before {
content: url(../images/mime/audio.png);
}
a[href$=".m3u"].mime:before {
content: url(../images/mime/playlist.png);
}
a[href$=".pls"].mime:before {
content: url(../images/mime/playlist.png);
}
a[href$=".svg"].mime:before {
content: url(../images/mime/image.png);
}
a[href$=".png"].mime:before {
content: url(../images/mime/image.png);
}
a[href$=".gif"].mime:before {
content: url(../images/mime/image.png);
}
a[href$=".jpg"].mime:before {
content: url(../images/mime/image.png);
}
a[href$=".avi"].mime:before {
content: url(../images/mime/video.png);
}
a[href$=".mpg"].mime:before {
content: url(../images/mime/video.png);
}
a[href$=".mpeg"].mime:before {
content: url(../images/mime/video.png);
}
a[href$=".mov"].mime:before {
content: url(../images/mime/video.png);
}
a[href$=".wmv"].mime:before {
content: url(../images/mime/video.png);
}
a[href$=".ogm"].mime:before {
content: url(../images/mime/video.png);
}
a[href$=".mp4"].mime:before {
content: url(../images/mime/video.png);
}
a[href$=".mkv"].mime:before {
content: url(../images/mime/video.png);
}
a[href$=".m4v"].mime:before {
content: url(../images/mime/video.png);
}
a[href$=".ogv"].mime:before {
content: url(../images/mime/video.png);
}
a[href$=".webm"].mime:before {
content: url(../images/mime/video.png);
}
a[href$=".flv"].mime:before {
content: url(../images/mime/video.png);
}
a[href$=".tar"].mime:before {
content: url(../images/mime/pkg.png);
}
a[href$=".tar.gz"].mime:before {
content: url(../images/mime/pkg.png);
}
a[href$=".tgz"].mime:before {
content: url(../images/mime/pkg.png);
}
a[href$=".tar.bz2"].mime:before {
content: url(../images/mime/pkg.png);
}
a[href$=".tbz"].mime:before {
content: url(../images/mime/pkg.png);
}
a[href$=".zip"].mime:before {
content: url(../images/mime/pkg.png);
}
a[href$=".rar"].mime:before {
content: url(../images/mime/pkg.png);
}
a[href$=".7z"].mime:before {
content: url(../images/mime/pkg.png);
}
a[href$=".torrent"].mime:before {
content: url(../images/mime/bittorrent.png);
}
a[href$="news-rss.xml"]:before {
content: url(../images/mime/feed.png);
padding-right: 0.3em;
}
a[href$="news-atom.xml"]:before {
content: url(../images/mime/feed.png);
padding-right: 0.3em;
}
a[href$="podcast.xml"]:before, a[href$="pentaradio.xml"]:before,
a[href$="pentacast.xml"]:before, a[href$="pentamusic.xml"]:before,
a[href$="pentamedia.xml"]:before, a[href="pentacast-ogg.xml"]:before {
content: url(../images/mime/feed.png);
padding-right: 0.3em;
}
a[href$=".ics"]:before {
content: url(../images/mime/calendar.png);
padding-right: 0.3em;
}
a[href$="xcal.xml"]:before {
content: url(../images/mime/calendar.png);
padding-right: 0.3em;
}
a[href$="calendar.html"]:before {
content: url(../images/mime/calendar.png);
padding-right: 0.3em;
}
#news h2 a:before {
content: url(../images/mime/feed.png);
padding-right: 0.3em;
}
li audio, li video, li .poster {
max-width: 100%;
margin: 0;
padding: 0;
color: #333;
background-color: white;
}
.play {
display: inline-block !important;
position: relative !important;
}
.play .postercaption {
position: absolute;
z-index: 10;
text-align: center;
right: 0;
left: 0;
top: 45%;
bottom: 45%;
font-size: 300%;
color: white;
text-shadow: #666 1px 1px 0;
font-weight: bold;
}
.play:hover .postercaption {
color: #ffff7f;
text-shadow: black 1px 1px 8.5px;
opacity: 0;
-webkit-transition: opacity 3s ease-in;
-moz-transition: opacity 3s ease-in;
-o-transition: opacity 3s ease-in;
-ms-transition: opacity 3s ease-in;
transition: opacity 3s ease-in;
}
.play {
cursor: pointer;
font-weight: bold;
}
/* -- green play button -- */
#content a.play.no-poster {
display: inline-block;
padding: 0.16em 0.8em 0.2em;
vertical-align: middle;
line-height: 1.3em;
height: 1.3em;
color: white;
font-weight: bold;
text-shadow: 0 -1px rgba(0, 0, 0, 0.55);
border: 1px solid rgba(0, 0, 0, 0.34);
border-bottom-color: rgba(0, 0, 0, 0.55);
background: #83AC35;
webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.55) inset,0 1.5px rgba(0,0,0,0.155),0 -0.65em rgba(0,0,0,0.15) inset;
moz-box-shadow: 0 1px 0 rgba(255,255,255,0.55) inset,0 1.5px rgba(0,0,0,0.155),0 -0.65em rgba(0,0,0,0.15) inset;
ms-box-shadow: 0 1px 0 rgba(255,255,255,0.55) inset,0 1.5px rgba(0,0,0,0.155),0 -0.65em rgba(0,0,0,0.15) inset;
o-box-shadow: 0 1px 0 rgba(255,255,255,0.55) inset,0 1.5px rgba(0,0,0,0.155),0 -0.65em rgba(0,0,0,0.15) inset;
box-shadow: 0 1px 0 rgba(255,255,255,0.55) inset,0 1.5px rgba(0,0,0,0.155),0 -0.65em rgba(0,0,0,0.15) inset;
webkit-border-radius: 3px;
moz-border-radius: 3px;
ms-border-radius: 3px;
o-border-radius: 3px;
border-radius: 3px;
}
#content a.play.no-poster:hover {
/* prevent default a:hover effect */
border: 1px solid #333;
margin-bottom: 1px;
text-shadow: 0 -1px black;
background: #639C15;
}
.video-resource {
vertical-align: top;
width: 48%;
margin: 1em auto;
display: inline-block;
text-align: center;
}
.video-resource.playing {
width: auto;
}
.video-resource h4 {
line-height: 1em;
height: 2em;
vertical-align: bottom;
}
.video-resource img {
max-width: 95%;
}
.video-resource ul {
padding: 0;
}
.video-resource ul li.play-resource {
display: block;
}
.video-resource ul li {
display: inline-block;
margin: 0 0.8em;
}
.video-resource .size {
margin-left: 0.4em;
font-size: 85%;
color: #333;
}
.chapters {
margin: 0.5em auto;
}
.chapters dt, .chapters dd {
line-height: 2em;
margin: 0;
padding: 0;
}
.chapters dt {
width: 8em;
text-align: right;
margin-bottom: -2em;
}
.chapters dt:after {
content: '';
}
.chapters dd {
margin-left: 10em;
}
p.blockquote {
padding: .5em .5em .5em 2em;
border-left: 20px solid #eee;
background-color: #fafafa;
}
/* -- Flattr button -- */
a.flattr {
content: url(../images/flattrthis.png);
opacity: 0.8;
text-decoration: none;
border-bottom: none;
}
a.flattr:hover {
opacity: 1;
text-decoration: none;
border-bottom: none;
}
/* CSS reset for deficient HTML5 support */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display: block;
}
/* -- 30c3-countdown -- */
.countdown {
display: block;
width:180px;
height:270px;
background-image: url('../images/30c3_propaganda_180x270.png');
background-size:100%;
background-repeat:no-repeat;
max-width:180px;
margin:auto;
text-align: center;
color:white !important;
font-family:'Source Sans Pro',monospace,Helvetica,Arial,Sans-Serif;
font-size:22px;
font-weight:300;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
padding:7px;
border:none;
}
.countdown .countdownElement {
display: inline-block;
}
.countdown .foo {
color:white;
font-size:8px;
font-weight: 100;
white-space: pre;
}