/* masturbatewithothers.com - main stylesheet */

body {
	margin: 0;
	padding: 0 0 20px 0;
	background: #dcdcdc;
	color: #222222;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 13px;
	line-height: 1.55;
}

a { color: #0000ee; text-decoration: underline; }
a:visited { color: #551a8b; }
a:hover { color: #cc0000; }

h1 { margin: 0 0 10px 0; font-size: 20px; line-height: 1.3; color: #222222; }
h2 { margin: 22px 0 8px 0; padding-bottom: 2px; font-size: 15px; color: #336699; border-bottom: 1px dotted #999999; }
h3 { margin: 14px 0 4px 0; font-size: 13px; }
p { margin: 0 0 10px 0; }
code { font-family: "Courier New", Courier, monospace; font-size: 12px; background: #f2f2f2; }

/* page frame: 960 px, centred */
#container {
	width: 960px;
	max-width: 100%;
	box-sizing: border-box;
	margin: 10px auto 0 auto;
	background: #ffffff;
	border: 1px solid #a0a0a0;
}
#header { padding: 12px 14px 8px 14px; border-bottom: 3px solid #336699; }
#header .sitename { font-size: 22px; font-weight: bold; color: #336699; text-decoration: none; }
#header .slogan { display: block; color: #666666; font-size: 11px; }
#navbar { padding: 5px 14px; background: #eeeeee; border-bottom: 1px solid #c0c0c0; font-size: 12px; font-weight: bold; }
#navbar a { color: #0000cc; }

table.maintable { width: 100%; border-collapse: collapse; }
td.maincol { vertical-align: top; padding: 14px 18px 10px 14px; }
td.sidecol { vertical-align: top; width: 220px; padding: 14px 12px 10px 0; }

/* start block */
.lede { font-size: 14px; }
.startrow { margin: 12px 0 8px 0; }
.startbtn {
	display: inline-block;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	cursor: pointer;
	padding: 6px 22px;
	background: #e6e6e6;
	border: 2px outset #bbbbbb;
	color: #000000;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
}
a.startbtn:visited { color: #000000; }
.startbtn:hover { background: #d6d6d6; color: #000000; }
.startbtn:active { border-style: inset; }
.agenote { margin-left: 8px; font-size: 11px; color: #555555; }
.agenote b { color: #cc0000; }
.small { font-size: 11px; color: #555555; }

/* the fixed 18+ line at the Start button; after the answer the plain link takes its place */
#startplain { display: none; }
html.age-ok #startplain { display: block; }
#ageline { display: flex; align-items: center; margin: 12px 0 8px 0; }
html.age-ok #ageline, html.age-ok .ageonly { display: none; }
#ageline button { flex: none; }
#ageline .agenote { margin-left: 10px; }
#ageline.plainline { margin: 0 0 12px 0; padding: 5px 7px; background: #f2f2f2; border: 1px solid #999999; font-size: 12px; }
#ageline.plainline button { padding: 3px 10px; font: bold 12px Verdana, Geneva, Tahoma, sans-serif; background: #e6e6e6; border: 2px outset #bbbbbb; cursor: pointer; }
#ageline.plainline button:active { border-style: inset; }
.wireline { display: none; }
html[data-plain-zone="strict"] .wireline { display: block; }

/* grey boxes */
.box { margin: 0 0 12px 0; background: #f2f2f2; border: 1px solid #999999; }
.boxhead { margin: 0; padding: 3px 6px; background: #d4d4d4; border-bottom: 1px solid #999999; font-size: 11px; font-weight: bold; text-transform: uppercase; }
.boxbody { padding: 6px 8px; font-size: 12px; }
.boxbody ul, .boxbody ol { margin: 0; padding-left: 18px; }
.boxbody li { margin-bottom: 3px; }
.livebox { margin: 14px 0; }
.livebox .boxbody { font-size: 13px; }

/* simple tables */
table.steps { width: 100%; margin: 6px 0 12px 0; border-collapse: collapse; }
table.steps td { padding: 5px 7px; border: 1px solid #bbbbbb; vertical-align: top; }
table.steps td.num { width: 26px; background: #eeeeee; text-align: center; font-weight: bold; }
ul.points { margin: 0 0 10px 0; padding-left: 20px; }
ul.points li { margin-bottom: 5px; }

dl.faq { margin: 0; }
dl.faq dt { margin-top: 10px; font-weight: bold; }
dl.faq dd { margin: 2px 0 0 0; padding-left: 14px; border-left: 3px solid #dddddd; }

.closebox { margin-top: 18px; padding: 8px 10px; border: 1px solid #999999; background: #f2f2f2; }
.closebox h2 { margin-top: 0; border-bottom: 0; }

/* legal pages */
.doc { max-width: 720px; }
.dateline { color: #666666; font-size: 11px; }
form.letter label { display: block; margin-top: 10px; font-weight: bold; }
form.letter input, form.letter select, form.letter textarea { width: 100%; max-width: 480px; box-sizing: border-box; font-family: Verdana, Geneva, sans-serif; font-size: 13px; padding: 3px; }
form.letter button { margin-top: 12px; font-family: Verdana, Geneva, sans-serif; font-size: 13px; font-weight: bold; padding: 3px 12px; background: #e6e6e6; border: 2px outset #bbbbbb; cursor: pointer; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

#footer { padding: 10px 14px; border-top: 1px solid #c0c0c0; background: #f6f6f6; text-align: center; font-size: 11px; color: #555555; }
#footer p { margin: 0 0 5px 0; }

.skip { position: absolute; left: -10000px; }
.skip:focus { left: 6px; top: 6px; background: #ffffff; padding: 3px; }

@media (max-width: 760px) {
	body { font-size: 15px; background: #ffffff; padding-bottom: 0; }
	#container { width: auto; margin: 0; border: 0; }
	#header { padding: 8px 12px 6px 12px; }
	#header .sitename { font-size: 18px; }
	#navbar { padding: 5px 12px; font-size: 13px; line-height: 1.8; }
	table.maintable, table.maintable tbody, table.maintable tr, td.maincol, td.sidecol { display: block; width: auto; }
	td.maincol { padding: 10px 12px 6px 12px; }
	td.sidecol { padding: 4px 12px 10px 12px; }
	h1 { font-size: 20px; }
	h2 { font-size: 17px; }
	.lede { font-size: 15px; }
	.agenote { display: block; margin: 6px 0 0 0; }
	#ageline { display: block; }
	#ageline button.startbtn { display: inline-block; }
	#ageline .agenote { font-size: 12px; }
	html.age-ok #ageline { display: none; }
}

#navbar a, #footer a { white-space: nowrap; }