[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'; margin-bottom: .5em;  }
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;
}

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

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

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

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

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

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

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


/* Colours
*/

body {
		background: #f4eed7;
}

a {
		color: #2f5faa;
		text-decoration: none;
}

a:hover, a:focus {
		color: #0e3878;
}

#section1,
#section3,
#section5,
#faq {	background: #dcdfe5;	}

#section2,
#section4,
#section6,
#footer {	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 > div {
		width: 96%;
		clear: both;
		margin: 0 auto;
		padding: 1em 0;
}

#header h1 {
		line-height: 1;
}

#header h1 a {
		display: block;
}

#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 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;
}

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

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

.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 .highlight h4 {
		color: #5f8dd3;
		margin: .5em 0 0;
		border-bottom: .5em solid #5f8dd3;
}

.main .highlight h4 + p {
		margin: 0 0 .5em;
}


/* Troubleshooting panel
*/

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

.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 {
		border-bottom: 0;
		border-radius: 3px 3px 0 0;
}


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

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

.troubleshooting dl {
		display: none;
		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;
}

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

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

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

.newsletter input[type='text'],
.newsletter input[type='submit'] {
		font-size: .75em;
	  line-height: 1;
		vertical-align: bottom;
}

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

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

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

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

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

/* Footer
*/

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


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

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

}

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

}


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

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

}

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

}

@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.os {
				display: inline-block;
				margin: 0 2em 0 0;
		}

		.nav ul.lang {
				display: inline-block;
				margin: 0 0 0 0.5em;
				float: right;
		}

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

		#header .intro {
				float: left;
				width: 62.5%;
		}

		#header #fsf-intro {
				float: right;
				width: 34.05%;
				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,
		#footer #contribute { /* 3 columns 125px + 20px margins*/
				float: left;
				clear: left;
				width: 34.05%;
		}

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

		.row .sidebar img {
				width: 100%;
		}

}
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';
	103	src: local('Dosis'), url('../fonts/Dosis/Dosis-ExtraLight.ttf') format('truetype');
	104	}
	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
675698a7 AIC	129	h1 { font-size: 2.75em; font-family: 'Dosis'; margin-bottom: .5em; }
	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
92e620c6 AIC	142	.nav .os a.current,
	143	.main .highlight p,
	144	.main p.highlight,
64f08aeb	145	.main dt,
4c6644a3 AIC	146	.troubleshooting dt,
4c6644a3 AIC	147	strong {
675698a7	148	font-family: 'Signika Semmibold';
92e620c6	149	color: #4d4d4d;
4c6644a3 AIC	150	}
4c6644a3 AIC	151
92e620c6 AIC	152	.main > h3 em,
92e620c6 AIC	153	.highlight h4,
be2f695d AIC	154	.troubleshooting h4,
	155	.newsletter input[type='submit'] {
	156	font-family: 'Dosis EBold';
	157	}
	158
92e620c6 AIC	159	.step .main p {
	160	font-size: .85em;
	161	}
	162
4c6644a3	163	.nav,
f72252f5	164	#footer,
be2f695d	165	.troubleshooting h4,
4c6644a3 AIC	166	small {
	167	font-size: 0.75em;
	168	}
	169
f72252f5	170	.troubleshooting dl {
4c6644a3 AIC	171	font-size: 0.85em;
	172	}
	173
be2f695d AIC	174	#header .intro {
	175	font-size: 1.1em;
	176	}
	177
	178	#header #fsf-intro {
	179	font-size: .7em;
f72252f5 AIC	180	}
f72252f5 AIC	181
4c6644a3	182
be2f695d	183
4c6644a3 AIC	184	/* Colours
	185	*/
	186
	187	body {
	188	background: #f4eed7;
	189	}
	190
	191	a {
	192	color: #2f5faa;
	193	text-decoration: none;
	194	}
	195
64f08aeb AIC	196	a:hover, a:focus {
	197	color: #0e3878;
	198	}
	199
f72252f5 AIC	200	#section1,
	201	#section3,
	202	#section5,
	203	#faq { background: #dcdfe5; }
4c6644a3	204
f72252f5 AIC	205	#section2,
	206	#section4,
	207	#section6,
	208	#footer { background: #f4eed7; }
4c6644a3 AIC	209
	210
	211	/* Layout
	212	*/
	213
	214	.row:before, .row:after {
	215	content: " ";
	216	display: table;
	217	}
	218
	219	, :before, *:after {
	220	-moz-box-sizing: border-box;
	221	}
	222
	223	.row:after {
	224	clear: both;
	225	}
	226
	227	.row {
	228	margin: 0;
f72252f5	229	padding: 2em 0;
4c6644a3 AIC	230	}
	231
	232	.row > div {
	233	width: 96%;
	234	margin: 0 auto;
f72252f5	235	padding: .5em 0;
4c6644a3 AIC	236	}
	237
	238	.nav > div {
	239	width: 96%;
	240	margin: 0 auto;
	241	}
	242
	243	.nav li {
	244	text-transform: uppercase;
	245	display: inline-block;
	246	}
	247
	248	.nav li a {
	249	display: block;
	250	padding: .5em;
	251	}
	252
