/*
------------------------------------------------------------------------
This is the "tate" style for joelschou.com, part of the "destinations"
theme designed and grafted onto WordPress 1.5 starting in February 2005.

The graphics and design are Copyright �� 2005 Joel Schou and joelschou.com.
Reproducing the design in whole or part is strictly prohibited. However,
creative inspirtaion is wonderful and inevitable.

Feel free to learn from the CSS. Copying all or part is not only shallow,
but completely useless if you want to actually learn CSS. Please respect
my hard work and only use my code for reference. I will gladly answer
your questions. Email me at misc@joelschou.com.

The masthead photo was taken by me on 06 March, 2003 looking up at the
north face of the Tate Modern Museum, London, UK in mid-afternoon.
------------------------------------------------------------------------
Text sizes are found in small.css and large.css in this folder.
------------------------------------------------------------------------

*/

/* ------ start of global region ------------------------------------------ */
* {
	margin: 0;
	padding: 0;
}

body {
	text-align: center;
	background: #A5C4F7 url(/styles/tate/img/body.png) 50% 0 repeat-x;
}

#container {
	position: relative;
	margin: 0 auto;
	width: 762px;
	text-align: left;
	background: url(/styles/tate/img/container.gif) repeat-y;
}

/* ------ end of global region ------------------------------------------

   ------ start of header region ------------------------------------------ */
#head {
	position: relative;
	height: 450px;
	background: url(/styles/tate/img/head.png) no-repeat;
}
#head h1 {
	position: absolute;
	margin: 0;
	padding: 0;
	left: 41px;
	top: 20px;
	height: 597px;
	width: 500px;
	text-indent: -9999px;
	background: url(/styles/tate/img/headh1.jpg) no-repeat;
	z-index: 20;
}
#head h2 {
	position: absolute;
	padding: 0;
	top: 6px;
	left: 41px;
	font-family: Arial, Helvetica, sans-serif;
	color: #3786FF;
	border: none;
}
#accessible {
	padding: 0; margin: 0;
	position: absolute;
	left: 501px;
	top: 20px;
	width: 40px;
	height: 120px;
	list-style: none;
	z-index: 60;
}
#accessible li a, #accessible li a:link, #accessible li a:visited {
	display: block;
	height: 120px; width: 40px;
	position: absolute; left: 0; top: 0;
	background: url(/styles/tate/img/navbits.jpg) 80px 0;
	text-indent: -9999px;
	text-decoration: none;
}
#accessible li a:hover, #accessible li a:active {
	background-position: -120px 0;
}

/* ------ site navigation ------------------------------------------ */
ul#nav {
	padding: 0; margin: 0;
	position: relative;
	top: 40px;
	left: 1px;
	height: 200px;
	width: 760px;
	background: url(/styles/tate/img/nav.png);
	z-index: 40;
}

ul#nav li {
	display: block;
	position: absolute;
	padding: 0;
}
li#index {
	position: absolute;
	left: 0px;
	top: -20px;
	width: 540px;
	height: 607px;
	z-index: 50;
}
li#journal, li#studio, li#portfolio, li#about, li#contact {
	left: 0px;
	height: 40px;
	width: 760px;
	background: url(/styles/tate/img/nav.png) no-repeat;
}
li#journal { top: 0px; }
li#studio { top: 40px; }
li#portfolio { top: 80px; }
li#about { top: 120px; }
li#contact { top: 160px; }

li#index a {
	position: absolute;
	left: 460px;
	display: block;
	height: 607px;
	width: 40px;
	text-indent: -9999px;
	text-decoration: none;
}
li#journal a, li#studio a, li#portfolio a, li#about a, li#contact a {
	display: block;
	height: 40px;
	text-indent: -9999px;
	text-decoration: none;
}
li#index a:link, li#index a:visited {
	background: url(/styles/tate/img/navindex.jpg) no-repeat;
}
li#index a:hover, li#index a:active {
	background-position: -40px 0px;
}

li#journal a:link, li#journal a:visited { background: url(/styles/tate/img/nav.png) no-repeat 0px 0px; }
li#studio a:visited, li#studio a:link { background: url(/styles/tate/img/nav.png) no-repeat 0px -40px; }
li#portfolio a:link, li#portfolio a:visited { background: url(/styles/tate/img/nav.png) no-repeat 0px -80px; }
li#about a:visited, li#about a:link { background: url(/styles/tate/img/nav.png) no-repeat 0px -120px; }
li#contact a:link, li#contact a:visited { background: url(/styles/tate/img/nav.png) no-repeat 0px -160px; }

