[enc-static.git] / css / main.css

/* Eric Meyer's Reset CSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, main,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
img,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* Typography
*/


@font-face {
	  font-family: 'Dosis';
	  src: local('Dosis'), url('../fonts/Dosis/Dosis-ExtraLight.ttf') format('truetype');
}

@font-face {
	  font-family: 'Dosis EBold';
	  src: local('Dosis EBold'), url('../fonts/Dosis/Dosis-ExtraBold.ttf') format('truetype');
}


@font-face {
	  font-family: 'Signika Light';
	  src: local('Signika Light'), url('../fonts/Signika/Signika-Light.ttf') format('truetype');
}

@font-face {
	  font-family: 'Signika Semmibold';
	  src: local('Signika Semmibold'), url('../fonts/Signika/Signika-Semibold.ttf') format('truetype');
}


body {
		font-family: 'Signika Light', 'DejaVu Sans', Arial, sans-serif;
		font-size: 1.25em;
		line-height: 1.4;
}

h1 {  font-size: 2.75em;  font-family: 'Dosis'; }
h2 {  font-size: 2.75em;  font-family: 'Dosis';	}
h3 {  font-size: 1.625em; font-family: 'Dosis';	}
h4 {  font-size: 1.375em; font-family: 'Dosis EBold'; color: #4d4d4d;	}
h5 {  font-size: 1.25em;  font-family: 'Dosis EBold'; color: #4d4d4d; }
h6 {  font-size: 1.125em; font-family: 'Dosis EBold'; color: #4d4d4d; }

h1, h2, h3, h4, h5, h6 {
		line-height: 1.2;
		text-transform: uppercase;
		letter-spacing: 1px;
}

ul.os a.current,
.main dt,
.troubleshooting dt,
strong {
		font-family: 'Signika Semmibold';
		color: #4d4d4d;
}

.main > h3 em,
.troubleshooting h4,
input[type='submit'],
input[type='reset'] {
		font-family: 'Dosis EBold';
}

.step .main p,
.step .main ul {
		font-size: .85em;
}

.nav,
#footer,
.troubleshooting h4,
small {
		font-size: 0.75em;
}

.troubleshooting dl {
		font-size: 0.85em;
}

#header #fsf-intro {
	font-size: .7em;
}


/* Colours
*/

body {
		background: #f4eed7;
}

a,
a > img + strong {
		color: #2f5faa;
		text-decoration: none;
}

a:hover, a:focus,
a:hover > img + strong,
a:focus > img + strong {
		color: #0e3878;
}

/* Guide Sections Background */
/* Blue*/
#section1,
#section3,
#section5,
#footer {	background: #dcdfe5;	}


/* Yellow */
#section2,
#section4,
#section6 {	background: #f4eed7; }


/* Layout
*/

.row:before, .row:after  {
    content: " ";
    display: table;
}

*, *:before, *:after {
    -moz-box-sizing: border-box;
}

.row:after {
    clear: both;
}

.row {
		margin: 0;
		padding: 2em 0;
}

.row > div {
		width: 96%;
		margin: 0 auto;
		padding: .5em 0;
}

.nav > div {
		width: 96%;
		margin: 0 auto;
}

.nav li {
		text-transform: uppercase;
		display: inline-block;
}

.nav li a {
		display: block;
		padding: .5em;
}

/* Header
*/

#header > div {
		width: 96%;
		clear: both;
		margin: 0 auto;
		padding: 0 0 1em;
}

#header h1 {
		line-height: 1;
}

#header ul.os {
		line-height: 1;
		margin: .5em 0 2em;
		padding: 0 0 .25em;
		border-bottom: 1px solid #94b3e2;
}

#header ul.os li {
		text-transform: uppercase;
		display: inline-block;
}

#header ul.os li a {
		display: block;
		padding: .25em;
}

#header ul.os .spacer {
		padding: .25em 0 .25em 4em;
}

#header #infographic {
		float: left;
		display: block;
		background: #fff;
		border-radius: 3px;
		margin: 0 1em .5em 0;
		padding: .5em;
		width: 250px;
}


#header #infographic img {
		display: inline-block;
		width: 100%;
}

#header > div > .intro p {
		margin: 0 0 0.75em;
}

.section-intro {
		padding-bottom: 1.5em;
		border-bottom: 1px solid #5f8dd3;
		margin-bottom: 2em;
}

.section-intro  p {
		margin: 0.5em 3.5em;
}

.section-intro h2,
.sidebar h2 {
		margin: 0 0 .5em;
}

.section-intro h2 {
		text-align: center;
}

.section-intro h2 em,
.sidebar h2 em {
		color: #94b3e2;
}

.step {
		padding: .5em 0;
}

.intro p,
.main p {
		margin: 0.5em 0;
}

	.main p:first-child {	margin: 0 0 0.5em ;	}

.main p.notes {
		color: #999;
}

.main h3 {
		margin: 1em 0 0.5em;
		padding-left:.5em;
		border-left: 8px solid #ff9b12;
}