f72252f5	253	#header > div {
4c6644a3 AIC	254	width: 96%;
	255	clear: both;
	256	margin: 0 auto;
	257	padding: 1em 0;
	258	}
	259
be2f695d AIC	260	#header h1 {
	261	line-height: 1;
	262	}
	263
	264	#header h1 a {
4c6644a3 AIC	265	display: block;
	266	}
	267
be2f695d AIC	268	#header > div > .intro p {
be2f695d AIC	269	margin: 0 0 0.75em;
4c6644a3 AIC	270	}
4c6644a3 AIC	271
92e620c6 AIC	272	.section-intro {
	273	padding-bottom: 1.5em;
	274	border-bottom: 1px solid #5f8dd3;
	275	margin-bottom: 2em:
	276	}
	277
	278	.section-intro h2,
	279	.sidebar h2 {
	280	margin: 0 0 .5em;
	281	}
	282
	283	.section-intro h2 {
	284	text-align: center;
	285	}
	286
	287	.section-intro h2 em,
	288	.sidebar h2 em {
	289	color: #94b3e2;
	290	}
	291
	292	.step {
	293	padding: .5em 0;
	294	}
	295
	296	.section-intro p,
4c6644a3 AIC	297	.intro p,
	298	.main p {
	299	margin: 0.5em 0;
	300	}
	301
	302	.main p:first-child { margin: 0 0 0.5em ; }
	303
	304	.main h3 {
	305	margin: 1em 0 0.5em;
92e620c6 AIC	306	padding-left:.5em;
92e620c6 AIC	307	border-left: 8px solid #ff9b12;
4c6644a3 AIC	308	}
	309
	310	.main h3:first-child { margin: 0 0 0.5em; }
	311
f72252f5 AIC	312	.main > h3 em {
f72252f5 AIC	313	color: #94b3e2;
92e620c6	314	display: block;
f72252f5 AIC	315	}
f72252f5 AIC	316
4c6644a3 AIC	317	.main,
	318	.sidebar {
	319	margin: 1em 0 0.5em;
	320	}
	321
92e620c6 AIC	322	.main .highlight h4 {
	323	color: #5f8dd3;
	324	margin: .5em 0 0;
	325	border-bottom: .5em solid #5f8dd3;
4c6644a3 AIC	326	}
4c6644a3 AIC	327
92e620c6 AIC	328	.main .highlight h4 + p {
92e620c6 AIC	329	margin: 0 0 .5em;
4c6644a3 AIC	330	}
4c6644a3 AIC	331
92e620c6	332
bcf35a0d AIC	333	/* Troubleshooting panel
	334	*/
	335
4c6644a3	336	.troubleshooting {
4c6644a3 AIC	337	margin-top: .8em;
	338	}
	339
f72252f5	340	.troubleshooting > h4 {
bcf35a0d AIC	341	display: inline-block;
bcf35a0d AIC	342	cursor: pointer;
f72252f5	343	letter-spacing: 2px;
bcf35a0d	344	padding: .25em .5em;
f72252f5	345	color: #2f5faa;
f72252f5	346	opacity: .5;
bcf35a0d AIC	347	border: 1px solid #5f8dd3;
bcf35a0d AIC	348	border-radius: 3px;
f72252f5 AIC	349	}
f72252f5 AIC	350
bcf35a0d AIC	351	.troubleshooting > h4:hover,
	352	.troubleshooting > h4.expanded {
	353	opacity: 1;
f72252f5 AIC	354	}
f72252f5 AIC	355
bcf35a0d AIC	356	.troubleshooting > h4.expanded {
	357	border-bottom: 0;
	358	border-radius: 3px 3px 0 0;
4c6644a3 AIC	359	}
4c6644a3 AIC	360
bcf35a0d AIC	361
	362	.troubleshooting > h4:after {
	363	content:' ▾';
	364	display: inline-block;
	365	line-height: 1;
	366	padding: 0 0.2em;
	367	vertical-align: top;
	368	}
	369
	370	.troubleshooting > h4.expanded:after {
	371	content:' ▴';
	372	display: inline-block;
	373	line-height: 1;
	374	padding: 0 0.2em;
	375	vertical-align: top;
	376	}
	377
	378	.troubleshooting dl {
	379	display: none;
	380	padding: .5em;
	381	border: 1px solid #5f8dd3;
	382	border-radius: 0 3px 3px;
	383	}
	384
	385	.main dt,
	386	.troubleshooting dt {
	387	margin-top: 1em;
	388	}
	389
	390	.main dt:first-child,
	391	.troubleshooting dt:first-child {
	392	margin-top: 0;
4c6644a3 AIC	393	}
4c6644a3 AIC	394
675698a7 AIC	395	.troubleshooting dt.feedback,
	396	.troubleshooting dd.feedback {
	397	display: inline-block;
	398	}
	399