li#journal a:hover, li#journal a:active { background-position: 0px -200px; }
li#studio a:hover, li#studio a:active { background-position: 0px -240px; }
li#portfolio a:hover, li#portfolio a:active { background-position: 0px -280px; }
li#about a:hover, li#about a:active { background-position: 0px -320px; }
li#contact a:hover, li#contact a:active { background-position: 0px -360px; }

/* ------ styleswitcher ------------------------------------------ */
#switch {
	position: absolute;
	top: 370px;
	margin: 0;
	padding: 0 16px 0 556px;
	height: 80px;
	width: 190px;
	text-align: center;
	border: none;
	background: url(/styles/tate/img/cside.png) repeat-y;
}
#switch dt {
	color: #7B82A9;
	font-family: 'Lucida Grande', Arial, Helvetica, sans-serif;
}
#switch dd {
	position: absolute;
	top: 20px; height: 24px;
	border-top: 1px solid #aeb5dc;
	border-bottom: 1px solid #aeb5dc;
}
#switch-capri { left: 556px; width: 44px; padding: 5px 1px 5px 0; }
#switch-tate { left: 601px; width: 44px; padding: 5px 1px 5px 0; }
#switch-paris { left: 646px; width: 44px; padding: 5px 4px 5px 0; }
#switch-small { left: 694px; width: 24px; padding: 5px 0 5px 3px; }
#switch-large { left: 721px; width: 24px; padding: 5px 0 5px 1px; }
#switch a, #switch a.notselect {
	display: block;
	height: 20px;
	padding: 1px;
	border: 1px solid #aeb5dc;
	text-decoration: none;
	text-indent: -9999px;
	background: url(/styles/tate/img/switch.jpg);
}
#switch-capri a, #switch-capri.notselect a { background-position: 0 0; }
#switch-tate a, #switch-tate.notselect a { background-position: -42px 0; }
#switch-paris a, #switch-paris.notselect a { background-position: -84px 0; }
#switch-small a, #switch-small.notselect a { background-position: -126px 0; }
#switch-large a, #switch-large.notselect a { background-position: -148px 0; }
#switch dd a:hover, #switch dd a.select {
	text-decoration: none;
	border: 1px solid #3786FF;
}
#switch-capri a:hover, #switch-capri.select a { background-position: 0 -22px; }
#switch-tate a:hover, #switch-tate.select a { background-position: -42px -22px; }
#switch-paris a:hover, #switch-paris.select a { background-position: -84px -22px; }
#switch-small a:hover, #switch-small.select a { background-position: -126px -22px; }
#switch-large a:hover, #switch-large.select a { background-position: -148px -22px; }

/* ------ end of header region ------------------------------------------

   ------ start of content region ------------------------------------------ */
#content {
	margin: 0;
	padding: /*177px*/0 0 0 0;
}

/* ------ content top ------------------------------------------ */
#ctop {
	position: absolute;
	left: 41px;
	top: 570px;
	z-index: 20;
}

/* ------ content columns ------------------------------------------ */
.cfull {
	display: none;
}

.cmain {
	display: inline;
	margin: /*0*/167px 0 0 41px;
	padding: /*177px*/0 0 0 0;
	float: left;
	width: 500px;
	background: url(/styles/tate/img/cmain.gif);
	z-index: 10;
}

.cside {
	margin: /*-177px*/0 0 0 0;
	padding: 0;
	background: url(/styles/tate/img/cside.png) 50% 0 repeat-y;
	z-index: 0;
}

.cside .end {
	padding: 0;
	background: url(/styles/tate/img/send.png) no-repeat 50% 100%;
}

/* ------ content bottom ------------------------------------------ */
#cbottom {
	clear: both;
	position: relative;
	margin: /*-20px*/0 0 0 22px;
	width: 537px;
	height: 140px;
	background: #A5C4F7 url(/styles/tate/img/cbottom.jpg) no-repeat;
}

/* Note that the #totop and #coconut buttons share a lot of styles */
#totop, #coconut {
	position: absolute;
	padding: 0; margin: 0;
	top: 0;
	width: 40px;
	height: 110px;
	background: url(/styles/tate/img/navbits.jpg) no-repeat;
}
#totop { right: 18px; background-position: -80px -120px; }

#totop a, #totop a:link, #totop a:visited,
#coconut a, #coconut a:link, #coconut a:visited {
	display: block;
	height: 110px;
	background: url(/styles/tate/img/navbits.jpg) no-repeat;
	text-indent: -9999px;
	text-decoration: none;
}
#totop a, #totop a:link, #totop a:visited { background-position: -80px -120px; }
#totop a:hover, #totop a:active { background-position: -120px -120px; background-color: transparent; }

