@charset "utf-8";

/*
	Basic tag styles
*/
html {
	font-size: 100.01%; /* Will fight off some IE font-sizing bugs when using ems in the cascade. */
	height: 100%;
    margin: 0;
    padding: 0;
    border-width: 0;
}
body {
	font-size: 13px; 
	/* Yes, a font-size in px means you can't resize text in IE6 or older. So what. IE6 is 
	   essentially a thing of the past. Using em, percent, or keywords, however, would cause 
	   headaches in IE7 + Windows @ 120 dpi  - and high dpi settings have, if anything, grown 
	   in importance. */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align: left;
	line-height: 1.5;
	margin: 0;
	border-width: 0;
	background-color: #fcfcfc;

	max-width: 1770px;
	margin-left: auto;
	margin-right: auto;
}

h1 {
	font: normal small-caps normal 28px Arial, Helvetica, sans-serif;
	padding: 0;
	margin: 30px 0 20px;
}
h2 {
	font: normal normal 22px Verdana, Arial, Helvetica, sans-serif;
	margin: 30px 0 0 0;
}
h3 {
	font: normal small-caps normal 19px "Times New Roman", Times, serif;
	letter-spacing: 0.6px;
	padding: 0;
	margin: 1.8em 0 0.5em;
}
p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	padding: 0;
	margin: 1em 0;
}
p code {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style: italic;
	font-size: 11px;
}

strong {
	font-weight: bold;
}
em {
	font-style: italic;
}
del {
	text-decoration: line-through;
}

i {
	font-style: italic;
}
sup {
	vertical-align: text-top;
	font-size: 70%;
}

@media all and (max-width: 870px) {

    html, body {
        -webkit-text-size-adjust: 100%;
    }

}


/* - Link styles */
a:link, a:visited {
	color: #a00;
	text-decoration: none;
}
a:hover, a:active {
	color: #c33;
	text-decoration: underline;
}

h1 a:link, h1 a:visited, h2 a:link, h2 a:visited, h3 a:link, h3 a:visited {
	color: #000;
	text-decoration: none;
}
h1 a:hover, h1 a:active, h2 a:hover, h2 a:active, h3 a:hover, h3 a:active {
	color: #c33;
	text-decoration: underline;	
}


/*
	HP-specific styles
*/
body.hp {
    min-width: 0;
    padding: 0;
    overflow: hidden;
}
#hpBand {
    position: absolute;
    top: 62px;
    left: 0;
    width: 100%;
    height: 106px;
    z-index: -1;
    display: none;
}
#hpBox {
	font-size: 20px;
	text-align: center;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 62px;
	left: 90px;
}
#hpBox ol {
	display: block;
	list-style: none;
	text-align: center;
	white-space: nowrap;
	margin: 0;
	padding: 0;
	width: 100%;
}
#hpBox li.centerLeft {
	padding-right: 8%;
	width: 16%;				/* sums up to 24%; 1% slack, to leave room for rounding errors */
}
#hpBox li.centerRight {
	padding-left: 8%;
	padding-right: 1%;
	width: 16%;
}
#hpBox li.left {
	text-align: left;
}
#hpBox li.right {
	text-align: right;
}
#hpBox li {
	display: inline-block;
	float: left;
	width: 25%;
	margin: 0;
	padding: 0;
}

/* - Link styles */
#hpBox a:link, #hpBox a:visited {
	color:#000;
	text-decoration: none;
}
#hpBox a:hover, #hpBox a:active {
	color: #cc2a10;
	text-decoration: none;
}

@media all and (max-width: 780px) {
    
    #hpBox {
        top: 7.95vw;
        left: 11.54vw;
    }
    #hpBand {
        display: block;
        top: 7.95vw;
        background-color: white;
        opacity: 0.5;
    }

}
@media all and (max-width: 740px) {

    #hpBand {
        opacity: 0.8;
    }

}
@media all and (max-width: 510px) {

    #hpBand {
        height: 20.784vw;
    }

    #hpBox li.centerLeft {
        padding-right: 4%;
        width: 20%;				/* sums up to 24%; 1% slack, to leave room for rounding errors */
    }
    #hpBox li.centerRight {
        padding-left: 4%;
        padding-right: 2%;
        width: 19%;
    }

}

/*
	CP-specific stlyes
*/
body {
	min-width: 800px; /* matches #left min-width
								+ #center .padIt  min-width
								+ padding on #center .padIt,
								plus a correction because of #right (cf. below) */
	padding: 0 0 0 50px;
	
}
#left {
	float: left;
	width: 25%;
	min-width: 192px; 	/* actually 190px, plus a correction because the widths of #left and #center sum up to 99.9% instead of 100% */
	padding: 0 0 40px;
	overflow: hidden;
}
#left .padIt {
	overflow: hidden;
	max-width: 450px;
	margin-left: auto;
}
#left .padIt.imgContainer {
	margin-bottom: 20px;
}
#center {
	width: 74%; 		/* leaving 1% so that #right does have at least 1px room and is displayed next to #center, rather than slipping below.
						   74.9% would normally do, but rounding errors in IE7 make a wider area for #right necessary. */
	max-width: 770px; 	/* Desired text max-width: 650px, plus padding defined in #center .padIt */
	float: left;
	margin: 0;
	padding: 0 0 40px;
}
#center .padIt {
	min-width: 450px;
	padding-left: 60px;
	padding-right: 60px;
}
#right {
	width: auto;
	overflow: hidden;
	max-width: 1250px; /* large enough to expand even for a 30' display; limit required for background image */
	padding: 0 0 40px;
}
#right .padIt {
	overflow: hidden;
	margin-right: 10%;
}
.borderImg {
	margin: 37px 0 0 0;
	border: none;
}
#left .borderImg {
	width: 155%;
	max-width: 450px;
	/* IE8 regression bug: If 'width: n%' is further limited by max-width, IE8 'forgets' to adjust the intrinsic height of 
	   the element. This affects replaced elements, such as images, which appear distorted. To get around this, max-height
	   must be set according to max-width and the image aspect ratio. This will be handled by a generic jQuery fix wherever
	   the max-height is not set explicitly. */
	float: right;
	border-right: 1px solid #333;
	max-height: 583px; 					/* Needed only for IE8 regression bug, cf. above */
}
#right .borderImg {
	display: none;
	margin-left: 50px;
	border-left: 1px solid #333;
	max-height: 583px; 					/* Needed only for IE8 regression bug, cf. above */
}