.main h3:first-child { margin: 0 0 0.5em; }

.main > h3 em {
		color: #94b3e2;
		display: block;
}

.main,
.sidebar  {
		margin: 1em 0 0.5em;
}

.main ul li {
		margin: .5em 0;
}

/* Images
*/

ul.images:before, ul.images:after  {
    content: " ";
    display: table;
}

ul.images:after {
    clear: both;
}

ul.images {
		padding: 0.5em 0;
}

ul.images li {
		margin-bottom: 1em;
}

ul.images li > img {
		width: 100%;
		max-width: 600px;
		height: auto;
}

.sidebar > p > img {
		width: 100%;
		max-width: 600px;
		height: auto;
}

/* Troubleshooting panel and dropdown */

.troubleshooting {
    margin-top: .8em;
}

.dropdown > h4 {
    font-size: .85em;
    width: 140px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    letter-spacing: 2px;
    padding: .25em .5em;
    color: #2f5faa;
    border: 1px solid #5f8dd3;
    border-radius: 3px;
}

.troubleshooting > h4 {
    display: inline-block;
    cursor: pointer;
    letter-spacing: 2px;
    padding: .25em .5em;
    color: #2f5faa;
    opacity: .5;
    border: 1px solid #5f8dd3;
    border-radius: 3px;
}

.troubleshooting > h4:hover,
.troubleshooting > h4.expanded {
    opacity: 1;
}

.troubleshooting > h4.expanded,
.dropdown > h4.expanded {
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
}

.troubleshooting > h4:after,
.dropdown > h4:after {
    content:' ▾';
    display: inline-block;
    line-height: 1;
    padding: 0 0.2em;
    vertical-align: top;
}

.troubleshooting > h4.expanded:after,
.dropdown > h4.expanded:after {
    content:' ▴';
    display: inline-block;
    line-height: 1;
    padding: 0 0.2em;
    vertical-align: top;
}

.troubleshooting dl,
.dropdown ul {
    padding: .5em;
    border: 1px solid #5f8dd3;
    border-radius: 0 3px 3px;
}

.main dt,
.troubleshooting dt {
    margin-top: 1em;
}

.main dt:first-child,
.troubleshooting dt:first-child {
		margin-top: 0;
}

.troubleshooting dt.feedback,
.troubleshooting dd.feedback {
		display: inline-block;
}

.dropdown ul {
    position: absolute;
    width: 140px;
    text-align: center;
    background: #f4eed7;
}

/* Form elements: newsletter + pgp pathfinder
*/

input {
  -webkit-transition: all 0.1s linear;
  -moz-transition: all 0.1s linear;
  -o-transition: all 0.1s linear;
  transition: all 0.1s linear;
}

input[type='text'],
input[type='submit'],
input[type='reset'] {
	  line-height: 1;
		vertical-align: bottom;
}

input[type='text'] {
		border: none;
		border-radius: 3px;
		border: .1em solid #5f8dd3;
		padding: .2em .65em;
		background: #fff;
		color: #666;
}

input[type='text']:focus,
input[type='text']:hover {
		border-color: #2f5faa;
		outline: none;
		color: #333333;
}

input[type='submit'],
input[type='reset'] {
		border: none;
		cursor: pointer;
		text-transform: uppercase;
		letter-spacing: 2px;
		color: #fff;
		padding: .5em 1em;
		border-radius: 3px;
		background-color: #5f8dd3;
}

input[type='submit']:focus,
input[type='submit']:hover,
input[type='reset']:focus,
input[type='reset']:hover {
		background-color: #2f5faa;
		outline: none;
}

/* FSF Introduction, before the header +  Newsletter form
*/

#fsf-intro h3,
#fsf-intro p {
		margin-bottom: 1em;
}

#fsf-intro h3 a {
		display: block;
		max-width: 283px;
}

#fsf-intro h3 img {
		width: 100%;
}

.newsletter input[type='text'],
.newsletter input[type='submit']  {
		font-size: .75em;
}

.newsletter input[type='text'] {
		height: 3em;
		width: 16em;
		padding: .2em .65em;
		margin-bottom: .5em;
}

.newsletter input[type='submit'] {
		height: 3.1em;
		padding: .5em 1em;
		margin-left: 5px;
		background-color: #5f8dd3;
		margin-bottom: .5em;
}

#fsf-intro .newsletter form + p {
		margin: .25em 0 0;
}

/* PGP pathfinder
*/

#pgp-pathfinder {
		background: #fff;
		border: 1px solid #94b3e2;
		border-radius: 3px;
}

#pgp-pathfinder form {
		margin: 1em;
}

#pgp-pathfinder strong {
		display: inline-block;
		width: 4em;
}

#pgp-pathfinder input {
		font-size: .75em;
}

#pgp-pathfinder input[type='text'] {
		height: 3em;
		width: 22em;
		padding: .2em .65em;
}