/* ------ end of content region ------------------------------------------

   ------ start of footer region ------------------------------------------ */
#foot {
	margin: -140px 0 0 0;
	position: relative;
	left: 41px;
	float: left;
	width: 460px;
	height: 110px;
}

#coconut { right: 0; background-position: 0px -120px; }
#coconut a, #coconut a:link, #coconut a:visited { background-position: 0px -120px; }
#coconut a:hover, #coconut a:active { background-position: -40px -120px; background-color: transparent; }

/* ------ end of footer region ------------------------------------------
   ------ end of layout parts ------------------------------------------

   ------ start of text styling ------------------------------------------
   ------ links of all sorts ------------------------------------------ */

a {
	text-decoration: underline;
}
a:link, a:link * {
	/*color: #334A68;
	color: #3b5270;*/
	color: #4c6381;
}
a:visited, a:visited * {
	/*color: #383854;
	color: #40405c;*/
	color: #51516d;
}
a:hover, a:hover * {
	/*color: #65655c;
	color: #8d8d84;*/
	color: #9e9e95;
	text-decoration: none;
}
a:active, a:active * {
	color: #0F0F0E;
	/*background: #334A68;
	background: #3b5270;*/
	background: #4c6381;
	text-decoration: none;
}
a img {
	border: none;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	text-decoration: none;
}

.cside a:link {
	color: #4f9edd;
}
.cside a:visited {
	color: #6868c3;
}
.cside a:hover {
	color: #6d6d64;
	text-decoration: none;
}
.cside a:active {
	color: #0F0F0E;
	text-decoration: none;
	background: #3b5270;
}
.cside a img {
	border: none;
}

/* ------ start of content region ------------------------------------------
   ------ unit box styles ------------------------------------------ */
.unit {
	margin: 0 0 20px 0;
}
.cside .unit {
	margin: 0;
}
.cside div {
	padding: 0 1px 0 541px;
	background: url(/styles/tate/img/cmain.gif) repeat-y 41px 0;
}

/* ------ global text styles ------------------------------------------ */

/* ------ headline styles ------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
	margin: 0 29px 2px 29px;
	padding: 10px 0 0 0;
	font-weight: normal;
	font-family: 'Gill Sans', 'Lucida Grande', Arial, Helvetica, sans-serif;
	/*color: #65655c;
	color: #6d6d64;
	color: #75756c;*/
	color: #86867d;
	/*border-bottom: 1px solid #323229;
	border-bottom: 1px solid #3a3a31;
	border-bottom: 1px solid #424239;*/
	border-bottom: 1px solid #53534a;
}
h1 {
	margin: -7px 0 0 0;
	padding: 0 28px;
	color: #000;
	border: none;
}
.cside h1, .cside h2, .cside h3, .cside h4, .cside h5, .cside h6 {
	margin: 0 15px;
	color: #7B82A9;
	border-bottom: 1px solid #aeb5dc;
}
.cside h2 {
	margin-bottom: 10px;
}
.cside .links h2, .cside .archive h2 {
	margin-bottom: 0;
}
.cside .links h3, .cside .archive h3 {
	padding-top: 5px;
	border: none;
}

/* ------ paragraph styles ------------------------------------------ */
p {
	padding: 0 30px 10px 30px;
	/*color: #43433A;
	color: #4b4b42;
	color: #5b5b52;*/
	color: #6c6c63;
	font-family: 'Lucida Grande', Arial, Helvetica, sans-serif;
	/*text-align: justify;*/
}

p.center {
	text-align: center;
}

.excerpt p, .notes p {
	margin: 10px 30px;
	padding: 10px;
	border: 1px solid #5b5b52;
	background: #1b1b1a;
}
.notes p {
}

p.posting {
	margin-top: 2px;
	margin-bottom: 5px;
	font-family: 'Lucida Grande', Arial, Helvetica, sans-serif;
}

p.details {
	margin: 5px 30px 0 30px;
	padding: 2px 0 20px 0;
	font-family: 'Lucida Grande', Arial, Helvetica, sans-serif;
	/*border-top: 1px solid #323229;
	border-top: 1px solid #3a3a31;
	border-top: 1px solid #424239;*/
	border-top: 1px solid #53534a;
	border-bottom: none;
}
.cside p.details {
	margin: 10px 15px 0 15px;
	border-top: 1px solid #aeb5dc;
}

blockquote {
	margin: 0 30px 10px 30px;
	padding: 0 10px;
}
blockquote p {
	padding: 0 10px;
	color: #3b5270;
	border-left: 1px solid #3b5270;
}