be2f695d AIC	400	/* FSF Introduction, before the header + Newsletter form
	401	*/
	402
	403	#fsf-intro h3,
	404	#fsf-intro p {
	405	margin-bottom: 1em;
	406	}
	407
	408	.newsletter input {
	409	-webkit-transition: all 0.1s linear;
	410	-moz-transition: all 0.1s linear;
	411	-o-transition: all 0.1s linear;
	412	transition: all 0.1s linear;
	413	}
	414
	415	.newsletter input[type='text'],
	416	.newsletter input[type='submit'] {
	417	font-size: .75em;
	418	line-height: 1;
	419	vertical-align: bottom;
	420	}
	421
	422	.newsletter input[type='text'] {
	423	border: none;
	424	height: 3em;
	425	border-radius: 3px;
	426	border: .1em solid #5f8dd3;
	427	width: 16em;
	428	padding: .2em .65em;
	429	background: #fff;
	430	color: #666;
	431	}
	432
	433	.newsletter input[type='text']:focus,
	434	.newsletter input[type='text']:hover {
	435	border-color: #2f5faa;
	436	outline: none;
	437	color: #333333;
	438	}
	439
	440	.newsletter input[type='submit'] {
	441	border: none;
	442	cursor: pointer;
	443	text-transform: uppercase;
	444	letter-spacing: 2px;
	445	color: #fff;
	446	height: 3.1em;
	447	padding: .5em 1em;
	448	margin-left: 5px;
	449	border-radius: 3px;
	450	background-color: #5f8dd3;
	451	}
	452
	453	.newsletter input[type='submit']:focus,
	454	.newsletter input[type='submit']:hover {
	455	background-color: #2f5faa;
	456	outline: none;
	457	}
	458
675698a7 AIC	459	#fsf-intro .newsletter form + p {
	460	margin: .25em 0 0;
	461	font-size:
	462	}
	463
bcf35a0d AIC	464	/* Footer
	465	*/
	466
675698a7 AIC	467	#footer h4 {
675698a7 AIC	468	margin-bottom: .75em;
bcf35a0d AIC	469	}
bcf35a0d AIC	470
4c6644a3 AIC	471
	472	/* ==========================================================================
	473	Media Queries
	474	========================================================================== */
	475
	476	@media only screen and (min-width: 400px) {
	477
	478	}
	479
	480	@media only screen and (min-width: 400px) and (max-width: 599px) {
	481
	482	}
	483
	484
	485	@media only screen and (min-width: 600px) {
	486
	487	.row > div,
	488	.nav > div,
f72252f5	489	#header > div {
4c6644a3 AIC	490	width: 92%;
	491	margin: 0 auto;
	492	}
	493
	494	}
	495
	496	@media only screen and (min-width: 600px) and (max-width: 899px) {
	497
	498	}
	499
	500	@media only screen and (min-width: 900px) {
	501
	502	.row > div,
	503	.nav > div,
f72252f5	504	#header > div {
4c6644a3 AIC	505	width: 86%;
	506	}
	507
	508	.nav > div {
bcf35a0d	509	overflow: hidden;
4c6644a3	510	position: relative;
be2f695d	511	padding: 0.35em 0 0;
4c6644a3 AIC	512	}
	513
	514	.nav ul.os {
	515	display: inline-block;
	516	margin: 0 2em 0 0;
	517	}
	518
	519	.nav ul.lang {
	520	display: inline-block;
	521	margin: 0 0 0 0.5em;
be2f695d	522	float: right;
4c6644a3 AIC	523	}
4c6644a3 AIC	524
f72252f5	525	#header h1 {
be2f695d	526	font-size: 6em;
4c6644a3 AIC	527	}
4c6644a3 AIC	528
be2f695d AIC	529	#header .intro {
	530	float: left;
	531	width: 62.5%;
4c6644a3 AIC	532	}
4c6644a3 AIC	533
be2f695d AIC	534	#header #fsf-intro {
be2f695d AIC	535	float: right;
4c6644a3	536	width: 34.05%;
be2f695d AIC	537	padding-left: 1.72%;
be2f695d AIC	538	border-left: 8px solid #ff9b12;
4c6644a3 AIC	539	}
4c6644a3 AIC	540
be2f695d AIC	541	.row > div,
	542	#header > div,
	543	.row > div .section-intro,
64f08aeb AIC	544	.row > div .step,
64f08aeb AIC	545	#footer > div {
be2f695d	546	overflow: hidden;
4c6644a3 AIC	547	}
4c6644a3 AIC	548
64f08aeb AIC	549	.row .sidebar,
64f08aeb AIC	550	#footer #contribute { /* 3 columns 125px + 20px margins*/
4c6644a3 AIC	551	float: left;
4c6644a3 AIC	552	clear: left;
be2f695d	553	width: 34.05%;
4c6644a3 AIC	554	}
4c6644a3 AIC	555
64f08aeb AIC	556	.row .main,
64f08aeb AIC	557	#footer #copyright { /* 5 columns 125px + 100px margins*/
4c6644a3	558	float: right;
be2f695d AIC	559	width: 62.5%;
be2f695d AIC	560	margin-left: 1.72%;
4c6644a3 AIC	561	}
	562
	563	.row .sidebar img {
	564	width: 100%;
	565	}
	566
4c6644a3 AIC	567	}
	568
	569