#cpBox {
	margin: 2px 0 0;
	height: 98px;
}

#nav {
	list-style: none;
	text-align: center;
	white-space: nowrap;
	margin: 0;
	padding: 0;
}
#nav li {
	display: inline-block;
	float: left;
	width: 20%;
	margin: 0;
	padding: 0;
}
#nav li.centerLeft {
	padding-right: 5%;
	width: 13%;			/* should be 15%, but more pleasing this way */
}
#nav li.centerRight {
	padding-left: 6%;  	/* should be 5%, but looks more even at 6% */
	width: 15%;
	margin-right: auto; /* takes up any remaining slack */
}
#nav li.left {
	text-align: left;
}
#nav li.right {
	text-align: right;
	float: right;
	width: 18%;			/* should be 20%, reduced by 2% to leave room for rounding errors */
}

.crumbLine {
	margin: 16px 0 0;
	height: 10px;
	padding: 3px 0 4px;
	background: url('/pics/tapestry/bg_crumbline.png') top #f0f0f0;
}
.crumbLine, .crumbLine a {
	font-size: 10px;
	line-height: 1;
	color: #999;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
.crumbLine .bgContainer {
	height: 10px;
	padding: 0 0 4px;
	background: url('/pics/tapestry/bg_crumbline.png') bottom;
}
#breadcrumbs .bgContainer {
	white-space: nowrap;
}
#breadcrumbs ol {
	list-style: none;
	float: left;
	margin: 0;
	padding: 0;
}
#breadcrumbs ol li {
	display: inline;
	margin: 0;
	padding-right: 13px;
	background: url('/pics/icons/arrow_gt.gif') right 4px no-repeat;
}
#breadcrumbs #multipartFirstPage {
	padding-right: 0;
	background: none;
}
#breadcrumbs #youarehere {
	padding: 0 0 0 13px;
	background: url('/pics/icons/pin.png') 1px 2px no-repeat;
}
#left .crumbLine, #right .crumbLine {
	margin-top: 116px;
}
#left .crumbLine {
	max-width: 450px;
	margin-left: auto;
}
#right .crumbLine {
	margin-right: 10%;
}

ul#toolsTop {
	list-style: none;
	padding: 0;
	margin: 0 0 20px;
	text-align: right;
}
#toolsTop li {
	display: inline;
	margin: 0 0 0 6px;
}
#toolsTop li img {
	border: 0;
}
#toolsTop .singlePage img, #toolsTop .send img {
	width: 12px;
	height: 8px;	
}
#toolsTop .socialNetworks img, #toolsTop .print img {
	width: 11px;
	height: 10px;	
}

ul#pagerTop, ul#pagerBottom {
	list-style: none;
	padding: 0;
	font: 13px Verdana, Arial, Helvetica, sans-serif;
	line-height: 1;
}
ul#pagerTop {
	margin: 0 0 30px;
}
ul#pagerBottom {
	margin: -14px 0 0;
}
#pagerTop li, #pagerBottom li {
	display: inline;
	color: #ccc;
}
#pagerTop li.prev, #pagerBottom li.prev {
	float: left;
}
#pagerTop li.next, #pagerBottom li.next {
	float: right;
	text-align: right;
}
#pagerTop li.void, #pagerBottom li.void {
	visibility: hidden;
}

p.beginSubsection:first-letter {
	font: 41px "Times New Roman", Times, serif;
	float: left;
	line-height: 1;
	padding: 0;
	margin: 6px 4px 0 0;
}

.subtitle {
	font-style: italic;
	margin-top: 0.5em;
}
p.subtitle + h3 {
	margin-top: 1.2em;
}

.bookBox {
	overflow: hidden; /* This is important: it prevents the floated book cover from sticking out of the div */
	margin-top: 23px;
}
.bookCover {
	display: block;
	float: left;
	margin-right: 2.8em;
	margin-bottom: 1.5em;
	padding-top: 4px;
}
.bookBox h3 {
	margin-top: 0;
}
.bookProps {
	font-style: italic;
}

.ipa {
	font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', Quivira, Code2000, Sun-ExtA, DejaVu Sans, Gentium, 'Doulos SIL', 'Charis SIL', sans-serif;
	font-variant: normal;
}



sup.footnoteRef {
	margin-left: 1px;
}
dl#footnotes {
	list-style: none;
	margin: 0;
	padding: 0;
}
#footnotes dt, #footnotes dd {
	display: block;
	margin: 0;
	padding: 0;
	font: 11px/1.7 Verdana, Arial, Helvetica, sans-serif;
}
#footnotes dt {
	float: left;
}
#footnotes dd {
	margin-left: 20px;
}