/* ------ more text styles ------------------------------------------ */
abbr, acronym {
	color: #8d8d84;
	border-bottom: 1px dotted #53534a;
	cursor: help;
}
code {
	color: #6d8d64;
}
ins {
}
pre {
	margin: 0 45px 10px 45px;
	padding: 0 10px;
	color: #6d8d64;
	border-left: 1px solid #6d8d64;
}
pre.codesnip {
	margin: 0 30px 10px 30px;
	padding: 10px;
	font-family: Monaco, Courier, 'Courier New', monospace;
	color: #6d8d64;
	background: #000;
	border: 1px solid #6c6c63;
}
strike {
	color: #8d6d64;
}
strong {
	color: #7d7d74;
}
/* ------ image styles ------------------------------------------ */
.cmain p.img {
	margin: 0 29px;
	padding: 0 0 5px 0;
	/*color: #323229;
	color: #3a3a31;
	color: #4a4a41;*/
	color: #5b5b52;
	font-family: 'Lucida Grande', Arial, Helvetica, sans-serif;
	text-align: center;
	border: none;
	background-color: transparent;
}

.thumbs {
	margin: 10px 30px;
	padding: 0;
	border: 1px solid #5b5b52;
	background: #1b1b1a;
}
.thumbs h4 {
	margin: 0 10px;
}
.thumbs ul, .thumbs p {
	padding: 5px 10px;
	list-style: none;
}
.thumbs p.details {
	padding: 2px 0 0 0;
	margin: 5px 10px;
	clear: both;
}
.thumb {
	margin: 5px 0;
	display: block;
	width: 49%;
	float: left;
	color: #5b5b52;
	font-family: 'Lucida Grande', Arial, Helvetica, sans-serif;
	text-align: center;
}
.thumb.alt {
	float: right;
}
.thumb.none {
	float: none; clear: both;
}
.cmain p.img span, .thumb span {
	display: block;
	margin: 0 0 5px 0;
}
p.img img {
	padding: 5px 1px;
	border-top: 1px solid #5b5b52;
	border-bottom: 1px solid #5b5b52;
	background: #0b0b0a;
}

img.hlimg {
	padding: 5px 1px;
	width: 440px;
	/*border-bottom: 1px solid #323229;
	border-bottom: 1px solid #3a3a31;
	border-bottom: 1px solid #4a4a41;*/
	border-top: 1px solid #5b5b52;
	border-bottom: 1px solid #5b5b52;
	background: #0b0b0a;
}

.float { float: right; }
.float.alt { float: left; }

p.float { padding: 10px 10px 10px 0; }
p.float.alt { padding: 10px 0 10px 10px; }

img.float { padding: 5px 0 10px 20px; }
img.float.alt { padding: 5px 20px 10px 0; }

.icon { width: 132px; }

/* ------ list styles ------------------------------------------ */
ul, ol, dl {
	padding: 0 30px 10px 60px;
	/*list-style-position: inside;
	color: #43433A;
	color: #4b4b42;
	color: #5b5b52;*/
	color: #6c6c63;
	font-family: 'Lucida Grande', Arial, Helvetica, sans-serif;
}
ul ul, ul ol, ol ol, ol ul {
	padding: 0 0 0 30px;
}
li, dt, dd {
	padding: 2px 0;
}
li.more, dd.more {
	margin: 10px 0 0 -30px;
	padding: 2px 0 10px 0;
	font-family: 'Lucida Grande', Arial, Helvetica, sans-serif;
	border-top: 1px solid #53534a;
	list-style: none;
}

.cside ul, .cside ol, .cside dl {
	margin: 0 15px;
	padding: 0 10px 0 20px;
	color: #7B82A9;
	font-family: 'Lucida Grande', Arial, Helvetica, sans-serif;
	border: 1px solid #aeb5dc;
	background: url(/styles/tate/img/scheckwh.gif);
}
.cside ul {
	list-style: circle /*inside*/;
}
.cside li, .cside dt, .cside dd {
	padding: 0;
}
.cside ul li.more, .cside dl dd.more {
	margin: 0 -10px 0 -20px;
	padding: 0 10px;
	font-family: 'Lucida Grande', Arial, Helvetica, sans-serif;
	border: none;
	background: url(/styles/tate/img/scheckdk.gif);
	list-style: none;
}

/* ------ comments list styles ------------------------------------------ */
ol.commentlist {
	margin: 0;
	padding: 0 30px 10px 30px;
	list-style: none;
}
ol.commentlist li {
	margin: 10px 0;
	padding: 5px 10px;
	border: 1px solid #5b5b52;
	background: #1b1b1a;
}
ol.commentlist li.odd {
	border: 1px solid #5b5b52;
	background: #0b0b0a;
}
ol.commentlist li.joel {
	border: 1px solid #3b5270;
	background: #10151C;
}

