body{margin: 0; padding:0 0 0 0;}


/* misc. styles just for prototyping */
.fullWidth h1, .fullWidth h2, .fullWidth h4{text-align: center;font-family: arial, sans-serif;}
.fullWidth h1, .fullWidth h2, .fullWidth h3{font-family: 'Oswald', 'Roboto Slab', Arial;}

.fullWidth h2.kicker{background-color:#FFF; color:#f7941e; margin: auto; margin-top:75px; padding: 0; font-size: 1.5em; font-family:'Oswald', Arial, sans-serif; text-transform: uppercase; display:inline-block; text-align:top; }
.fullWidth h1 {margin-top: 100px;}
.fullWidth h4{font-family: serif; font-weight: normal; font-size: 1.2em; line-height: 1.6em;font-style: italic;}
.fullWidth .story p, .fullWidth h4{width:90%; margin: 0 auto;}
.fullWidth .story h3{width:80%; margin: 2em auto 0 5%; margin-top: 2em; font-size: 2em; font-family: 'Oswald', 'Amatic SC', 'Roboto Slab', Arial, sans-serif;}
.fullWidth .story h3.tagline{width:80%; margin: 0 auto; margin-top:0; text-align:center; font-family: 'Amatic SC', Arial, sans-serif;}
.fullWidth .story p{margin-top: 1em;}
.fullWidth .story p.intro{font-size: 1.2em; line-height: 1.5em; font-style: italic;}
.fullWidth .story p a{color:#f15a29; font-weight: bold; font-family: Arial, sans-serif;}

.fullWidth ul.listView {text-decoration: none; list-style-type: none; padding:0; margin:20px 0 0 0; width: 100%;}
.fullWidth ul.listView li{border-top: 1px dotted #666;  padding:8px 0 8px 20px; margin:0; font-family: arial, sans-serif; }
.fullWidth ul.listView a li:hover{background-color: #CCC;}
.fullWidth ul.listView a {text-decoration: none; color:#000;}

.firstcharacter { float: left; color: #000; font-size: 4em; line-height: .9em; padding-top: 0px; padding-right: 8px; padding-left: 3px; font-family: 'Oswald', arial, sans-serif; font-style: normal; }
.mugshot{float:right; margin: 20px 5% 20px 20px;}
.cutline{font-weight: bold; font-family: arial, sans-serif; color:#f15a29;}
.byline {font-family: arial, sans-serif; font-size: .85em; font-weight: normal; text-align: center; color: #999; }
.story p.credit {font-family: arial, sans-serif; font-size: .7em; font-weight: normal; text-align: right; color: #999; margin-top: 0; padding-top: 0;}
.label {font-family: Arial, sans-serif; font-weight: bold;}
img.full{width: 100%;margin:auto;}
img.left, img.right{width: 90%;margin: 20px 5% 20px 5%;}

#menu {z-index: 998; background-color: #000; color: #FFF; margin-bottom:0px; padding:0; position: fixed; top:0;width: 100%; border-bottom: 3px #999 solid;}
#menu #titleBar{max-width: 960px; margin: 0 auto;height: 3.3em; padding: 0;}
#menu #titleBar h1{font-family: 'Oswald', Arial, sans-serif; font-size: 1.2em; padding:15px 0 10px 5%; float:left;margin: 0; text-transform: uppercase; }
#menu #titleBar h1 span.highlight{color:#f7941e;}
#menu #titleBar h1 a{color: #CCC; text-decoration: none;}
#menu #titleBar h1 a:hover{color: #FFF;}
#menu #titleBar img{float: right; padding: 5px; margin: 8px 15px 0 0; cursor: pointer; cursor: hand; border: 2px solid #333; border-radius: 3px; }
#menu ul{text-decoration: none; background-color: #666; list-style-type: none; padding:0; margin:0 auto; max-width: 960px; width: 100%;}
#menu ul li{background-color: #CCC; border-top: 1px dotted #666;  padding:8px 0 8px 20px; margin:0; font-family: arial, sans-serif; }
#menu ul a li.current {background-color: #F2F2F2;}
#menu ul a li:hover{background-color: #FFF;}
#menu ul a {text-decoration: none; color:#000;}
#menu ul li.tbd{text-decoration: line-through; color:#666;}
#menu-ul {display: none;}

.icon{padding-left: 1.6em;}

.fullWidth .story h3.subhed{font-size: 1.5em;}

.icon.how{
	background: url(../img/icons_how.png) left top no-repeat;
	background-size: 1.3em;
	-webkit-print-color-adjust:exact;
}

.icon.caution{
	background: url(../img/icons_caution.png) left top no-repeat;
	background-size: 1.3em;
	-webkit-print-color-adjust:exact;
}
.icon.trap{
	background: url(../img/icons_trap.png) left top no-repeat;
	background-size: 1.3em;
	-webkit-print-color-adjust:exact;
}
.icon.bottomLine{
	background: url(../img/icons_bottomLine.png) left top no-repeat;
	background-size: 1.3em;
	-webkit-print-color-adjust:exact;
}
.icon.help{
	background: url(../img/icons_help_alt.png) left top no-repeat;
	background-size: 1.3em;
	-webkit-print-color-adjust:exact;
}

#footer {background-color: #333; margin:0; padding:20px;}
#footer .note{font-family: Arial, sans-serif; font-weight: bold; font-size: .9em; margin: 20px auto 0 auto; color:#FFF; max-width:900px; padding-bottom: 30px;}
#footer .note a{color:#f7941e;}
#footer .note .firstcharacter {font-size: 5.5em;}

@media (min-width:500px) {
	img.left{width: 45%;float: left; margin: 20px 20px 20px 5%;}
	img.right{width: 45%;float: right; margin: 20px 5% 20px 20px;}
	#menu #titleBar h1{font-size: 1.5em; padding:10px 0 10px 3%;}
	.fullWidth .story h3.subhed{font-size: 2em;}
}


@media (min-width:750px) {
	.fullWidth h1 {font-size: 3em; }
	.fullWidth h2.kicker{background-color:#f7941e; color:#FFF; margin: auto; margin-top:56px; padding: 8px 20px; font-size: 1.2em; min-width: 30%; }

	.fullWidth .story p{font-size: 1.2em; line-height: 1.5em;}
	.fullWidth .story p.intro{font-size: 1.4em; line-height: 1.7em;}
	.fullWidth .story h3{font-size: 2em;}
	.fullWidth .story h3.tagline{width:60%; margin: 0 auto; font-size: 2.5em;}

	.fullWidth ul.listView {margin:20px auto 0 auto; max-width: 900px; width: 90%; list-style-type: disc; padding-left: 40px;}
	.fullWidth ul.listView li{border-top: none;  padding:8px 0 8px 20px; margin:0; font-family: arial, sans-serif; font-weight: bold; color:#f15a29;}
	.fullWidth ul.listView a li:hover{background-color: #FFF;}
	.fullWidth ul.listView a li{text-decoration: underline;}

	.fullWidth .story .note{font-size: 1em;}
	#footer .note{padding-bottom: 60px;}

	//#footer .note .firstcharacter {font-size: 2em;}
}


/*footer stuff*/

.sharing {
	display: inline-block;
	margin: 0 .5em;
	vertical-align: middle;
}

.toolsTable {
	background-color:#FFF; 
	margin:0; 
	padding:0;
	border-top:5px dotted #999; 
	padding: 20px 0; 
	margin-top:50px
}

table#tools{
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	font-family: Arial, sans-serif;
	border-collapse: collapse;
}

table#tools td{
	border:0;
	border-top: 1px solid #CCC;
	padding:0;
}

table#tools td:nth-child(1){height:40px;}
table#tools td:nth-child(1) a{font-weight: bold; color:#f15a29;}

table#tools td a{
	text-decoration: none;
	margin: 0;
	padding:0;
	width: 90%;
	height:100%;
	padding-left: 20px;
}
table#tools tr{
	cursor: pointer; cursor: hand; 
}
table#tools tr th{
	cursor: default !important; 
}
table#tools tr:hover td {
	background-color: #CCC;
}
table#tools tr:hover td a{
	color: #000;
}
table#tools tr th span{
	display: none;
}

table#tools tr th.metric, table#tools tr td.metric {
	display: none;
}
table#tools tr th.toolName {
	font-weight: bold;
	text-transform: uppercase;
	text-align: left;
	font-family: 'Oswald', Arial, sans-serif;
	font-size: 24px;
	padding-left: 20px
}

table#tools tr td.metric{
	margin:0;
	padding:3px;
	width: 30px;
	height: 20px;
}
table#tools th.metric {height: 30px;}
table#tools td.true{background: url(../img/icon_check.png) center 50% no-repeat;}
table#tools tr:hover td.true {background: url(../img/icon_checkHover.png) center 50% no-repeat !important;}

table#tools th.metric:nth-child(2){background: url(../img/icon_anonymity.png) center top no-repeat;}
table#tools th.metric:nth-child(3){background: url(../img/icon_circumvention.png) center top no-repeat;}
table#tools th.metric:nth-child(4){background: url(../img/icon_portability.png) center top no-repeat;}
table#tools th.metric:nth-child(5){background: url(../img/icon_encryption.png) center top no-repeat;}

@media (min-width:500px) {
	table#tools tr td.metric{width: 50px;}
	table#tools tr th.metric, table#tools tr td.metric {
		display: table-cell;
	}
	table#tools tr:hover td {
		background-color: transparent;
		text-decoration: underline;
	}
}


@media (min-width:700px) {
	table#tools tr th span{
		display: block;
	}
	table#tools tr th.metric, table#tools tr td.metric{padding-left: 10px; padding-right: 10px;}

	table#tools th.metric {height: 50px;vertical-align: bottom; text-transform: uppercase; font-size: 11px;}
}