ol#pageList {
	list-style: none;
	margin: 1.4em auto 0;
	padding: 0;
	font: 13px Verdana, Arial, Helvetica, sans-serif;
	line-height: 15px;
	text-align: center;
}
#pageList li {
	display: inline-block;
	margin: 0 -6px 0 0;
	text-align: center;
	border-left: 1px solid #ccc;
	color: #000;
	vertical-align: middle;
}
#pageList li a, #pageList li.currentPage {
	padding: 0 8px;
}
ol#pageList li:first-child {
	border-left: none;
}

.paragraph-audio {
	margin: 1.6em 0 2.8em 0;
	padding: 0 25px;
	border-left: 1px dotted #ccc;
}

.paragraph-audio figcaption {
	margin-left: 8px;
	padding-top: 8px;
}

.footer {
	clear: both;
}
.footer, .footer a {
	color: #ccc;
	font-size: 11px;
	line-height: 1.5;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	padding-top: 20px;
	margin-top: auto;
}
.footer ul {
	list-style: none;
	margin: 0;
	padding: 0;	
}
.footer ul li {
	display: inline;
	float: left;
}
.footer #publisher {
	float: right;
}

ul#shareIcons {
	margin: 1.4em auto 0;
	line-height: 18px;
	text-align: center;
}
#shareIcons li {
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	float: none;
	padding-top: 20px;
	height: 18px; 		/* This is needed for preserving the height during a show/hide animation of the
						   img elements inside (otherwise redundant) */
	width: 18px;		/* ditto */
}
#shareIcons img {
	width: 16px;
	height: 16px;
}
ul#shareButtons {
	margin: -21px 0 0;
}
#shareButtons li {
	height: 22px;
}
div.separator {
	clear: both;
}

@media all and (max-width: 870px) {

    body {
        min-width: 0;
        padding: 0;
    }
    #left, #right {
        display: none;
    }
    #center {
        width: auto;
    }
    #center .padIt {
        min-width: 0;
        padding-left: 12px;
        padding-right: 12px;
    }

}
@media all and (max-width: 510px) {

    #cpBox {
        height: 19.2vw;
    }

    #shareIcons {
        visibility: hidden;
    }

}
@media all and (max-width: 430px) {

	.footer #copyright, .footer #publisher {
		float: none;
		display: block;
	}

}
@media all and (max-width: 410px) {

    #breadcrumbs .extended {
        display: none;
    }
    #breadcrumbs .short:after {
        content: "…";
    }
    #breadcrumbs .pagePrefix {
        display: none;
    }
    #breadcrumbs .pageNumber:before {
        content: "S."
    }
}

/* - Link styles */
#logo a:link, #logo a:visited, #logo a:hover, #logo a:active {
	color:#000;
	text-decoration: none;
}
#nav a:link, #nav a:visited {
	color:#222;
}
#nav a:hover, #nav a:active {
	color: #cc2a10;
	text-decoration: none;
}
.crumbLine a:link, .crumbLine a:visited  {
	color: #777;
}
#toolsTop li a:hover, #toolsTop li a:active {
	border: 0;
	color: #f0f0f0;
}
#pagerTitle a:link, #pagerTitle a:visited {
	color: #ccc;
}
#pagerTitle a:hover, #pagerTitle a:active {
	color: #c33;
}
#pagerTop a:link, #pagerTop a:visited, #pagerBottom a:link, #pagerBottom a:visited {
	color: #ccc;
}
#pagerTop a:hover, #pagerTop a:active, #pagerBottom a:hover, #pagerBottom a:active {
	color: #c33;
}
#pagerBottom .next a:link, #pagerBottom .next a:visited {
	color: #a00;
}
#pagerBottom .next a:hover, #pagerBottom .next a:active {
	color: #c33;
}
#pageList a:link, #pageList a:visited {
	color: #ccc;
}
#pageList a:hover, #pageList a:active {
	color: #c33;
}
.footer a:link, .footer a:visited {
	color: #ccc;
}
#shareIcons a:link img, #shareIcons a:visited img {
	border: 1px solid transparent;
}
#shareIcons a:hover img, #shareIcons a:active img {
	border: 1px solid #c33;
}
.crumbLine a:hover, a:active, .footer a:hover, .footer a:active {
	color: #c33;
}

/*
 Blog pages (IT Stuff)
*/

/* Hide print button on index page and search result pages,
   due to a Serendipity bug */
body.it.searchPage #toolsTop .print,
body.it.indexPage  #toolsTop .print {
	visibility: hidden;
}

.serendipity_search_results {
	border-bottom: 4px double #b0b0b0;
	padding-bottom: 1em;
}
.searchterm {
	font-weight: bold;
	padding: 1px 3px;
	border: 1px dotted #b0b0b0;
}

#intraSectionNav {
	list-style: none;
	padding: 0;
	font: 12px/1.5 Verdana, Arial, Helvetica, sans-serif;
	width: 100%;
	height: 18px;
	margin: 33px 0 0;
}
#intraSectionNav li {
	margin: 0;
	padding: 0;
	min-width: 45%;
}
#intraSectionNav a {
	display: block;
	border-bottom: 1px solid #eee;
	text-decoration: none;
	color: #ccc;
}
#intraSectionNav .intraSectionNav_prev {
	text-align: left;
	float: left;
}
#intraSectionNav .intraSectionNav_next {
	text-align: right;
	float: right;
}

