/*
	basic site-wide (nearly) stuff
*/

html {margin:0; padding:0; width:100%; height:100%; color:#C34424; background:#eee url(/images/v2-front-orange-pale.jpg) repeat-y fixed top center;}
body {font-family:skia, "trebuchet ms", trebuchet, verdana; margin:0; padding:0; background:transparent url(/images/v2-front-logo.jpg) no-repeat fixed 50% 50%;}
a {color:#C34424}
a:visited {color:#F9813A !important}
a:hover {color:#f00 !important}

h1, h2, h3, h4, h5 {margin:0; padding:0; font-weight:normal;}
h1 {font:italic 30px Times;}
h2 {font:20px Times;}

a:visited {color:#a32f75 !important}
a:hover {color:#f00 !important}

#main {padding:2em 0px 0px 0px; margin:0 5em; height:100%;}
p {margin-top:1em; margin-bottom:0px; text-align:justify}

li {list-style-type:none;}

/*
	navigation
*/
#navcontainer.normal {position:absolute; top:0; left:0; clear:both; font-size:small; width:100%;}
.normal #navlist {border-bottom:1px solid #C34424; margin:0; padding-bottom:1em; padding-left:10px}
.normal #navlist ul,
.normal #navlist li {display:inline; margin:0; padding: 0}
.normal #navlist li {display:block; float:left; position:relative; z-index:10; padding-bottom:4px;}
.normal #navlist a {display:block;}
.normal #navlist a:link,
.normal #navlist a:visited,
.normal #current {color:#C34424; float:left; font-weight:normal; line-height:14px; margin-right:8px; padding:2px 10px; text-decoration: none}
.normal #current {background:#FFDB81; color: #26274D; border-color:#eee}
.normal #navlist a:visited {color:#F9813A}
.normal #navlist a:hover {color: #f00}
.normal #navlist ul a:hover { color: #f00 !important; }
.normal #navlist .floater {height:1em; float:none; position:absolute; text-align:right; z-index:9; margin-left:-8px; padding:2px 0; top:auto;}
.normal #navlist .floater div {float:left; margin-left:8px;}

/*
	front page
*/
#front {background-image:url(/images/v2-front-orange.jpg); overflow:hidden;}
#front a:visited {color:#a32f75 !important}
#front a:hover {color:#f00 !important}

#front #main {position:absolute; width:98%; margin:0; padding:0; height:100%; background:none}

#front h1 {width:50%; margin:3em 0 0 -60px; text-align:right}
#front h2 {font:20px times; text-align:center; letter-spacing:5px; margin-left:1em;}
#front #warning {text-align:right; position:absolute; right:5px; bottom:5px; font-size:small; color:#F9813A; padding-left:10px; border-left:1px solid #F9813A; width:11.5em}

#front #logo {position:absolute; width:100%; height:100%; top:0px; margin:0 auto; text-align:center;}
#front #sig {width:360px; min-height:90%; background:#dc973d url(/images/v2-front-orange.jpg) repeat-y scroll 0% 0%; padding:10px 0; margin:0 auto;}
#front #sig img {position:relative; margin-bottom:100%}
#front #centerimg {position:absolute; width:100%; bottom:0px;}

#front #navcontainer {margin:0; position:absolute; top:50%; width:100%; height:1px;}
#front #navlist {position:relative; top:-6em; left:50%; width:15em; margin:0 0 0 2em; padding:0; text-align:right;}
#front #navlist a {margin:0 0 .5em 0; padding:0 0 1px 0; position:relative; text-decoration:none; min-width:5em; display:block;}
#front #navlist a:hover {margin:0 -2em 0 0; font-size:1.5em; top:-.2em; background:url(/images/v2-front-logo.png); border-bottom:1px solid red; padding-bottom:0}
#front #navlist li {position:relative; top:inherit; right:-1em}
#front #navlist li.menuemail {position:absolute; top:18em; right:-4em;}

#front h2 a {text-decoration:none;}
#front h2 a:hover {text-decoration:underline;}

#front #colophon {position:absolute; padding:.5em; right:0; bottom:0;}
#front #colophon div {width:9em; padding:1em 1em 0 .5em; margin-bottom:2em; background:#dc973d url(/images/v2-front-orange.jpg); position:absolute; bottom:1em; right:2px; border:1px dotted; font-size:small;}
#front #colophon #details {display:none;}
#front #colophon:hover {padding:1em .5em .5em 9em}
#front #colophon:hover #details {display:block;}
#front #colophon ul {padding:0; text-align:right; }
#front #colophon p {text-align:right; margin:0 0 1em 0;}

#front #excerpts .excerpt {position:absolute; width:50%; margin:.5em; text-align:center; font-size:.5em; margin-top:0px}
#front #excerpts * {margin-right:220px}
#front #excerpts #comic  {top:50%}
#front #excerpts #newest {top:65%}
#front #excerpts #random {top:80%}
#front #excerpts img {border:2px solid; margin:2px; padding:1px; width:20px; height:20px}
#front #excerpts img:hover {width:75px; height:75px}
#front #excerpts .caption {font-weight:900; text-transform:lowercase; letter-spacing:2px}

/*
	about page
*/
#about #main {margin:0;}
#bio, #resume {width:100%; float:left; top:0px; padding:2em 0 3em 0; margin:0; height:90%; position:absolute; top:0; left:0; overflow:auto;}
#resume {left:100%;}
#about #navcontainer {position:fixed; background:#eee url(/images/v2-front-orange-pale.jpg) no-repeat top center;}
#about .swishy,
#about .swishy2 {margin-left:5em; float:left; font-style:italic; z-index:2;}
#about .swishy2 {padding-bottom:150px;}
#about {height:100%; overflow:hidden;}
#about, #resume {background:transparent url(/images/v2-sky-bottom.jpg) fixed 50% 100% no-repeat; }

#about #bottom {position:absolute; z-index:1; width:200%; bottom:0; height:125px; background:transparent url(/images/v2-skysilhouette.png) fixed 50% 100% repeat-x;}
/* bio */
#bio {padding-bottom:3em;}
#bio h1 {width:50%; margin:20px 0 0 -60px; text-align:right}

#bio #influences {font-size:small; float:right; text-align:right; padding-left:10px; margin-right:5em; white-space:nowrap}
#bio #influences ul {margin:0; padding:0}
#bio #influences li {color:#26274D}
#bio #influences:first-line {font-weight:bold}
#bio #influences a {color:#F9813A; text-decoration:none}
#bio #influences a:hover {color:#F00}

#bio .photo {float:left; clear:left; text-align:left; margin-right:1em; margin-left:3em;}
#bio .photo img {padding:1em 0 .2em 1em; margin-bottom:2px; border-bottom:1px solid}

#bio p {max-width:25em; padding-left:50%; margin-left:-200px !important}

/* resume */
#resume h1 {text-align:right; font-style:italic; font-family:times new roman, times, serif; font-size:4em; margin-right:.5em;}
#resume #theresume h2 {position:absolute; font-family:helvetica, sans-serif}
#resume h3 {border-bottom:1px solid; max-width:50%}
#resume h4 {margin-left:1em; font-style:italic}
#resume ul {margin-top:0; padding-left:0}
#resume li {padding-bottom:1em}
#resume .year {margin-left:4.5em; padding-top:.7em}
#resume .year li {padding-left:.5em}
#resume .year li li {padding-bottom:.3em !important; padding-left:2em}
#resume #skills,
#resume #contact {float:right; clear:right; padding-top:2em; margin:0 1em}
#resume #skills h3,
#resume #contact h3 {max-width:inherit; margin-bottom:.2em}
#resume #skills li,
#resume #contact li {padding-bottom:.1em}
#resume #skills li+li,
#resume #contact li+li {padding-left:1em;}
#resume #blurb {margin:1em 14em 1em 0}
#resume #theresume {width:30em; margin:0 auto;}
#resume p {width:30em; margin:0 auto 1em auto}

/*
	singapore gallery pages
*/
#gallery #main {height:auto; min-height:100%; margin-bottom:1em;}

#gallery #search {text-align:right; float: right; margin-right: 1em;}
#gallery #search input {font-size:10px; text-align:right; padding:1px; border:2px inset #26274D; background:white; color:#26274D; font-style: italic;}

#gallery #breadcrumbs,
#gallery #pageflipper {position:relative; padding:0; margin:0; text-align:right; float:right;}
#gallery #pageflipper a {text-decoration:none; padding:0em 0em 0em 2em}
#gallery #pageflipper .current {font-weight:bold;}
#gallery #pageflipper a:visited {color:#F9813A}
#gallery #pageflipper a:hover {color:#f00}

#gallery #footer {width:100%; padding:.5em 0; height:1em; clear:both; text-align:center; font-size:small; position:fixed; bottom:0;}
#gallery #footer span {padding:0 1em;}
#gallery .version {float:left}
#gallery .copyright {float:right}

#gallery #footer form {width:100%; position:absolute; left:0; top:-.5em; margin:0;}
#gallery #footer form input {margin:0 auto}

#gallery #branding {display:none;} /* this div exists solely to pack pngs into in IE <7. */

/* album page layout */
#gallery.albumpage {height:100%; overflow:hidden;}
#gallery.albumpage #pageflipper,
#gallery.albumpage #breadcrumbs {margin-right:1em; margin-bottom:1em; clear:right}
#gallery.albumpage #pageflipper a {min-width:5em; display:block; position:relative; z-index:3;} /* relative and z-index makes sure firefox puts the page links over the titles. */
#gallery.albumpage #pageflipper a:hover {font-style:italic; margin-right:1em; margin-left:-1em; color:#f00}
/* if i specify this :hover:before stuff as #gallery.albumpage then safari ignores it. */
.albumpage #pageflipper a:hover:before {content:"page "}
.albumpage #pageflipper .prevpage a:hover:before {content:"last page "}
.albumpage #pageflipper .nextpage a:hover:before {content:"next page "}

#gallery .albumsummary {margin:0 50% 1em 5em;}
#gallery .albumsummary:first-line {font-size:1.1em; font-weight:900}

#gallery #thumbnails {text-align:center; margin:0px auto; padding:0 400px 0 0; width:270px;}
#gallery #thumbnails img {border:2px solid; float:none; margin:2px 3px;}
#gallery #thumbnails a:visited img {border:1px dotted; padding:1px}
#gallery #thumbnails li {margin:0; padding:0; display:inline;}

#gallery #thumbnails h1 {font-size:small; font-family:inherit; font-weight:bold; font-style: normal; text-align:left;}

#gallery #thumbnails {position:relative;}
#gallery #thumbnails .metadata {display:inline; width:100px; height:0; z-index:1; position:absolute; left:0; margin:35px 0 0 270px; white-space:nowrap; overflow:visible;}
#gallery #thumbnails li:hover .metadata {display:inline}

.slideshowWrapper {position:absolute; left:50%; bottom:20%;}
/*#gallery .slideshow {float:right; clear:right; margin-right:-3em;}*/
#gallery .slideshow ul {list-style:disc;}
#gallery .slideshow div {border:2px solid #eee;}
#gallery .slideshow img {background:black}
#gallery .slideshow p {text-align:right; width:50%; margin-left:50%; border-top:2px solid; padding-top:.5em}

/* no-thumbnails album page layout */
#gallery #imagelist {margin:0px 40px 0px 40px; padding:0; width: 25em;}
#gallery #imagelist li {margin:0 0 .5em; padding:0 .5em; border-bottom:1px solid}
#gallery #imagelist h1,
#gallery #imagelist h2 {margin:0}
#gallery #imagelist h1 {font-size:1.5em}
#gallery #imagelist h2 {font-size:.75em; font-weight:normal; font-style:oblique; margin-left:1em}
#gallery #imagelist a {text-decoration:none}
#gallery #imagelist li:hover {border-bottom:1px solid red}

/* Individual album branding */
#gallery.Illustration {background:transparent url(/images/bg-illustration.png) 95% 100% no-repeat;}
#gallery.Sketchbook {background:transparent url(/images/bg-sketchbook.png) 50% 95% no-repeat;}
#gallery.Showcase,
#gallery.Animation {background:transparent url(/images/bg-showcase.jpg) 50% 100% no-repeat;}
#gallery.okyno {background:transparent url(/images/okyno-badge.png) 85% 85% no-repeat;}

/* image page layout */	
#gallery .image {margin:0 auto; text-align:center; clear:both;}
#gallery .image .metadata {text-align:left; position:relative; padding:1em 0 10px 50%; margin-left:-100px;}

#gallery.imagepage .metadata h1, {padding:0; margin:0; margin-left:-100px;}
#gallery.imagepage .metadata h2 {font-weight: normal; font-size:small; float:left; margin-right:3em}
#gallery .image img {display:block; margin:0 auto; padding:1em; background:#ddd; border:1px solid #ccc;}
#gallery .image .description {padding-top:.5em; border-top:1px solid; padding-bottom:2em; clear:left;}
#gallery .image li {list-style-type:disc !important; padding-bottom:.5em;}

/* this is a big huge mess, isn't it. */

#gallery.imagepage #pageflipper,
#gallery.imagepage #breadcrumbs {font-size:small; margin:0;}
#gallery.imagepage #pageflipper ul,
#gallery.imagepage #breadcrumbs ul {padding:0; display:inline}
#gallery.imagepage #pageflipper li,
#gallery.imagepage #breadcrumbs li {display:inline;}
#gallery.imagepage #breadcrumbs li:before {content:" / "}
#gallery.imagepage #breadcrumbs >:first-child:before {content:""}
#gallery.imagepage #breadcrumbs a {text-decoration:none;}
#gallery.imagepage {background:none;}
/*#gallery.imagepage {padding-bottom:1em;}*/

#gallery.imagepage #footer {background:#eee url(/images/v2-front-orange-pale.jpg) repeat-y fixed top center;}

/* This is the stuff for an article in the image template. */
#gallery.articlepage #pageflipper,
#gallery.articlepage #breadcrumbs {z-index:1}
#gallery.imagepage .article {width:40em; margin:2em auto 3em;}
#gallery.imagepage .article h1 {border-bottom:1px solid;}
.articlebody h2 {padding-top:1em;}
.articlebody p:first-letter {padding-left:1em;}
.articlebody img {margin:.5em 1em;}
.articlebody, .article .metadata {padding-bottom:60px; background:transparent url(/images/lj/spider-dingbat.png) no-repeat bottom center;}
.articlebody hr {border:none; height:60px; background:transparent url(/images/lj/spider-dingbat-2.png) no-repeat center center}

/* Gallery page layout */
#gallery.gallerypage #thumbnails {max-width:inherit; text-align:left;}
#gallery.gallerypage #thumbnails div.sgThumbGallery {text-align:center; float:left; clear:left; border:2px solid; font-size:small; font-style:italic; margin:2px 3px}
#gallery.gallerypage #thumbnails a:visited div.sgThumbGallery {border:1px dotted; padding:1px}
#gallery.gallerypage #thumbnails li img {float:left; clear:left}
#gallery.gallerypage #thumbnails li {display:block; clear:left}
#gallery.gallerypage #thumbnails .metadata,
#gallery.gallerypage #thumbnails li:hover .metadata {display:block; position:inherit; left:inherit; top:inherit; margin:0; border-top:1px solid}
#gallery.gallerypage .fineprint {margin-left:1em}
#gallery.gallerypage h1 {margin-top:2em}
#gallery.gallerypage #thumbnails img,
#gallery.gallerypage #thumbnails div.sgThumbGallery {margin-bottom:1em}