#pgp-pathfinder input[type='submit'],
#pgp-pathfinder input[type='reset'] {
		padding: .5em 1em;
		margin-left: 5px;
		background-color: #5f8dd3;
}

#pgp-pathfinder .buttons {
		margin-left: 4em;
}

/* Footer
*/

#footer h4 {
		margin-bottom: .75em;
}

#footer .credits {
		border-top: 1px solid #94b3e2;
		margin-top: 1em;
		padding-top: .5em;
}

#footer #copyright p {
	margin-bottom: .5em;
}

/* Infographics page
*/

.centered > * {
		text-align: center;
}

.centered h3 {
		border-bottom: 1px solid #94b3e2;
		margin: .65em 0;
		padding: 0 0 .65em;
}

.centered p {
		margin: .65em 0;
}


/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 400px) {

}

@media only screen and (min-width: 400px) and (max-width: 599px) {

		.row > div,
		.nav > div,
		#header > div {
				width: 92%;
				margin: 0 auto;
		}

		#header ul.os .share {
				display: block;
				padding: .25em 0;
		}

		#header #fsf-intro {
				margin-bottom: 1em;
				padding-bottom: 1em;
				border-bottom: 1px solid #ff9b12;
		}

		.section-intro p {
				margin: 0.5em 0;
		}

}


@media only screen and (min-width: 600px) {}

@media only screen and (min-width: 600px) and (max-width: 899px) {

		#header .intro {
				float: right;
				width: 100%;
		}

		#header #fsf-intro {
				float: left;
				width: 100%;
				padding-left: 0;
				border-left: 0;
				margin-bottom: 1em;
				padding-bottom: 1em;
				border-bottom: 1px solid #ff9b12;
		}

}

@media only screen and (min-width: 900px) {

		.row > div,
		.nav > div,
		#header > div {
				width: 86%;
		}

		.nav > div {
			overflow: hidden;
			position: relative;
			padding: 0.35em 0 0;
		}

		.nav ul.lang {
				margin: 0 0 0 0.5em;
		}

		#header h1 {
				font-size: 6em;
				text-align: center;
		}

		#header ul.os {
				text-align: center;
		}

		#header .intro {
				float: left;
				width: 66%;
				margin-right: 1.72%;
		}

		#header #fsf-intro {
				float: right;
				width: 29.52%;
				padding-left: 1.72%;
				border-left: 8px solid #ff9b12;
		}

		.row > div,
		#header > div,
		.row > div .section-intro,
		.row > div .step,
		#footer > div {
				overflow: hidden;
		}

		.row .sidebar { /* 3 columns 125px + 20px margins*/
				float: left;
				clear: left;
				width: 34.05%;
		}

		.row .main { /* 5 columns 125px + 100px margins*/
				float: right;
				width: 62.5%;
				margin-left: 1.72%;
		}

		.sidebar ul.images li {
				display: inline-block;
				float: left;
				width: 47%;
				margin: 0 3% 1em 0;
		}

		.sidebar ul.images li:nth-child(n) {
				margin: 0 0 0 3%;
		}

		.sidebar ul.images li:nth-child(2n+1) {
				clear: left;
				margin: 0 3% 1em 0;
		}

		.sidebar ul.images li > img {
				width: 100%;
				height: auto;
		}

		.row .sidebar > p > img {
				width: 80%;
				height: auto;
		}


}
Commit	Line	Data
4c6644a3 AIC	1	/* Eric Meyer's Reset CSS */
	2	html, body, div, span, applet, object, iframe,
	3	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	4	a, abbr, acronym, address, big, cite, code,
	5	del, dfn, em, img, ins, kbd, q, s, samp,
	6	small, strike, strong, sub, sup, tt, var,
	7	b, u, i, center,
	8	dl, dt, dd, ol, ul, li,
	9	fieldset, form, label, legend,
	10	table, caption, tbody, tfoot, thead, tr, th, td,
	11	article, aside, canvas, details, embed,
	12	figure, figcaption, footer, header, hgroup,
	13	menu, nav, output, ruby, section, summary, main,
	14	time, mark, audio, video {
	15	margin: 0;
	16	padding: 0;
	17	border: 0;
	18	font-size: 100%;
	19	font: inherit;
	20	vertical-align: baseline;
	21	}
	22
	23	body {
	24	line-height: 1;
	25	}
	26
	27	ol, ul {
	28	list-style: none;
	29	}
	30
	31	blockquote, q {
	32	quotes: none;
	33	}
	34
	35	blockquote:before, blockquote:after,
	36	q:before, q:after {
	37	content: '';
	38	content: none;
	39	}
	40
	41	table {
	42	border-collapse: collapse;
	43	border-spacing: 0;
	44	}
	45
	46	/! HTML5 Boilerplate v4.3.0 \| MIT License \| http://h5bp.com/ /
	47
	48	html,
	49	button,
	50	input,
	51	select,
	52	textarea {
	53	color: #222;
	54	}
	55
	56	html {
	57	font-size: 1em;
	58	line-height: 1.4;
	59	}
	60
	61	::-moz-selection {
	62	background: #b3d4fc;
	63	text-shadow: none;
	64	}