#intraSectionNav .intraSectionNav_prev a {
	background: url('/pics/icons/arrow_section_nav_left.gif') left bottom no-repeat;
	padding-left: 14px;
}
#intraSectionNav .intraSectionNav_next a {
	background: url('/pics/icons/arrow_section_nav_right.gif') right bottom no-repeat;
	padding-right: 14px;
}

#intraSectionNav a:hover, #intraSectionNav a:active {
	text-decoration: none;
	color: #c33;
	border-bottom: 1px solid #c00;	
}
#intraSectionNav .intraSectionNav_prev a:hover {
	background: url('/pics/icons/arrow_section_nav_left_red.gif') left bottom no-repeat;
	padding-left: 14px;
}
#intraSectionNav .intraSectionNav_next a:hover {
	background: url('/pics/icons/arrow_section_nav_right_red.gif') right bottom no-repeat;
	padding-right: 14px;
}

.serendipity_date {
	float: right;
	color: #606060;
	padding: 10px 12px 0;
	font-size: 11px;
	line-height: 1;
}
.serendipity_date.stickyPosting {
	background: url('/pics/icons/pin.png') left bottom no-repeat;
	padding-left: 13px;
}
.it .strapline {
	font-style: italic;
	font-weight: normal;
	margin: 16px 0 0;
	background: url('/pics/tapestry/bg_crumbline.png') top #f0f0f0;
	font-size: 12px;
	line-height: 1;
	padding: 9px 12px 12px;
}
.serendipity_title {
	margin: 0;
	padding: 8px 12px;
	background-color: #f0f0f0;
}
.serendipity_no_freetags {
	background: url('/pics/tapestry/bg_crumbline.png') bottom #f0f0f0;
	height: 4px;
}
.serendipity_freeTag {
	font-size: 12px;
	font-style: italic;
	background: url('/pics/tapestry/bg_crumbline.png') bottom #f0f0f0;
	padding: 0 12px 8px;
}
.serendipity_entry .tight li > p:first-child {
    margin-top: 0;
}
.serendipity_entry .tight li > p:last-child {
    margin-bottom: 0;
}
.serendipity_entry_body>p:first-child {
	margin-top: 1.5em;
}

.serendipity_imageComment_left {
	float: left;
	margin: 0.5em 20px 0.5em 0;
}
.serendipity_imageComment_center {
	display: inline-block;
}
.serendipity_imageComment_right {
	float: right;
	margin: 0.5em 0 0.5em 20px;
}
.serendipity_imageComment_img img {
	border: 1px solid #ddd;
}
.serendipity_imageComment_txt {
	font-size: 11px;
	text-align: left;
}

.serendipity_footnote {
	font-size: 10px;
}

.ownerOnly,
.serendipity_edit_nugget * {
	background-color: #e8effd;
}
.serendipity_entryFooter {
	font-size: 11px;
	color: #b0b0b0;
	line-height: 2.5;
}
.individualEntryFooter {
	border-top: 1px dotted;
	margin: 0 0 32px;
}
.individualEntryFooter a {
	color: #b0b0b0;
}
.entryPage .individualEntryFooter {
	margin: 18px 0 32px;
	line-height: 3;
}

.serendipity_entryFooter a:hover, .serendipity_entryFooter a:active {
	text-decoration: underline;
	color: #c33;
}


#additionalReading {
	background: #dce0da;
	overflow: hidden;
	border: 1px dotted #333;
	padding: 13px 13px 13px 14px;	 /* 14px instead of 13px: compensating the -1px left margin of #suggestedTopics */
	margin: 32px 0;
}

.topicList {
	margin: 0;
	padding: 0;
	margin-left: -1px; 	/* making room for the 1px border */
	line-height: 1;
}
.topicList dt {
	margin: 0 0 0.75em 0;
	padding: 0;
	background: #dce0da;
	font-variant: small-caps;
}
.topicList dd {
	margin: 0.5em 0 0 0;
	padding: 0;
}
#suggestedTopics {
	float: left;
	width: 50%;
	border-right: 1px solid #333;
}
#relatedTopics {
	float: right;
	width: 50%;
	border-left: 1px solid #333;
}
#suggestedTopics dd {
	padding-right: 1em;
	
}
#relatedTopics dt,
#relatedTopics dd {
	padding-left: 1em;
}
.boxCount1 {
	text-align: center;
}
.boxCount1 #suggestedTopics,
.boxCount1 #relatedTopics {
	float: none;
	border: none;
	margin: 0;
	width: auto;
	display: inline-block;
}
.boxCount1 #suggestedTopics *,
.boxCount1 #relatedTopics * {
	padding: 0;
	text-align: left;
}

.serendipity_section_trackbacks {
	margin: 18px 0;
	padding: 18px;
	border: 1px dotted black;
}

.commentsViewMode {
	font: 10px/1 Arial, Helvetica, sans-serif;
	margin: 2em 0 3em;
}
.commentsViewMode * {
	padding: 2px;
}
.commentsViewMode span {
	border: 2px inset #ddd;
	background: #f0f0f0;
}
.commentsViewMode a {
	border: 2px outset #ddd;
	background: #f6f6f6;
}

.nocomments {
	margin: 3em 0;
}

