/* Main styles for page. */
html, body {
border: 0px;
margin: 0px;
padding: 5px 0px 0px 0px;
background-color: #CCA;
font-family: helvetica, arial, verdana, serif;
font-size: .9em;
color: #000; /* Heh-heh, this used to be "inherit". :x */
}
body {
background: #CCA url("bg_main.png") repeat-x;
color: inherit;
}
/* CSS3: Custom selection colors. */
::selection {
background: #FC3;
color: #300;
}
a::selection, a *::selection {
color: #F00;
background-color: #FF6;
}
a:hover::selection, a:hover *::selection {
color: #FF0;
background-color: #F90;
}
/* CSS3: Custom selection colors for Mozilla-based browsers. */
::-moz-selection {
background: #FC3;
color: #300;
}
a::-moz-selection, a *::-moz-selection {
color: #F00;
background-color: #FF6;
}
a:hover::-moz-selection, a:hover *::-moz-selection {
color: #FF0;
background-color: #F90;
}
/*
* Funny block {
*
* Notes:
* Opera supports the CSS but not the "href" attribute on the "<link>"-elements.
* Opera also has alignment quirks in Windows.
*
* I thought this up based on a part of an old design by ACJ and thought of pushing it a step
* further by also including the head and title elements as block-elements into the page.
*
* Depending on functionality and how much I like it, I may remove this at some point in time.
* That, or remove support for Opera.
*
*/
head {
margin-bottom: -78px;
display: block;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
text-align: center;
background-color: #DDA;
padding-top: 6px;
-moz-opacity: 0.85;
z-index: 50;
}
head:hover, head:focus {
margin-bottom: 0px;
-moz-opacity: 1;
}
head:focus title, head:hover title {
font-size: 24px;
padding: 4px;
border-bottom: 1px solid #000;
}
title {
background: #EEB url("bg_topic.png") repeat-x;
color: inherit;
display: block;
border-top: 1px solid #000;
font-size: 10px;
margin: -115px auto 78px auto;
padding: 2px;
font-weight: bold;
/*
* The following line is a somewhat bizar fix for Opera.
*
* Elaboration:
* Opera parses the Javascript-enhanced title directly into this (now) block-element.
* This CSS makes sure it stays as-is while preserving the actual title of the window.
*
* Don't ask me why it works like it does or why Mozilla differs, though.
* In my opinion; Opera does a good job parsing the Javascript-edited title into the page but
* at the same time, why doesn't this change the window's title as it should (execution flow?)?
* Mozilla just keeps the Javascript-edited title and original title node's value (as it should).
*
* I don't know, it all seems a bit odd but with all the crazy CSS going on in this section I
* guess I shouldn't complain. :P
*
*/
content: "Agilo's Weblog";
}
title:after {
content: " - Control Panel";
font-size: smaller;
}
link[rel][href][title] {
font-size: 10px;
display: block;
width: 190px;
margin: 0px auto;
padding: 0.197em;
color: #600;
-moz-border-radius: 20px;
}
link[rel][href][title]:hover {
background-color: #FFB;
color: #F00;
-moz-opacity: 0.75;
cursor: pointer;
}
link[rel][href][title]:after {
content: attr(title);
}
link[rel="prev"] {
float: left;
}
link[rel="next"] {
float: right;
}
link[rel="prev"]:before {
content: "<< ";
display: block;
}
link[rel="next"]:before {
content: " >>";
display: block;
}
link[media], link[rel="search"], link[rel="Shortcut Icon"] {
visibility: hidden;
line-height: 0px;
padding: 0px;
}
/* } */
/* Page links. */
a, a:link, a:visited {
text-decoration: underline;
background-color: inherit;
color: #700;
}
a:hover, a:active {
text-decoration: none;
color: #F00;
background-color: #EEB;
}
/* Header of the page. */
body #head {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
border-top: 3px solid #000;
border-bottom: 4px solid #660;
line-height: 0px;
}
body #header {
margin: 1px auto 32px auto;
width: 99.1%;
line-height: 15px;
height: 3.9em;
text-align: center;
border: 1px solid #993;
background-color: #EEB;
color: inherit;
overflow: hidden;
}
body #header:hover, body #header:hover h1:before {
background-color: #EEC;
color: inherit;
}
body #header h1 {
margin-right: -36px;
color: #933;
background-color: transparent;
}
body #header h1:before {
margin: -0.40em auto -1.58em auto;
padding-right: 9.5em;
display: block;
content: "bla";
text-indent: -5000px;
width: 1em;
height: 1.42em;
color: inherit;
background: #EEB url("logo-agilo-36x36.png") no-repeat;
}
body #header h1:hover:before {
color: inherit;
background-color: #EEC;
}
body #header h1 a, body #header h1 a:hover {
text-decoration: none;
height: 20px;
background-color: inherit;
color: #933;
display: block;
margin-top: -16px;
padding-top: 15px;
/*
* Background instead of (boring?) h1 text (disabled for now due to some bugs).
* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*
* height: 1em;
* text-indent: -5000px;
* background: url("blog_title1.png") no-repeat;
* background-position: center;
* padding-bottom: 5px;
*
*/
}
/*
* Removed for now, it has more than a few bugs.
* - - - - - - - - - - - - - - - - - - - - - - -
*
* body #foot {
* margin-top: 10px;
* width: 100%;
* border-top: 4px solid #660;
* border-bottom: 3px solid #000;
* line-height: 0px;
* }
*
*/
/* Random quote. */
body #quote {
text-align: center;
margin: 35px 0px 35px 0px;
font-size: 1.2em;
}
body #quote small q {
font-style: italic;
}
body #quote small cite {
font-weight: bold;
}
body #quote small:before {
content: "\275d\20\20"; /* Unicode open quotation. */
vertical-align: 8px;
}
body #quote small cite:after {
content: "\20\20\275e"; /* Unicode close quotation. */
vertical-align: -15px;
}
/*
* For browsers to render the above unicode characters, they
* need compatible fonts (like Arial Unicode MS for Windows,
* which comes with Microsoft Office).
*
*/
body #quote small:before, body #quote small cite:after {
font-size: x-large;
font-style: normal;
font-weight: bold;
color: #885;
background-color: inherit;
}
/* Generic styles used multiple times. */
h2 {
padding: 0px;
margin: -2px;
}
.line, .line2 {
margin: 15px 0px;
border: 1px solid #663;
visibility: hidden;
}
.line2 {
visibility: visible;
}
.invisible {
visibility: hidden;
margin: 0px;
padding: 0px;
line-height: 0px;
letter-spacing: -12px;
content: "";
display: none;
}
.left {
float: left;
}
.right {
text-align: right;
}
.center {
text-align: center;
}
img {
border: 0px;
}
.highlight {
background-color: #3F3;
color: #300;
padding: 1px;
font-weight: bold;
}
.submitbutton {
width: 75px;
}
.pdate {
display: block;
margin-top: 40px;
}
.wintersport_photos {
margin-top: 20px;
text-align: center;
}
.wintersport_photos caption {
width: 75%;
margin: 0px auto -2px 75px;
border: 3px solid #EE5;
background-color: #EE7;
color: #630;
padding: 3px;
font-size: 1.3em;
font-weight: bold;
letter-spacing: 1px;
}
.wintersport_photos tr td {
padding-top: 15px;
padding-bottom: 0px;
}
.cisco_grades tr td {
padding: 0px 22px;
}
.cisco_grades th {
padding: 4px 0px;
text-align: center;
}
kbd {
background-color: #FFB;
color: inherit;
}
del {
font-size: 80%;
color: #666;
background-color: inherit;
}
a del {
color: #996;
background-color: inherit;
}
a:hover del {
color: #663;
background-color: inherit;
}
ins {
text-decoration: none;
}
ins:before {
content: "/";
}
abbr[title], acronym[title] {
cursor: help;
}
/*
* This could be used some day..
* - - - - - - - - - - - - - - -
*
* acronym::after, abbr::after {
* content: " (" attr(title) ")";
* }
*
*/
/* The notice box for internet Explorer. */
.notice {
width: 100%;
text-align: center;
margin: 175px 0px 150px 0px;
}
.notice .txt {
width: 594px;
border: 3px solid #F00;
margin: auto 0px;
padding: 20px;
background-color: #FF9;
color: inherit;
letter-spacing: 1px;
font-size: 14px;
}
.notice .txt em {
text-decoration: underline;
}
.notice .txt .note {
text-align: left;
margin: -13px 0px 12px -13px;
letter-spacing: 0px;
font-weight: bold;
font-size: 16px;
color: #F00;
background-color: inherit;
}
/* Search. */
#search {
background: #FFC url("search_icon.gif") no-repeat;
background-position: 0 50%;
color: inherit;
padding-left: 22px;
border: 2px solid #C99;
width: 90px;
}
#search:focus {
border: 2px solid #E66;
background-color: #FFB;
color: inherit;
}
.searchbox {
text-align: right;
margin-top: -25px;
}
.searchresults {
background-color: #EEB;
color: inherit;
border: 2px solid #000;
padding: 10px;
margin-top: 25px;
}
/* Weblog entries. */
body #main {
width: 100%;
text-align: center;
}
body #main #body {
width: 600px;
margin: 0px auto;
text-align: left;
}
body #main #body .entry {
background: #EEB url("bg_topic.png") repeat-x;
background-position: 0px 35px;
color: inherit;
}
body #main #body div[class|="entry"] {
border-bottom: 2px solid #000;
margin: 20px 0px;
}
body #main #body div[class|="entry"]:hover {
border-bottom: 2px solid #885;
}
body #main #body .date {
background: #333 url("bar.png") no-repeat;
color: #EEB;
margin-top: 0px;
padding: 5px 4px 4px 4px;
text-align: right;
margin-bottom: 10px;
}
body #main #body .date a {
display: block;
height: 1.2em; /* The following statements are about FireFox (1.5): */
padding-top: 2px; /* <- 2px on Linux, 1px on Windows... */
margin: -1px 0px 1px 10px; /* <- 1px on Linux, 0px on Windows (top margin)... */
} /* I hate platform specific tweaks... */
body #main #body .date a, body #main #body .date a:hover {
color: #EEB;
text-decoration: none;
background: #333 url("arrow_left.gif") no-repeat;
background-position: top right;
padding-right: 21px;
line-height: 1em;
}
body #main #body .date a:target {
color: #FFF;
letter-spacing: 1px;
background: #333 url("arrow_left_active.gif") no-repeat;
background-position: top right;
}
body #main #body .topic {
text-align: center;
text-transform: capitalize;
letter-spacing: 0.5px; /* <- Hahaha, this seems to work... but... */
font-weight: bold; /* how the hell can you split a pixel? XD */
font-size: 1.5em; /* It seems I found an answer: files/0.5px.txt */
}
body #main #body .text {
width: 591px;
border-top: 1px solid #CC9;
margin: 10px 0px 0px 0px;
padding: 6px 4px 20px 5px;
text-align: justify;
overflow: auto;
background: #EEA url('post2.gif') no-repeat;
background-position: 99% 8px;
color: inherit;
}
body #main #body div[class|="entry"]:hover .text a,
body #main #body div[class|="entry"]:hover .text a:link {
background-color: #EE8;
color: #500;
}
body #main #body div[class|="entry"]:hover .text a:hover {
background-color: #EEB;
color: #F00;
}
body #main #body .text img {
background-color: #EEB;
border: 1px solid #999;
padding: 5px;
margin-top: 3px;
color: inherit;
}
body #main #body .text img:hover {
border: 1px solid #666;
background-color: #EC6;
color: inherit;
}
body #main #body .text img[width="15"],
body #main #body .text img[width="15"]:hover {
color: inherit;
background-color: inherit;
border: 0px;
padding: 0px;
margin-top: 0px;
}
body #main #body .text *[id|="desc"] {
font-size: .9em;
margin-top: -2px;
}
body #main #body .text *[id|="desc"]:before {
color: #666;
background-color: inherit;
content: "Description: ";
margin-left: -10px;
}
body #main #body .text p {
margin: 16px 0px;
border-left: 2px solid #EEA;
padding-left: 3px;
}
body #main #body .text p:first-child {
margin-top: 0px;
}
body #main #body .text p:last-child {
margin-bottom: 0px;
}
body #main #body .text > p:first-child:first-letter {
text-transform: capitalize;
font-size: x-large;
}
body #main #body .text p:hover {
border-left: 2px solid #CB7; /* Old: #C93; */
}
body #main #body .text blockquote {
background-color: #EEB;
color: inherit;
border: 3px ridge #CC0;
padding: 0px 16px;
margin: 0px 20px;
font-family: tahoma, verdana, helvetica, arial, serif;
}
body #main #body .text blockquote:hover {
background-color: #EEC;
color: inherit;
}
body #main #body .text blockquote:before,
body #main #body .text blockquote:after {
font-size: 2em;
font-weight: bold;
color: #BB7;
background-color: inherit;
}
body #main #body .text blockquote:hover:before,
body #main #body .text blockquote:hover:after {
color: #CC7; /* Old: #993 */
background-color: inherit;
}
body #main #body .text blockquote:before {
content: "\275d\20\20"; /* Unicode open quotation. */
margin-left: -8px;
}
body #main #body .text blockquote:after {
content: "\20\20\275e"; /* Unicode close quotation. */
display: block;
text-align: right;
margin: -12px -8px -1px 0px;
}
body #main #body .text blockquote p:first-child {
margin-top: -10px;
}
body #main #body .text dt > strong {
position: relative;
z-index: 5;
width: 150px;
display: block;
margin-left: 12px;
padding-left: 12px;
text-align: center;
border: 3px ridge #CC0;
border-bottom: 0px;
background-color: #EEB;
color: inherit;
}
body:last-child #main #body .text dt > strong {
margin-left: 13px;
border: 2px ridge #CC0;
border-bottom: 0px;
-moz-border-radius-topleft: 7px;
-moz-border-radius-topright: 5px;
}
body #main #body .text dd > blockquote {
z-index: 0;
margin-top: -4px;
position: relative;
margin-left: 0px;
}
body:last-child #main #body .text dd > blockquote {
border-bottom: 2px ridge #CC0;
border-right: 2px ridge #CC0;
}
body #main #body .text ul,
body #main #body .text ol,
body #main #body .text dl,
body #main #body .text div {
margin-top: -10px;
margin-left: 4px;
}
body #main #body .text ul li,
body #main #body .text ol li {
margin-left: -12px;
}
/* I really HATE to use CSS hacks. :( */
body:last-child #main #body .text ul li,
body:last-child #main #body .text ol li {
margin-left: -12px;
}
body:last-child #main #body .wintersport_photos caption {
margin-left: auto;
margin-bottom: -20px;
}
/* I'm sorry, I will fix these properly some day. :) */
body #main #body .signed {
text-align: right;
padding: 4px 8px 5px 0px;
background-color: transparent; /* Old: #EEA */
margin: -4px 0px 0px 0px;
letter-spacing: 1px;
float: right;
}
body #main #body .container {
background: #EEA url("bg_bottom.png") repeat-x;
color: inherit;
}
body #main #body .container .bar {
text-align: center;
width: 130px;
background-color: #CC9;
color: inherit;
margin: 0px;
padding: 4px;
}
body #main #body .container .bar:hover {
background-color: #FFC;
color: inherit;
}
body #main #body .container .bar a, body #main #body .container .bar a:hover {
background-color: transparent;
}
/* Weblog entry extensions. */
body #main #body .entry-lenna {
color: inherit;
background: #EEB url("lenna.png") no-repeat;
background-position: -2px 24px;
}
body #main #body .entry-kingcrimson {
color: inherit;
background: #EEB url("kingcrimson.png") no-repeat;
background-position: 516px 25px;
}
body #main #body .entry-nintendods {
color: inherit;
background: #EEB url("nds.png") no-repeat;
background-position: 1px 24px;
}
body #main #body .entry-vlora {
color: inherit;
background: #EEB url("vlora.jpg") no-repeat;
background-position: 0px 12px;
}
body #main #body .entry-gwen {
color: inherit;
background: #EEB url("gwen.png") no-repeat;
background-position: 0px 23px;
}
/* Write Entry page. */
legend {
/* This has a really cool effect: float: right; */
color: #600;
background-color: #EE9;
border: 1px solid #663;
margin: 10px 0px;
padding: 0px 5px;
}
fieldset {
border: 2px solid #663;
background: #EEC url('post2.gif') no-repeat;
background-position: 95% 26px;
color: inherit;
}
dl dt {
margin-bottom: 1px;
}
dl dd {
margin-bottom: 8px;
margin-left: 12px;
}
input[type='text'], input[type='password'], select, textarea {
border: 2px solid #C99;
background-color: #FFC;
color: inherit;
}
input[type='text']:focus, input[type='password']:focus, textarea:focus {
border: 2px solid #E66;
background-color: #FFB;
color: inherit;
}
input[type='submit'] {
color: #440;
background-color: #FFB;
border: 2px ridge #B88;
}
input[type='submit']:hover {
color: #220;
background-color: #FFD;
border: 2px ridge #F33;
text-decoration: underline;
}
/* Nintendo DS homebrew */
h3.nds-head {
margin-top: 50px;
border-top: 1px solid #000;
padding-top: 4px;
}
dl.nds {
text-align: center;
display: table;
padding-top: 30px;
}
dl.nds > dt,
dl.nds > dd {
width: 290px;
}
dl.nds > dd {
padding: 4px 10px 30px 10px;
text-indent: 0px;
width: 270px;
}
/* Odd */
dl.nds > dt:first-child,
dl.nds > dt:first-child + dd + dt + dd + dt,
dl.nds > dt:first-child + dd + dt + dd + dt + dd + dt + dd + dt {
display: table-row;
}
dl.nds > dt:first-child + dd,
dl.nds > dt:first-child + dd + dt + dd + dt + dd,
dl.nds > dt:first-child + dd + dt + dd + dt + dd + dt + dd + dt + dd {
display: table-cell;
}
/* Even */
dl.nds > dt:first-child + dd + dt,
dl.nds > dt:first-child + dd + dt + dd + dt + dd + dt,
dl.nds > dt:first-child + dd + dt + dd + dt + dd + dt + dd + dt + dd + dt {
display: table-column;
position: absolute;
margin-top: -456px;
}
dl.nds > dt:first-child + dd + dt + dd,
dl.nds > dt:first-child + dd + dt + dd + dt + dd + dt + dd,
dl.nds > dt:first-child + dd + dt + dd + dt + dd + dt + dd + dt + dd + dt + dd {
display: table-cell;
}
/* Firefox fix. */
body:last-child dl.nds > dt:first-child + dd + dt,
body:last-child dl.nds > dt:first-child + dd + dt + dd + dt + dd + dt,
body:last-child dl.nds > dt:first-child + dd + dt + dd + dt + dd + dt + dd + dt + dd + dt {
margin-top: -460px;
}
/* Footer */
body #footer {
width: 100%;
text-align: center;
}
body #footer #footer_content {
width: 600px;
margin: 35px auto 0px auto;
text-align: right;
}
/* Some CSS3 goes here: :o */
body #footer #footer_content a[type^="application/"]:hover {
background-color: #CCA;
color: inherit;
}
/*
* The following are Mozilla specific CSS style and are valid CSS tags (despite what the validator says).
* More info on (CSS 3): http://www.w3.org/TR/css3-syntax/#vendor-specific
* And on (CSS 2.1): http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords
* Thanks to ACJ for pointing it out.
*
*/
body #main #body .container .bar {
-moz-border-radius-topright: 55px;
}
fieldset {
-moz-border-radius-topright: 55px;
-moz-border-radius-bottomright: 30px;
}
body #header {
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15px;
}
body #footer #footer_content a img {
-moz-opacity: .4;
}
body #footer #footer_content a:hover img {
-moz-opacity: 1.0;
}
/*
* / Excluding footer. /
*
* #main #body {
* padding: 35px 10px;
* border: 1px solid #600;
* background-color: #CCA;
* -moz-border-radius-topright: 33px;
* -moz-border-radius-topleft: 32px;
* -moz-border-radius-bottomright: 33px;
* -moz-border-radius-bottomleft: 32px;
* }
*
*
*
* - -
*
*
*
* / Including footer. /
* #main #body, #footer #footer_content {
* padding: 35px 10px 0px 10px;
* border: 1px solid #600;
* background-color: #CCA;
* }
* #main #body {
* -moz-border-radius-topright: 33px;
* -moz-border-radius-topleft: 32px;
* border-bottom: 0px;
* }
* #footer {
* margin-top: -36px;
* }
* #footer #footer_content {
* border-top: 0px;
* -moz-border-radius-bottomright: 33px;
* -moz-border-radius-bottomleft: 32px;
* }
*
*/
/* - That's it. No more CSS. :( - */