65
4c6644a3 AIC	66	hr {
	67	display: block;
	68	height: 1px;
	69	border: 0;
	70	border-top: 1px solid #ccc;
	71	margin: 1em 0;
	72	padding: 0;
	73	}
	74
	75	audio,
	76	canvas,
	77	img,
	78	video {
	79	vertical-align: middle;
	80	}
	81
	82	fieldset {
	83	border: 0;
	84	margin: 0;
	85	padding: 0;
	86	}
	87
	88	textarea {
	89	resize: vertical;
	90	}
	91
	92
	93	/* ==========================================================================
	94	Author's custom styles
	95	========================================================================== */
	96
	97	/* Typography
	98	*/
	99
	100
	101	@font-face {
	102	font-family: 'Dosis';
427d60b2	103	src: local('Dosis'), url('../fonts/Dosis/Dosis-ExtraLight.ttf') format('truetype');
4c6644a3 AIC	104	}
4c6644a3 AIC	105
be2f695d AIC	106	@font-face {
be2f695d AIC	107	font-family: 'Dosis EBold';
cc009e35	108	src: local('Dosis EBold'), url('../fonts/Dosis/Dosis-ExtraBold.ttf') format('truetype');
be2f695d AIC	109	}
	110
	111
4c6644a3 AIC	112	@font-face {
	113	font-family: 'Signika Light';
	114	src: local('Signika Light'), url('../fonts/Signika/Signika-Light.ttf') format('truetype');
	115	}
	116
	117	@font-face {
675698a7 AIC	118	font-family: 'Signika Semmibold';
675698a7 AIC	119	src: local('Signika Semmibold'), url('../fonts/Signika/Signika-Semibold.ttf') format('truetype');
4c6644a3 AIC	120	}
	121
	122
	123	body {
92e620c6	124	font-family: 'Signika Light', 'DejaVu Sans', Arial, sans-serif;
4c6644a3 AIC	125	font-size: 1.25em;
	126	line-height: 1.4;
	127	}
	128
b3272715	129	h1 { font-size: 2.75em; font-family: 'Dosis'; }
675698a7 AIC	130	h2 { font-size: 2.75em; font-family: 'Dosis'; }
	131	h3 { font-size: 1.625em; font-family: 'Dosis'; }
	132	h4 { font-size: 1.375em; font-family: 'Dosis EBold'; color: #4d4d4d; }
	133	h5 { font-size: 1.25em; font-family: 'Dosis EBold'; color: #4d4d4d; }
	134	h6 { font-size: 1.125em; font-family: 'Dosis EBold'; color: #4d4d4d; }
	135
	136	h1, h2, h3, h4, h5, h6 {
	137	line-height: 1.2;
	138	text-transform: uppercase;
	139	letter-spacing: 1px;
	140	}
4c6644a3	141
b3272715	142	ul.os a.current,
64f08aeb	143	.main dt,
4c6644a3 AIC	144	.troubleshooting dt,
4c6644a3 AIC	145	strong {
675698a7	146	font-family: 'Signika Semmibold';
92e620c6	147	color: #4d4d4d;
4c6644a3 AIC	148	}
4c6644a3 AIC	149
92e620c6	150	.main > h3 em,
be2f695d	151	.troubleshooting h4,
bfb2dd77 AIC	152	input[type='submit'],
bfb2dd77 AIC	153	input[type='reset'] {
be2f695d AIC	154	font-family: 'Dosis EBold';
	155	}
	156
03ce4423 AIC	157	.step .main p,
03ce4423 AIC	158	.step .main ul {
92e620c6 AIC	159	font-size: .85em;
	160	}
	161
4c6644a3	162	.nav,
f72252f5	163	#footer,
be2f695d	164	.troubleshooting h4,
4c6644a3 AIC	165	small {
	166	font-size: 0.75em;
	167	}
	168
f72252f5	169	.troubleshooting dl {
4c6644a3 AIC	170	font-size: 0.85em;
	171	}
	172
be2f695d AIC	173	#header #fsf-intro {
be2f695d AIC	174	font-size: .7em;
f72252f5 AIC	175	}
f72252f5 AIC	176
4c6644a3	177
be2f695d	178
4c6644a3 AIC	179	/* Colours
	180	*/
	181
	182	body {
	183	background: #f4eed7;
	184	}
	185
bfb2dd77 AIC	186	a,
bfb2dd77 AIC	187	a > img + strong {
4c6644a3 AIC	188	color: #2f5faa;
	189	text-decoration: none;
	190	}
	191
bfb2dd77 AIC	192	a:hover, a:focus,
	193	a:hover > img + strong,
	194	a:focus > img + strong {
64f08aeb AIC	195	color: #0e3878;
	196	}
	197
03ce4423 AIC	198	/* Guide Sections Background */
03ce4423 AIC	199	/* Blue*/
f72252f5 AIC	200	#section1,
	201	#section3,
	202	#section5,
6e72d71f	203	#footer { background: #dcdfe5; }
4c6644a3	204
03ce4423 AIC	205
03ce4423 AIC	206	/* Yellow */
f72252f5 AIC	207	#section2,
f72252f5 AIC	208	#section4,
6e72d71f	209	#section6 { background: #f4eed7; }
4c6644a3 AIC	210
	211
	212	/* Layout
	213	*/
	214
	215	.row:before, .row:after {
	216	content: " ";
	217	display: table;
	218	}
	219
	220	, :before, *:after {
	221	-moz-box-sizing: border-box;
	222	}
	223
	224	.row:after {
	225	clear: both;
	226	}
	227
	228	.row {
	229	margin: 0;
f72252f5	230	padding: 2em 0;
4c6644a3 AIC	231	}
	232
	233	.row > div {
	234	width: 96%;
	235	margin: 0 auto;
f72252f5	236	padding: .5em 0;
4c6644a3 AIC	237	}
	238
	239	.nav > div {
	240	width: 96%;
	241	margin: 0 auto;
	242	}
	243
	244	.nav li {
	245	text-transform: uppercase;
	246	display: inline-block;
	247	}
	248
	249	.nav li a {
	250	display: block;
	251	padding: .5em;
	252	}
	253
bfb2dd77 AIC	254	/* Header
	255	*/
	256
f72252f5	257	#header > div {
4c6644a3 AIC	258	width: 96%;
	259	clear: both;
	260	margin: 0 auto;
cdbd9b92	261	padding: 0 0 1em;
4c6644a3 AIC	262	}
4c6644a3 AIC	263
be2f695d AIC	264	#header h1 {
	265	line-height: 1;
	266	}
	267