ol.serendipity_comment,
ul.serendipity_comment_source {
	margin: 0;
	padding: 0;
	list-style: none;
} 
.serendipity_comment_source {
	color: #606060;
	min-height: 49px;
	background: url('/pics/tapestry/bg_crumbline.png') bottom repeat-x #f0f0f0;
}
.comment_source_trace {
	float: left;
	font-size: 28px;
	line-height: 49px;
	margin-right: 18px;
	padding: 0 12px;
	border-right: solid 3px #fcfcfc;
}
.comment_source_trace a {
	color: #fcfcfc;
}
.comment_source_author {
	font-size: 14px;
	padding: 4px 0;
	background: url('/pics/tapestry/bg_transition_grey_top.png') top repeat-x #f0f0f0;	
}
.commentAuthorContactDetails {
	float: right;
	padding: 0.5em 1em 0;
	font-size: 11px;
	margin-left: 0.5em;
}
.commentAuthorContactDetails a {
	color: #606060;
}
.comment_source_mail {
	clear: right;
}
.comment_source_date {
	font-size: 11px;
	padding-bottom: 3px;
}
.serendipity_comment {
	position: relative;
}
.commentUserAction {
	font: 10px/1 Arial, Helvetica, sans-serif;
	position: absolute;
	bottom: -8px;
	right: 8px;
}
.commentUserAction a {
	display: block;
	padding: 3px;
	border: solid 1px #ccc;
}
.comment_reply {
	background-color: #ddd;
}
.comment_source_ownerlink {
	right: 52px;
}
.serendipity_commentBody {
	clear: both;
	padding: 1em 1em 0 0;
	border-right: 1px dotted #ccc;
	border-bottom: 1px dotted #ccc;
	margin-bottom: 26px;
}
.serendipity_commentBody *:first-child {
	margin-top: 0;
}

#feedback p {
	padding: 0.5em 20px;
	margin: 0;	
}
#feedback .serendipity_msg_important {
	background-color: #ffa4a4;
}
#feedback .serendipity_msg_notice {
	background-color: #9fcfff;
}

.serendipity_section_commentform {
	padding: 16px 24px;
	background: url('/pics/tapestry/bg_transition_grey_bottom.png') bottom repeat-x #f0f0f0;	
}
.serendipity_commentsTitle {
	font-size: 20px;
}
.serendipity_section_commentform .serendipity_commentsTitle {
	padding: 16px 24px 0;
	margin: -16px -24px 0;
	background: url('/pics/tapestry/bg_transition_grey_top.png') top repeat-x #f0f0f0;	
}
.serendipity_commentsTitle+p {
	color: #333;
	padding: 8px 1em;
	border: 1px solid #ddd;
	background: #f9f9f9;
}
#serendipity_comment dl,
#serendipity_comment ul {
	list-style: none;
	padding: 0;
	overflow: hidden;
}
#serendipity_comment dl {
	margin: 0;
}
#serendipity_comment ul {
	margin: 0 0 0 90px;
}
#serendipity_comment dt,
#serendipity_comment dd {
	display: block;
	margin: 8px 0 0;
	padding: 0;
	overflow: hidden;
}
#serendipity_comment dt {
	width: 90px;
	clear: both;
	float: left;
}
#serendipity_comment dd input {
	width: 260px;
	height: 16px;
}
#serendipity_comment .commentsInputHint {
	font-size: 10px;
	margin: 0.25em 0 0.5em;
}
#serendipity_comment>div {
	margin: 12px 0 0 90px;
}
#serendipity_comment textarea {
	width: 95%;
	height: 253px;
	margin-bottom: 12px;
}

dt#serendipity_commentCheckboxRemember_label,
dt#serendipity_commentCheckboxSubscribe_label {
	float: none;
	margin: 0 0 -27px 115px;
	padding: 0;
	width: auto;
}

dd#serendipity_commentCheckboxRemember,
dd#serendipity_commentCheckboxSubscribe {
	float: none;
	padding-left: 90px;
}
dd#serendipity_commentCheckboxRemember input,
dd#serendipity_commentCheckboxSubscribe input{
	width: auto;
	height: auto;
}
.serendipity_commentButton input {
	width: 90px;
}
#serendipity_comment li {
	float: left;
	margin: 0;
	padding: 0;
}
li#serendipity_commentSubmit {
	clear: both;
	padding: 12px 0 4px 0;
}
li#serendipity_commentPreview {
	padding: 12px 0 0 12px;
}

#serendipity_comment .serendipity_comment_captcha {
	padding: 1px 0 0;
	width: 95%;
	background: url('/pics/tapestry/bg_transition_grey_separator.png') 0 4px repeat-x #f0f0f0;	
}
#serendipity_comment .serendipity_comment_captcha ul {
	margin: 0;
}
#serendipity_comment .serendipity_comment_captcha li {
	padding: 0 12px 8px 0;
	vertical-align: middle;
}

.container_serendipity_syndication_plugin ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.container_serendipity_syndication_plugin li {
	padding: 0;
	margin: 0;
}
.container_serendipity_syndication_plugin img {
	vertical-align: middle;
}

#serendipity_categories_list li.category_depth1:before {
	content: "::";
}
#serendipity_categories_list li.category_depth2:before {
	content: ":: ::";
}
#serendipity_categories_list li.category_depth3:before {
	content: ":: :: ::";
}


/*
 Codeview pages (IT Stuff)
*/
body.codeView #left {
	overflow: visible;
}
body.codeView #left .crumbLine {
	max-width: none;
}
body.codeView #left .imgContainer {
	display: none;
}
body.codeView #left .padIt {
	overflow: visible;
	margin-top: 37px;
	max-width: none;
}
body.codeView #right .padIt {
	display: none;
}