ol.commentlist li span {
	display: block;
	margin: 3px 5px 5px -5px;
	padding: 5px;
	float: left;
	background: #1b1b1a;
}
ol.commentlist li.odd span { background: #0b0b0a; }
ol.commentlist li.joel span { background: #10151C; }
ol.commentlist li span a { text-decoration: none; }

ol.commentlist li h4 {
	margin: 0 0 2px 0;
	padding: 0;
}
ol.commentlist li.joel h4 {
	border-color: #3b5270;
}
ol.commentlist li p {
	padding: 0 0 10px 0;
}
ol.commentlist li.joel p {
	color: #3e5573;
}

img.gravatar {
	margin: 0 0 5px 5px;
	float: right;
}

/* ------ feature list styles ------------------------------------------ */
.cside .feature dl {
	padding: 0 10px;
	position: relative;
}
.cside .feature dl dt {
	position: relative;
	margin: 0 -10px;
	padding: 5px 10px 0 10px;
	text-align: center;
	background: url(/styles/tate/img/scheckwh.gif);
}
.cside .feature dl dt img {
	width: 160px;
}
.cside .feature .more {
	margin-left: -10px;
}

/* ------ calendar styles ------------------------------------------ */
div#calendar {
	padding: 0;
	background: none;
}
#wp-calendar {
	margin: 0 0 0 15px;
	width: 190px;
	text-align: center;
	font-family: 'Gill Sans', 'Lucida Grande', Arial, Helvetica, sans-serif;
	color: #7b82a9;
	border: 1px solid #aeb5dc;
	border-collapse: collapse;

}
#wp-calendar caption {
	margin-left: 1px;
	padding-top: 5px;
}
#wp-calendar thead, #wp-calendar tfoot {
	background: url(/styles/tate/img/scheckdk.gif);
}
#wp-calendar tbody {
	background: url(/styles/tate/img/scheckwh.gif);
}
#wp-calendar th {
	width: 14%;
}
#wp-calendar td {
	font-family: 'Lucida Grande', Arial, Helvetica, sans-serif;
}
#wp-calendar tbody a {
	display: block;
	margin: 1px;
	text-decoration: none;
	background: #A5C4F7;
}
#wp-calendar tbody a:hover {
	color: #fff;
	background: #7b82a9;
}
#wp-calendar #today {
	font-weight: bold;
	border: 1px solid #3786FF;
}

/* ------ search box styles ------------------------------------------ */
.cside .search p {
	margin: 0 15px;
	padding: 5px 0;
	text-align: center;
	border: 1px solid #aeb5dc;
	background: url(/styles/tate/img/scheckwh.gif);
}

/* ------ snobbery list styles ------------------------------------------ */
.snobbery h2, .snobbery ul, .snobbery p {
	position: relative;
}
.snobbery ul {
	margin: 0 0 0 15px;
	padding: 0;
	height: 92px;
	width: 188px;
}
.snobbery li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.snobbery li a {
	position: absolute;
	margin: 0;
	padding: 0;
	display: block;
	width: 188px;
	height: 20px;
	text-decoration: none;
	text-indent: -9999px;
}
#snob-bh a, #snob-wp a, #snob-xhtml a, #snob-css a {
	left: 0;
	background: url(/styles/tate/img/snob.gif);
}
#snob-bh a { top: 3px; background-position: 0 0; }
#snob-wp a { top: 25px; background-position: 0 -20px; }
#snob-xhtml a { top: 47px; background-position: 0 -40px; }
#snob-css a { top: 69px; background-position: 0 -60px; }
#snob-bh a:hover { background-position: 0 -80px; }
#snob-wp a:hover { background-position: 0 -100px; }
#snob-xhtml a:hover { background-position: 0 -120px; }
#snob-css a:hover { background-position: 0 -140px; }

/* ------ end of content region ------------------------------------------

   ------ start of footer region ------------------------------------------ */
#legal p {
	padding: 36px 60px 0 30px;
	text-align: right;
	/*color: #424241;
	color: #525251;*/
	color: #636362;
	font-family: Arial, Helvetica, sans-serif;
}
#legal a, #legal a:visited {
	/*color: #535352;
	color: #636362;*/
	color: #747473;
	text-decoration: underline;
	white-space: nowrap;
}
#legal a:hover {
	/*color: #757574;
	color: #858584;*/
	color: #969695;
	text-decoration: none;
}
#legal a:active {
	color: #0F0F0E;
	/*background: #757574;
	background: #858584;*/
	background: #969695;
	text-decoration: none;
}