b3272715 AIC	268	#header ul.os {
	269	line-height: 1;
	270	margin: .5em 0 2em;
	271	padding: 0 0 .25em;
	272	border-bottom: 1px solid #94b3e2;
	273	}
	274
	275	#header ul.os li {
	276	text-transform: uppercase;
	277	display: inline-block;
	278	}
	279
	280	#header ul.os li a {
	281	display: block;
	282	padding: .25em;
	283	}
	284
e2732ce8	285	#header ul.os .spacer {
92f9b7d8 AIC	286	padding: .25em 0 .25em 4em;
	287	}
	288
bfb2dd77	289	#header #infographic {
55e415f1 AIC	290	float: left;
55e415f1 AIC	291	display: block;
bfb2dd77 AIC	292	background: #fff;
bfb2dd77 AIC	293	border-radius: 3px;
55e415f1 AIC	294	margin: 0 1em .5em 0;
	295	padding: .5em;
	296	width: 250px;
bfb2dd77 AIC	297	}
bfb2dd77 AIC	298
bfb2dd77	299
bfb2dd77	300	#header #infographic img {
55e415f1	301	display: inline-block;
bfb2dd77 AIC	302	width: 100%;
	303	}
	304
be2f695d AIC	305	#header > div > .intro p {
be2f695d AIC	306	margin: 0 0 0.75em;
4c6644a3 AIC	307	}
4c6644a3 AIC	308
92e620c6 AIC	309	.section-intro {
	310	padding-bottom: 1.5em;
	311	border-bottom: 1px solid #5f8dd3;
cdbd9b92	312	margin-bottom: 2em;
92e620c6 AIC	313	}
92e620c6 AIC	314
e5958174 AIC	315	.section-intro p {
	316	margin: 0.5em 3.5em;
	317	}
	318
92e620c6 AIC	319	.section-intro h2,
	320	.sidebar h2 {
	321	margin: 0 0 .5em;
	322	}
	323
	324	.section-intro h2 {
	325	text-align: center;
	326	}
	327
	328	.section-intro h2 em,
	329	.sidebar h2 em {
	330	color: #94b3e2;
	331	}
	332
	333	.step {
	334	padding: .5em 0;
	335	}
	336
4c6644a3 AIC	337	.intro p,
	338	.main p {
	339	margin: 0.5em 0;
	340	}
	341
	342	.main p:first-child { margin: 0 0 0.5em ; }
	343
8e57104a	344	.main p.notes {
b98adc79	345	color: #999;
8e57104a AIC	346	}
8e57104a AIC	347
4c6644a3 AIC	348	.main h3 {
4c6644a3 AIC	349	margin: 1em 0 0.5em;
92e620c6 AIC	350	padding-left:.5em;
92e620c6 AIC	351	border-left: 8px solid #ff9b12;
4c6644a3 AIC	352	}
	353
	354	.main h3:first-child { margin: 0 0 0.5em; }
	355
f72252f5 AIC	356	.main > h3 em {
f72252f5 AIC	357	color: #94b3e2;
92e620c6	358	display: block;
f72252f5 AIC	359	}
f72252f5 AIC	360
4c6644a3 AIC	361	.main,
	362	.sidebar {
	363	margin: 1em 0 0.5em;
	364	}
	365