body.codeView #left .viewTitle {
	float: left;
	margin: 0 0 20px;
	padding: 18px 20px;
	font: normal small-caps normal 32px Arial, Helvetica, sans-serif;
	border: 1px dashed #000;
}
body.codeView #left .viewTitle+* {
	clear: left;
}
body.codeView #left ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
body.codeView #left li {
	margin: 0;
	padding: 0;
}
body.codeView #articleBacklinks p {
	margin: 1em 0 0;
}
body.codeView #articleBacklinks li {
	line-height: 1;
	margin-top: 0.5em;
	padding-left: 1em;
}
body.codeView #articleBacklinks li:before {
	content: '\ab';
	float: left;
	margin-left: -1em;
}
body.codeView #tocUplink {
	float: left;
	margin: 1.5em 0 0;
}
body.codeView #tocUplink a {
	padding-left: 8px;
}
body.codeView #tocUplink a:link,
body.codeView #tocUplink a:visited {
	color: #b3b3b3;
	background: url('/pics/icons/upwards_arrow_grey_left.png') left 3px no-repeat;
}
body.codeView #tocUplink a:hover,
body.codeView #tocUplink a:active {
	color: #c33;
	background: url('/pics/icons/upwards_arrow_red_left.png') left 3px no-repeat;
}
body.codeView #tocUplink+ul {
	margin-left: 24px;
}
body.codeView #left #toc {
	padding-left: 4px;
	margin-top: 1.5em;
}
body.codeView #toc:before {
	content: '+';
	margin-left: -4px;
}
body.codeView #toc ul {
	padding-left: 7px;
}
body.codeView #toc li {
	padding-left: 15px;
	border-left: 1px dotted black;
}
body.codeView #toc li:before {
	content: '-';
	margin-left: -10px;
	float: left;
}
body.codeView #toc .subdir {
	padding: 10px 0 0 12px;
}
body.codeView #toc .subdir:before {
	content: '-+';
	letter-spacing: 3px;
	margin-left: -7px;
}
body.codeView #toc .subdir p {
	margin: 0;
	padding-left: 18px;
}
body.codeView #toc .activeFile {
	font-weight: bold;
}
body.codeView #toc .activeFile:before {
	font-weight: normal;
}

body.codeView h1 {
	font: normal normal 22px Verdana, Arial, Helvetica, sans-serif;
	margin: 30px 0 -10px;
}
body.codeView h2 {
	font: normal normal 16px monospace;
	padding: 0 0 1em;
	margin: 30px 0 0;
	border-bottom: 1px solid #000;
}
body.codeView #center pre {
	margin-top: 20px;
}


/*
 Story pages (Texte)
*/
#textStory {
	margin: 37px 0 0;
}
#textStory h1 {
	font: normal small-caps normal 32px "Times New Roman", Times, serif;
	padding: 0;
	margin: -20px 0 20px;
}
#textStory .strapline {
	font: italic normal normal 17px/1.5 "Times New Roman", Times, serif;
    margin: -4px 0 36px;
}
#textStory h2 {
	font: small-caps 15px Verdana, Arial, Helvetica, sans-serif;
	margin: 30px 0 0 0;
}
#textStory h3 {
	font: normal small-caps normal 17px "Times New Roman", Times, serif;
	letter-spacing: 0.6px;
	padding: 0;
	margin: 1.8em 0 0.5em;
}
#textStory p, #textStory #footnotes dd {
	text-align: justify;
}

#textStory h1#pagerTitle, #textStory h1#pagerTitle:first-line {
    color: #ccc;
    text-align: center;
    font: normal small-caps normal 19px/1 "Times New Roman", Times, serif;
    letter-spacing: 0.6px;
    margin: -4px 0 0;
    padding: 0;
}

#textStory ul#pagerTop {
	margin-top: -16px;
}
#textStory ul#pagerTop.entryPage {
	margin-top: -1px;
	margin-bottom: -32px;
}

#textStory p.publication {
	font-style: italic;
}

@media all and (max-width: 480px) {

    #textStory h1#pagerTitle, #textStory h1#pagerTitle:first-line {
        font-size: 3.5vw;
        letter-spacing: 0.125vw;
    }

    #textStory ul#pagerTop {
        margin-top: -3.334vw;
    }

}
@media all and (max-width: 410px) {

    #textStory h1#pagerTitle, #textStory h1#pagerTitle:first-line {
        font-size: 14px;
        letter-spacing: 0.51px;
        padding-top: 4px;
    }

    #pagerTitle .short:after {
        content: "…";
    }

    #pagerTitle .extended {
        display: none;
    }

    #textStory ul#pagerTop {
        margin-top: -14px;
    }
}


