@import "reset.css";
@import "contact.css";

/* colours */
body { background: #333; color: #ddd; }
#facts { color: #BCCECA; }
#updates { color: #F2CDDA; }
#projects, { color: #C2C2C2; }
#friends, #friends a { color: #D3C6C5; }
#contact, #contact a { color: #C8C9D2; }
#facts, #udpates, #projects, #friends {  }

#projects .blue, div.project.blue { background-color: #398fa6; color: #C4DEE4; }
#projects .brown, div.project.brown { background-color: #b67448; color: #E9D6C8; }
#projects .teal, div.project.teal { background-color: #2b9892; color: #C0E0DF; }
#projects .purple, div.project.purple { background-color: #9374a9; color: #DFD6E5; }
#projects .pink, div.project.pink { background-color: #b96491; color: #EAD1DE; }
#projects .green, div.project.green { background-color: #389c56; color: #C4E1CD; }

/* typography */
body, #content { font: 16px/18px sylfaen, garamond, 'urw palladio l', georgia, serif; }
h2 { display: none; }
#projects { font-size: 14px; }
#projects h3 { font-size: 18px; margin-bottom: 8px; }
#friends a { font-size: 14px; }
.caps { font-size: 0.7em; letter-spacing: 1px; }

/* links */
/*a:visited:after { content:'\2713'; font-size: 10px; } */
a { color: #fff; text-decoration: none; }
#facts li a:hover, #updates li a:hover, #projects li a:hover, #colophon a:hover { position: relative; top: -1px;  }
#facts li a:active, #updates li a:active, #projects li a:active, #colophon a:active { position: relative; top: 2px; }


/* layout */

/* boxes */
#facts, #updates, #projects, #friends, #contact { overflow: hidden; }
#facts>ul>li, #updates>ul>li, #projects>ul>li, #friends>ul>li, #contact>ul>li { display: block; float: left; overflow: auto; }

/* box sizes and padding */
#facts>ul>li, #updates>ul>li, #projects>ul>li, #contact>ul>li { width: 198px; padding: 18px; }
#friends>ul>li, .project { padding: 8px 18px; }

#facts, #facts>ul>li, #facts .next, #facts .back, #projects, #projects>ul>li, #projects .next, #projects .back { height: 180px; }
#updates, #updates>ul>li, #updates .next, #updates .back, #contact, #contact>ul>li, #contact .next, #contact .back { height: 126px; }
#friends, #friends>ul>li, #friends .next, #friends .back { height: 36px; }

/* boxes backgrounds */
#facts { background: #1D5A4D url(../images/river/shadow-big.png) repeat-x; }
#updates, div.project { background: #D35782 url(../images/river/shadow-medium.png) repeat-x; }
#projects, #projects>ul>li { background: #868686 url(../images/river/shadow-big.png) repeat-x; }
#friends { background: #6D403E url(../images/river/shadow-small.png) repeat-x; }
#contact { background: #484968 url(../images/river/shadow-medium.png) repeat-x; }

/* boxes arrows */
.next { position: absolute; right: 0; text-indent: -10000px; width: 36px; cursor: pointer; }
#facts .next { background: #1D5A4D url(../images/river/facts.png) no-repeat; top: 0; }
#updates .next { background: #D35782 url(../images/river/updates.png) no-repeat; top: 180px; }
#projects .next { background: #698A91 url(../images/river/projects.png) no-repeat; top: 306px; }
#friends .next { background: #6D403E url(../images/river/friends.png) no-repeat; top: 486px; }
#contact .next { background: #484968 url(../images/river/contact.png) no-repeat; top: 522px; }

.back { position: absolute; left: 0; text-indent: -10000px; width: 18px; display: none; cursor: pointer; }
#facts .back { background: #1D5A4D url(../images/river/facts-back.png) no-repeat; top: 0; }
#updates .back { background: #D35782 url(../images/river/updates-back.png) no-repeat; top: 180px; }
#projects .back { background: #698A91 url(../images/river/projects-back.png) no-repeat; top: 306px; }
#friends .back { background: #6D403E url(../images/river/friends-back.png) no-repeat; top: 486px; }
#contact .back { background: #484968 url(../images/river/contact-back.png) no-repeat; top: 522px; }

/* hiding */
.permalink, .published, .tags { display: none; }

.published { color: #d2aDbA; font-size: 12px; margin-top: -16px; position: absolute; }

#projects .line { width: 217px; height: 180px; margin-top: -18px; margin-bottom: -162px; }
#facts>ul>li, #updates>ul>li, #projects .line, #friends>ul>li, #contact>ul>li { background: url(../images/river/line-long.png) no-repeat right 36px;  }
#friends>ul>li { background: url(../images/river/line-short.png) no-repeat left 3px;  }
#updates>ul>li, #contact>ul>li { background-position: right 12px; }


/* colours */

#footer { background: url(../images/river/shadow.png) repeat-x left top; border: 1px solid #333; }

/* colophon */
#footer a { color: #ccc; }
#footer a:visited { color: #999; }

#colophon { font-size: 12px; width: 360px; padding: 16px; color: #999; padding: 90px 0px 90px 232px; }
#colophon p+p { text-indent: 18px; }
#colophon h2 { font-weight: normal; display: block; font-size: 14px; margin-bottom: 18px; }


/* flat pages */

.flatpage #content, .project #content { margin: 15% 15% 50px 15%; line-height: 27px; }
.flatpage h1, .project h1 { font-size: 18px; margin-bottom: 27px; }
.flatpage p, .project p { margin-bottom: 18px; }
.flatpage .home, .project .home { margin-top: 54px; }

.flatpage #menu { background: none; position: absolute; }
.flatpage #menu .next { display: block; position: absolute; left: 0; display: block; }

.project h2 { display: block; }
.project h3 { margin-top: 27px; }
div.project { height: 110px; margin-bottom: 27px; }

.project ul { list-style: square; }

/* error pages */
.error { text-align: center; }
.error h1 { font-size: 90px; line-height: 90px; margin-top: 30%; margin-bottom: 27px; }
.error p { margin-bottom: 27px; }
.error strong { font-weight: bold; }
.error ol { list-style-type: decimal; margin-bottom: 27px; }
.error ol li { display: list-item; }