03ce4423 AIC	366	.main ul li {
03ce4423 AIC	367	margin: .5em 0;
4c6644a3 AIC	368	}
4c6644a3 AIC	369
e8ebaf04	370	/* Images
03ce4423 AIC	371	*/
03ce4423 AIC	372
e8ebaf04	373	ul.images:before, ul.images:after {
03ce4423 AIC	374	content: " ";
	375	display: table;
	376	}
	377
e8ebaf04	378	ul.images:after {
03ce4423 AIC	379	clear: both;
	380	}
	381
e8ebaf04	382	ul.images {
03ce4423 AIC	383	padding: 0.5em 0;
	384	}
	385
e8ebaf04 AIC	386	ul.images li {
	387	margin-bottom: 1em;
	388	}
	389
	390	ul.images li > img {
	391	width: 100%;
	392	max-width: 600px;
	393	height: auto;
	394	}
	395
	396	.sidebar > p > img {
	397	width: 100%;
	398	max-width: 600px;
	399	height: auto;
	400	}
	401
e2732ce8	402	/* Troubleshooting panel and dropdown */
bcf35a0d	403
4c6644a3	404	.troubleshooting {
e2732ce8	405	margin-top: .8em;
4c6644a3 AIC	406	}
4c6644a3 AIC	407
e2732ce8 DT	408	.dropdown > h4 {
	409	font-size: .85em;
	410	width: 140px;
	411	text-align: center;
0e9fe97e DT	412	display: inline-block;
	413	cursor: pointer;
	414	letter-spacing: 2px;
	415	padding: .25em .5em;
	416	color: #2f5faa;
	417	border: 1px solid #5f8dd3;
	418	border-radius: 3px;
f72252f5 AIC	419	}
f72252f5 AIC	420
0e9fe97e	421	.troubleshooting > h4 {
e2732ce8 DT	422	display: inline-block;
	423	cursor: pointer;
	424	letter-spacing: 2px;
	425	padding: .25em .5em;
	426	color: #2f5faa;
	427	opacity: .5;
	428	border: 1px solid #5f8dd3;
	429	border-radius: 3px;
f72252f5 AIC	430	}
f72252f5 AIC	431
e2732ce8	432	.troubleshooting > h4:hover,
0e9fe97e	433	.troubleshooting > h4.expanded {
e2732ce8	434	opacity: 1;
4c6644a3 AIC	435	}
4c6644a3 AIC	436
e2732ce8 DT	437	.troubleshooting > h4.expanded,
	438	.dropdown > h4.expanded {
	439	border-bottom: 0;
	440	border-radius: 3px 3px 0 0;
	441	}
bcf35a0d	442
e2732ce8 DT	443	.troubleshooting > h4:after,
	444	.dropdown > h4:after {
	445	content:' ▾';
	446	display: inline-block;
bcf35a0d	447	line-height: 1;
e2732ce8	448	padding: 0 0.2em;
bcf35a0d AIC	449	vertical-align: top;
	450	}
	451
e2732ce8 DT	452	.troubleshooting > h4.expanded:after,
	453	.dropdown > h4.expanded:after {
	454	content:' ▴';
	455	display: inline-block;
bcf35a0d	456	line-height: 1;
e2732ce8	457	padding: 0 0.2em;
bcf35a0d AIC	458	vertical-align: top;
	459	}
	460
e2732ce8 DT	461	.troubleshooting dl,
	462	.dropdown ul {
	463	padding: .5em;
	464	border: 1px solid #5f8dd3;
	465	border-radius: 0 3px 3px;
bcf35a0d AIC	466	}
	467
	468	.main dt,
	469	.troubleshooting dt {
e2732ce8	470	margin-top: 1em;
bcf35a0d AIC	471	}
	472
	473	.main dt:first-child,
	474	.troubleshooting dt:first-child {
	475	margin-top: 0;
4c6644a3 AIC	476	}
4c6644a3 AIC	477
675698a7 AIC	478	.troubleshooting dt.feedback,
	479	.troubleshooting dd.feedback {
	480	display: inline-block;
	481	}
	482
e2732ce8 DT	483	.dropdown ul {
	484	position: absolute;
	485	width: 140px;
	486	text-align: center;
	487	background: #f4eed7;
	488	}
	489
bfb2dd77	490	/* Form elements: newsletter + pgp pathfinder
be2f695d AIC	491	*/
be2f695d AIC	492
bfb2dd77	493	input {
be2f695d AIC	494	-webkit-transition: all 0.1s linear;
	495	-moz-transition: all 0.1s linear;
	496	-o-transition: all 0.1s linear;
	497	transition: all 0.1s linear;
	498	}
	499
bfb2dd77 AIC	500	input[type='text'],
	501	input[type='submit'],
	502	input[type='reset'] {
be2f695d AIC	503	line-height: 1;
	504	vertical-align: bottom;
	505	}
	506