/*
 Individual pages: Texte - index pages
*/
#textHome ul#themeTabs {
	list-style: none;
	margin: 2.5em 0 0 0;
	padding: 0;
	overflow: hidden;
}
#textHome ul#themeTabs li {
	float: left;
	width: 24%;
	margin: 0 1px 0 0;
	padding: 0;
	border: 1px solid #aaa;
	text-align: center;
	background: url('/pics/tapestry/tab_fade.png') no-repeat top right #eee;
    -webkit-border-top-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topright: 3px;
    border-top-right-radius: 3px;
}
#textHome #themeTabs li:hover, #textHome #themeTabs li:active {
	background-color: #f0f0f0;
	border-color: #bbb;
}
#textHome #themeTabs a {
	display: block;
	padding: 9px 0;
	border-top: 1px solid #f8f8f8;
	border-left: 1px solid #f8f8f8;
	background: url('/pics/tapestry/tab_fade.png') no-repeat top left transparent;
	font-style: normal;
    -webkit-border-top-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topright: 3px;
    border-top-right-radius: 3px;
}
#textHome ul#themeTabs li#entertainment {
	min-width: 120px;
}
#textHome ul#themeTabs li#books {
	min-width: 132px;
}
#textHome ul#themeTabs li#backgrounders {
	width: 21%;
}
#textHome ul#themeTabs li#strangeStories {
	width: 23%;
}
#textHome ul#themeTabs li.activeTab {
	background-color: #f8f8f8;
	border-bottom: 1px solid #f8f8f8;
	margin-bottom: -1px;
	background: url('/pics/tapestry/tab_fade_active.png') no-repeat top right #f8f8f8;
}
#textHome ul#themeTabs li.activeTab a {
	border-top: 1px solid #fcfcfc;
	border-left: 1px solid #fcfcfc;
	padding-bottom: 10px;
	background: url('/pics/tapestry/tab_fade_active.png') no-repeat top left transparent;
	cursor: default;
}
#textHome .inactiveTabContent {
	display: none;
}
#textHome h2 {
	clear: both;
	border-top: 1px solid #aaa;
	padding-top: 24px;
	background-color: #f8f8f8;
	margin-top: -1px;
	background: url('/pics/tapestry/h2_section_fade.png') repeat-x bottom #f8f8f8;
}
#textHome p {
	text-align: justify;
}
#textHome p.bookProps {
	text-align: left;
}
#textHome p.publication {
	color: #ccc;
	font-size: 11px;
}
#textHome div.bookBox + h2 {
	margin-top: 30px;
}

/* Currently unused: h2 with subtitle. Use as
   <h2 class="subtitled">...</h2>
   <p class="subtitle">...</p> 					*/
#textHome h2.subtitled {
	background-image: none;
}
#textHome .subtitle {
	margin-top: 0;
	padding-top: 0.5em;
	padding-bottom: 15px;
	background: url('/pics/tapestry/h2_section_fade.png') repeat-x bottom #f8f8f8;
}
#textHome p.subtitle + h3 {
	margin-top: 18px;
}

#textHome h3.safeWithoutSmoothing {
	/* Class safeWithoutSmoothing will be added by JS if
	   (a) ClearType is off (IE, Opera) or
	   (b) ClearType can't be detected (FF, Webkits) and is *presumably* off
	       (ie, OS is Windows XP where 'off' is the system default).
	*/
	font-size: 17px;
	letter-spacing: 0.8px;
}

#textHome .bookBox {
	margin-top: 18px;
}
#textHome #crisis img.bookCover {
	width: 185px;
	height: 260px;
}
#textHome #monarchies img.bookCover {
	width: 185px;
	height: 288px;
}

#textHome #toggleAudio {
	margin-top: 1.5em;
}
#textHome #toggleAudio img {
	width: 9px;
	height: 9px;
	border: none;
}
#textHome #toggleAudio a:link, #textHome #toggleAudio a:visited {
	color: #000;
}
#textHome #toggleAudio a:hover, #textHome #toggleAudio a:active {
	color: #c33;
	text-decoration: none;
}
#textHome #waspTargetTextPageAudio {
	/*display: none;*/
}

#textHome #offerArticle {
	float: left;
	width: 100%;
}
#textHome #offerArticle input {
	display: block;
	float: left;
}
#textHome #offerArticle label, #textHome #reveal {
	display: block;
	padding-left: 28px;
}

#textHome p#reveal {
	display: none;
	position: relative;
}
/* - Link styles */
#textHome p.publication a:link, #textHome p.publication a:visited {
	color: #ccc;
}
#textHome p.publication a:hover, #textHome p.publication a:active {
	color: #c33;
}
#textHome #themeTabs a:link, #textHome #themeTabs a:visited {
	color: #555;
}
#textHome #themeTabs a:hover, #textHome #themeTabs a:active {
	color: #636363;
	text-decoration: none;
}

@media all and (max-width: 530px) {

    #textHome ul#themeTabs li,
    #textHome ul#themeTabs li#backgrounders,
    #textHome ul#themeTabs li#strangeStories {
        width: 99%;
    }
    #textHome ul#themeTabs li.activeTab {
        margin-bottom: 0;
        border-bottom-color: #bbb;
    }
    #textHome h2 {
        border-top: none;
    }

}

/*
 Individual pages: Bytes, Kontakt, Datenschutzerklärung
*/
#bytesHome h2 {
	font-size: 16px;
}

#contact #sendMessage dl {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
#contact #sendMessage dt,
#contact #sendMessage dd {
	display: block;
	margin: 8px 0 0;
	padding: 0;
	overflow: hidden;
}
#contact #sendMessage dt {
	width: 90px;
	clear: both;
	float: left;
}
#contact #sendMessage dd input {
    box-sizing: border-box;
    width: 95%;
	max-width: 226px;
	height: 22px;
}
#contact #sendMessage #subject {
    max-width: none;
}
#contact #sendMessage div {
	margin: 8px 0 0 90px;
}
#contact #sendMessage textarea {
    box-sizing: border-box;
	width: 95%;
	height: 255px;
    margin: 0;
    padding: 0;
}
#contact #sendMessage #submit {
	width: 90px;
}