bfb2dd77	507	input[type='text'] {
be2f695d	508	border: none;
be2f695d AIC	509	border-radius: 3px;
be2f695d AIC	510	border: .1em solid #5f8dd3;
be2f695d AIC	511	padding: .2em .65em;
	512	background: #fff;
	513	color: #666;
	514	}
	515
bfb2dd77 AIC	516	input[type='text']:focus,
bfb2dd77 AIC	517	input[type='text']:hover {
be2f695d AIC	518	border-color: #2f5faa;
	519	outline: none;
	520	color: #333333;
	521	}
	522
bfb2dd77 AIC	523	input[type='submit'],
bfb2dd77 AIC	524	input[type='reset'] {
be2f695d AIC	525	border: none;
	526	cursor: pointer;
	527	text-transform: uppercase;
	528	letter-spacing: 2px;
	529	color: #fff;
be2f695d	530	padding: .5em 1em;
be2f695d AIC	531	border-radius: 3px;
	532	background-color: #5f8dd3;
	533	}
	534
bfb2dd77 AIC	535	input[type='submit']:focus,
	536	input[type='submit']:hover,
	537	input[type='reset']:focus,
	538	input[type='reset']:hover {
be2f695d AIC	539	background-color: #2f5faa;
	540	outline: none;
	541	}
	542
bfb2dd77 AIC	543	/* FSF Introduction, before the header + Newsletter form
	544	*/
	545
	546	#fsf-intro h3,
	547	#fsf-intro p {
	548	margin-bottom: 1em;
	549	}
	550
bde9d0e2 AIC	551	#fsf-intro h3 a {
	552	display: block;
	553	max-width: 283px;
	554	}
	555
	556	#fsf-intro h3 img {
	557	width: 100%;
	558	}
	559
bfb2dd77 AIC	560	.newsletter input[type='text'],
	561	.newsletter input[type='submit'] {
	562	font-size: .75em;
	563	}
	564
	565	.newsletter input[type='text'] {
	566	height: 3em;
	567	width: 16em;
	568	padding: .2em .65em;
bde9d0e2	569	margin-bottom: .5em;
bfb2dd77 AIC	570	}
	571
	572	.newsletter input[type='submit'] {
	573	height: 3.1em;
	574	padding: .5em 1em;
	575	margin-left: 5px;
	576	background-color: #5f8dd3;
bde9d0e2	577	margin-bottom: .5em;
bfb2dd77 AIC	578	}
bfb2dd77 AIC	579
675698a7 AIC	580	#fsf-intro .newsletter form + p {
675698a7 AIC	581	margin: .25em 0 0;
675698a7 AIC	582	}
675698a7 AIC	583
bfb2dd77 AIC	584	/* PGP pathfinder
	585	*/
	586
	587	#pgp-pathfinder {
	588	background: #fff;
	589	border: 1px solid #94b3e2;
	590	border-radius: 3px;
	591	}
	592
	593	#pgp-pathfinder form {
	594	margin: 1em;
	595	}
	596
	597	#pgp-pathfinder strong {
	598	display: inline-block;
	599	width: 4em;
	600	}
	601
	602	#pgp-pathfinder input {
	603	font-size: .75em;
	604	}
	605
	606	#pgp-pathfinder input[type='text'] {
	607	height: 3em;
	608	width: 22em;
	609	padding: .2em .65em;
	610	}
	611
	612	#pgp-pathfinder input[type='submit'],
	613	#pgp-pathfinder input[type='reset'] {
	614	padding: .5em 1em;
	615	margin-left: 5px;
	616	background-color: #5f8dd3;
	617	}
	618
	619	#pgp-pathfinder .buttons {
	620	margin-left: 4em;
	621	}
	622
bcf35a0d AIC	623	/* Footer
	624	*/
	625
675698a7 AIC	626	#footer h4 {
675698a7 AIC	627	margin-bottom: .75em;
bcf35a0d AIC	628	}
bcf35a0d AIC	629
ee7b6d56 AIC	630	#footer .credits {
	631	border-top: 1px solid #94b3e2;
	632	margin-top: 1em;
	633	padding-top: .5em;
	634	}
	635
c2a4fede AIC	636	#footer #copyright p {
	637	margin-bottom: .5em;
	638	}
	639
	640	/* Infographics page
	641	*/
	642
	643	.centered > * {
	644	text-align: center;
	645	}
	646
	647	.centered h3 {
	648	border-bottom: 1px solid #94b3e2;
	649	margin: .65em 0;
	650	padding: 0 0 .65em;
	651	}
	652
8e57104a	653	.centered p {
c2a4fede AIC	654	margin: .65em 0;
	655	}
	656
	657
4c6644a3 AIC	658
	659	/* ==========================================================================
	660	Media Queries
	661	========================================================================== */
	662
	663	@media only screen and (min-width: 400px) {
	664
4c6644a3 AIC	665	}
4c6644a3 AIC	666
bfb2dd77	667	@media only screen and (min-width: 400px) and (max-width: 599px) {
4c6644a3 AIC	668
	669	.row > div,
	670	.nav > div,
f72252f5	671	#header > div {
4c6644a3 AIC	672	width: 92%;
	673	margin: 0 auto;
	674	}
	675