#contact h2, #privacy h2 {
	font-size: 16px;
	margin: 48px 0 12px;
}
#contact h2.legal-visdp {
	font-size: 13px;
}
#contact dl.addressData {
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 1.5;
	overflow: hidden;
}
#contact .addressData dt,
#contact .addressData dd {
	margin: 0;
}
#contact .addressData:not(.singleLine) dd#mail {
	margin-top: 1em;
}
#contact .addressData.singleLine dt,
#contact .addressData.singleLine dd {
	display: inline-block;
	margin: 0 5px 8px 0;
	float: left;
	border-right: 1px solid #000;
	padding: 0 5px 2px 0;
	white-space: nowrap;
}
#contact .addressData.singleLine dd#phone {
	border-right: none;
	padding-right: 0;
	margin-right: 0;
}

#contact ul#design {
	list-style: none;
	margin: 36px 0 0;
	padding: 0;
	text-align: left;
}

#contact #design li {
	display: block;
	white-space: nowrap;
	margin: 0;
	padding: 0;
}
#contact #design #designer {
	margin: 0 12px 12px 0;
}
#contact #design #validated {
	font-size: 10px;
}
#contact #design #validated img {
	width: 57px;
	height: 20px;
	margin-right: 10px;
	vertical-align: middle;
	padding-bottom: 3px;
}
.contact #publisher, .privacy #publisher {
	display: none;
}

#contact.sendSuccess h1 {
	font: 20px Verdana, Arial, Helvetica, sans-serif;
}
#contact.sendSuccess address {
	color: #000;
	font-style: italic;
	display: block;
	margin: 0 0 0 90px;
	padding: 0;
}

#contact.sendError h1 {
	font: 20px Verdana, Arial, Helvetica, sans-serif;
	color: #b00;
}
#contact.sendError p.errorMessage {
	margin-left: 90px;
	font-family: "Courier New", Courier, monospace;
	color: #b00;
}
#contact.sendError p.errorMessage strong {
	font-weight: normal;
}

.contact.sendSuccess #publisher,
.contact.sendError #publisher {
	display: inherit;
}

/* - Link styles */
#contact .addressData #mailto:link, #contact .addressData #mailto:visited {
	color: #000;
	text-decoration: none;
}
#contact .addressData #mailto:hover, #contact .addressData #mailto:active {
	color: #c33;
	text-decoration: underline;
}

#contact.sendError .addressData #mailto:link, #contact.sendError .addressData #mailto:visited {
	color: #a00;
	text-decoration: none;
}
#contact.sendError .addressData #mailto:hover, #contact.sendError .addressData #mailto:active {
	color: #c33;
	text-decoration: underline;
}

#privacy .language-switch {
	font-size: 85%;
}

/*
	Joint styles
*/
.logoLine, .logoLine a  {
	font: 48px "Times New Roman", Times, serif;
	line-height: 1.5;
	letter-spacing: 7px;
	margin: 0;
	padding: 0;
}
.cpLink {
	font: 17px Arial, Helvetica, sans-serif;
	line-height: 1.5;
	margin: 0;
	padding: 0;
	clear: none;
}
.cpLink#textPage {
	word-spacing: -0.2em;
}

@media all and (max-width: 510px) {

    .logoLine, .logoLine a {
        font-size: 9.4vw;
        letter-spacing: 1.35vw;
    }

    .cpLink {
        font-size: 3.35vw;
    }

    #nav li.centerLeft {
        padding-right: 4%;
        width: 15%;
    }
    #nav li.centerRight {
        padding-left: 4%;
        width: 15%;
    }
    #nav li.left {
        text-align: left;
    }
    #nav li.right {
        text-align: right;
        width: 19%;
    }

}
@media all and (max-width: 450px) {

    .logoLine, .logoLine a {
        font-size: 8.9vw;
        letter-spacing: 1.25vw;
    }
    .cpLink {
        font-size: 14px;
    }

}
@media all and (max-width: 360px) {

    .cpLink {
        font-size: 13px;
    }
    #nav li.centerLeft {
        padding-right: 3%;
    }

}

/*
	Special use
*/

/* Print preview object (= outer frame) */
#printPreview {
	position: fixed;
	top: 2%;
	left: 5%;
	width: 85%;
	height: 88%;
	margin: 0 auto;
	z-index: 11;
}
#printPreview .padIt {
	padding: 20px;
	background-color: #eee;
	border: 2px #333 solid;
	height: 97%;
}
#printPreview object {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: auto;
	border: 2px inset #eee;
}
#printPreviewClose {
	position: absolute;
	top: -8px;
	right: -8px;
	width: 22px;
	height: 22px;
	font: bold 12px/1 Arial, Helvetica, sans-serif;
	vertical-align: top;
	text-align: center;
	
}
#printPreviewClose img {
	width: 22px;
	height: 22px;
	border: none;
	padding: 0;
}

#overlayShadow {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 10;
}
#overlayShadow img {
	width: 100%;
	height: 100%;
}

/* Print preview content (loaded into object, content area) */
#printTopper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	border-bottom: 1px #333 solid;
}
#printTopper ul {
	list-style: none;
	margin: 0;
	padding: 7px 20px;
	background-color: #eee;
	overflow: hidden;
}
#printTopper li {
	display: inline-block;
	line-height: 29px;
	float: right;
	padding: 0 10px 0 0;
}
#printTopper input {
	vertical-align: -2px;
	margin: 0;
	padding: 0;
}
#printTopper #printPreview_goBack {
	float: left;
}
#printTopper #startPrinting a {
	display: block;
	border: 2px solid #a00;
	background-color: #f0f0f0;
	line-height: 25px;
	padding: 0 10px;
	margin-right: 20px;
}
#printTopper #startPrinting a:hover, #printTopper #startPrinting a:active {
	border: 2px solid #c00;
	background-color: #fff0dd;
	color: #c33;
}