649767ee AIC	676	#header ul.os .share {
	677	display: block;
	678	padding: .25em 0;
	679	}
	680
9510ea2c AIC	681	#header #fsf-intro {
	682	margin-bottom: 1em;
	683	padding-bottom: 1em;
	684	border-bottom: 1px solid #ff9b12;
	685	}
	686
bfb2dd77 AIC	687	.section-intro p {
	688	margin: 0.5em 0;
	689	}
	690
4c6644a3 AIC	691	}
4c6644a3 AIC	692
bfb2dd77 AIC	693
	694	@media only screen and (min-width: 600px) {}
	695
4c6644a3 AIC	696	@media only screen and (min-width: 600px) and (max-width: 899px) {
4c6644a3 AIC	697
bfb2dd77 AIC	698	#header .intro {
	699	float: right;
	700	width: 100%;
bfb2dd77 AIC	701	}
	702
	703	#header #fsf-intro {
	704	float: left;
	705	width: 100%;
bde9d0e2 AIC	706	padding-left: 0;
bde9d0e2 AIC	707	border-left: 0;
649767ee AIC	708	margin-bottom: 1em;
	709	padding-bottom: 1em;
	710	border-bottom: 1px solid #ff9b12;
bfb2dd77 AIC	711	}
bfb2dd77 AIC	712
4c6644a3 AIC	713	}
	714
	715	@media only screen and (min-width: 900px) {
	716
	717	.row > div,
	718	.nav > div,
f72252f5	719	#header > div {
4c6644a3 AIC	720	width: 86%;
	721	}
	722
	723	.nav > div {
bcf35a0d	724	overflow: hidden;
4c6644a3	725	position: relative;
be2f695d	726	padding: 0.35em 0 0;
4c6644a3 AIC	727	}
4c6644a3 AIC	728
4c6644a3	729	.nav ul.lang {
4c6644a3 AIC	730	margin: 0 0 0 0.5em;
	731	}
	732
f72252f5	733	#header h1 {
be2f695d	734	font-size: 6em;
b3272715 AIC	735	text-align: center;
	736	}
	737
	738	#header ul.os {
	739	text-align: center;
4c6644a3 AIC	740	}
4c6644a3 AIC	741
be2f695d AIC	742	#header .intro {
be2f695d AIC	743	float: left;
55e415f1	744	width: 66%;
bfb2dd77	745	margin-right: 1.72%;
4c6644a3 AIC	746	}
4c6644a3 AIC	747
be2f695d AIC	748	#header #fsf-intro {
be2f695d AIC	749	float: right;
bfb2dd77	750	width: 29.52%;
be2f695d AIC	751	padding-left: 1.72%;
be2f695d AIC	752	border-left: 8px solid #ff9b12;
4c6644a3 AIC	753	}
4c6644a3 AIC	754
be2f695d AIC	755	.row > div,
	756	#header > div,
	757	.row > div .section-intro,
64f08aeb AIC	758	.row > div .step,
64f08aeb AIC	759	#footer > div {
be2f695d	760	overflow: hidden;
4c6644a3 AIC	761	}
4c6644a3 AIC	762
03ce4423	763	.row .sidebar { /* 3 columns 125px + 20px margins*/
4c6644a3 AIC	764	float: left;
4c6644a3 AIC	765	clear: left;
be2f695d	766	width: 34.05%;
4c6644a3 AIC	767	}
4c6644a3 AIC	768
03ce4423	769	.row .main { /* 5 columns 125px + 100px margins*/
4c6644a3	770	float: right;
be2f695d AIC	771	width: 62.5%;
be2f695d AIC	772	margin-left: 1.72%;
4c6644a3 AIC	773	}
4c6644a3 AIC	774
9510ea2c AIC	775	.sidebar ul.images li {
	776	display: inline-block;
	777	float: left;
	778	width: 47%;
cdbd9b92	779	margin: 0 3% 1em 0;
9510ea2c AIC	780	}
9510ea2c AIC	781
b3272715	782	.sidebar ul.images li:nth-child(n) {
cdbd9b92	783	margin: 0 0 0 3%;
b3272715 AIC	784	}
	785
	786	.sidebar ul.images li:nth-child(2n+1) {
cdbd9b92 AIC	787	clear: left;
cdbd9b92 AIC	788	margin: 0 3% 1em 0;
b3272715 AIC	789	}
	790
	791	.sidebar ul.images li > img {
	792	width: 100%;
	793	height: auto;
	794	}
	795
	796	.row .sidebar > p > img {
9510ea2c AIC	797	width: 80%;
9510ea2c AIC	798	height: auto;
4c6644a3 AIC	799	}
4c6644a3 AIC	800
4c6644a3 AIC	801
4c6644a3 AIC	802
e2732ce8	803	}