style_old.css

/*
	Template Name: Daladevelop: Episode IV - A New Hope
	Author: Daladevelop
*/

/*
	We begin with the layout for small screens (phones etc.) and
	then add media queries for less small screens.
	
	First breaking point is above 480px (iPhone in landscape and I
	assume most Android phones as well),
	
	The height (and some width) is done with em. 1 basic em is
	16px. iPhone in portrait (480px height) will get 30 lines.
	Using 1.5 em line-height means 20 lines of text will be
	visible.
*/

/* First, reset everything */

	/* http://meyerweb.com/eric/tools/css/reset/ 
	   v2.0 | 20110126
	   License: none (public domain)
	*/
	
	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,
	time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section {
		display: block;
	}
	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;
	}

/* End of reset. Now start making things pretty */

/*
	Basic colors (derived from the logo
	Dark (instead of black) : rgb (66, 74, 71)
	Light (instead of white) : rgb (249, 248, 247)
	(Use ordinary black and white where appropriate)
*/

body {
	/* Sizes */
	width: 100%;
	font-size: 16px;
	line-height: 1.3em;
	text-align: justify;

	/* Colors */
	background: rgb(249, 248, 247);
}

/* Some basic typography */
	h1, h2, h3, h4, h5, h6 {
		font-weight: bold;
		font-family: 'Lekton';
		text-align: left;
	}
	h1 {
		font-size: 4em;
		line-height: 2em;
	}
	h2 {
		font-size: 3em;
		margin: 0.8em 0 0.8em 0; 
	}
	h3 {
		font-size: 1.5em;
		margin-bottom: 0.5em;
	}
	body {
		font-family: "Times New Roman";
	}
	nav[role=navigation] a {
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-weight: bold;
	}
	strong,b{
		font-weight: bold;
	}

	i,cite{
		font-style: italic; 
	}
/* End of typography */

/*
	
*/
header[role=banner] {
	/* Sizes */
	height: 10em;
	padding: 3em 1em 3em 1em;
	/* Colors */
	background-color: rgb(66, 74, 71);
	background-image: url('pix/logo-vertical.png');
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: 95%;
	color: rgb(249, 248, 247);
	
	-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.8), 2px 2px 8px rgba(0,0,0,0.6);
	-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.8), 2px 2px 8px rgba(0,0,0,0.6);
	box-shadow: 0px 0px 4px rgba(0,0,0,0.8), 2px 2px 8px rgba(0,0,0,0.6);
}

	header[role=banner] h1, header[role=banner] span { /* The logo text */
		display: block;
		font-size: 2em;
		margin-top: 4.75em;
		text-align: center;
		font-weight: bold;
	}
	
	header[role=banner] h1 a, header[role=banner] span a {
		display: block;
		opacity: 0;
	}

/*
	The articles will have some padding to the left
	and right but on these small screens they will
	be full-width
	
	10px padding at 16px per em = 0,625em
	
	Also, it gets a maximum width that has a comfortable
	line-length.
*/
article[role=article] {
	padding: 0.625em;
	max-width: 768px;
	margin: 0 auto;
	font-size: 1.2em;
	line-height: 1.4em;	
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/*
	In its basic apperance, the <aside> will have the
	same positioning as the articles
*/
body > section > aside {
	padding: 2em;
	margin-top: 45px; 
	background-color: #fff;
	box-shadow: 0px 0px 7px #cecece;
	line-height: 1.5em;
}
body > section > aside p, body > section > aside ul, body > section > aside h3 {
	display: block;
	position: relative;
	padding: 0;
	max-width: 768px;
	margin: 0 auto;
	color: rgb(0,0,0);
	text-align: left;
}
body > section > aside a img {
	display: none; 
}
body > section > aside a {
	color: rgb(0,0,0);
	text-decoration: none;
}
body > section > aside li {
	margin-top: 5px; 
}

body > section > aside h3{margin: 0 0 1em 0; }
body > section > aside li:nth-child(even) {background-color:#efefef; padding: 5px;}

body > section > aside li cite:before {content: " av "}
body > section > aside li cite{font-style: italic; ;}
/* Main navigation */
	nav[role=navigation] {
		/*
			This takes the blue color from
			the logo as background color
			with a little bit of a gradient.
			(The commented stuff is the orange color
			instead.)
		*/
		/*background: rgb(253,178,0);
		background: -moz-linear-gradient(top, rgba(253,178,0,1) 0%, rgba(255,29,0,1) 15%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(253,178,0,1)), color-stop(15%,rgba(255,29,0,1)));
		background: -webkit-linear-gradient(top, rgba(253,178,0,1) 0%,rgba(255,29,0,1) 15%);
		background: -o-linear-gradient(top, rgba(253,178,0,1) 0%,rgba(255,29,0,1) 15%);
		background: -ms-linear-gradient(top, rgba(253,178,0,1) 0%,rgba(255,29,0,1) 15%);
		background: linear-gradient(top, rgba(253,178,0,1) 0%,rgba(255,29,0,1) 15%);
*/		
		background: rgb(53,101,255);
		background: -moz-linear-gradient(top, rgba(53,101,255,1) 0%, rgba(48,42,255,1) 15%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(53,101,255,1)), color-stop(15%,rgba(48,42,255,1)));
		background: -webkit-linear-gradient(top, rgba(53,101,255,1) 0%,rgba(48,42,255,1) 15%);
		background: -o-linear-gradient(top, rgba(53,101,255,1) 0%,rgba(48,42,255,1) 15%);
		background: -ms-linear-gradient(top, rgba(53,101,255,1) 0%,rgba(48,42,255,1) 15%);
		background: linear-gradient(top, rgba(53,101,255,1) 0%,rgba(48,42,255,1) 15%);
	
		background-color: #333; 
		width: 240px;
		padding: 10px 0;
		
		position: relative;
		margin: 1em auto;
		
		border-radius: 5px;
		-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.8), 2px 2px 4px rgba(0,0,0,0.6), -4px -4px 5px rgba(0,0,0,0.2);
		-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.8), 2px 2px 4px rgba(0,0,0,0.6), -4px -4px 5px rgba(0,0,0,0.2);
		box-shadow: 0px 0px 4px rgba(0,0,0,0.8), 2px 2px 4px rgba(0,0,0,0.6), -4px -4px 5px rgba(0,0,0,0.2);
	}
	nav[role=navigation] a {
		display: block;
		padding: 0 10px;
		color: rgb(249,248,247);
		text-decoration: none;
		line-height: 1.25em;
	}
	nav[role=navigation] a:hover {
		background: rgba(255,255,255,0.2);
		text-decoration: underline;
	}
/* End of main navigation */



/* Footer */
footer {
	background: rgb(255,29,0);
	background: -moz-linear-gradient(top, rgba(255,29,0,1) 85%, rgba(253,178,0,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(85%,rgba(255,29,0,1)), color-stop(100%,rgba(253,178,0,1)));
	background: -webkit-linear-gradient(top, rgba(255,29,0,1) 85%,rgba(253,178,0,1) 100%);
	background: -o-linear-gradient(top, rgba(255,29,0,1) 85%,rgba(253,178,0,1) 100%);
	background: -ms-linear-gradient(top, rgba(255,29,0,1) 85%,rgba(253,178,0,1) 100%);
	background: linear-gradient(top, rgba(255,29,0,1) 85%,rgba(253,178,0,1) 100%);
	-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.8), 2px 2px 8px rgba(0,0,0,0.6), -4px -4px 10px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.8), 2px 2px 8px rgba(0,0,0,0.6), -4px -4px 10px rgba(0,0,0,0.2);
	box-shadow: 0px 0px 4px rgba(0,0,0,0.8), 2px 2px 8px rgba(0,0,0,0.6), -4px -4px 10px rgba(0,0,0,0.2);


	/*
		The footer should have a smaller font, 10px.
		With a basic em of 16px that means 0,625em.
	*/
	font-size: 0.625em;
	line-height: 1.5em;
	height: 2em;
}

footer p {
	max-width: 768px;
	position: relative;
	padding: 1em;
	margin: 0 auto;
}



/* Time for media queries */
@media all and (min-width: 481px) {
	
	/*
		Put the header and navigation together.
	*/
		header[role=banner] {
			-webkit-box-shadow: none;
			-moz-box-shadow: none;
			box-shadow: none;
		}
		nav[role=navigation] {
			margin: 0 0 1em 0;
			border-radius: 0px;
			width: 100%;
			padding: 0;
			text-align: center;
		}
		/*
			Line up the menu items next to each other
		*/
			nav[role=navigation] ul {
				display: -webkit-box;
				display: -moz-box;
				display: box;
				
				max-width: 768px;
				margin: 0 auto;
			}
			nav[role=navigation] ul li {
				-webkit-box-orient: horizontal;
				-webkit-box-flex: 1;
				
				-moz-box-orient: horizontal;
				-moz-box-flex: 1;
				
				box-orient: horizontal;
				box-flex: 1;
			}
			nav[role=navigation] ul li a {
				text-align: center;
				padding: 10px;
			}
			
			/*
				If the browser doesn't support Flexbox
			*/
			.no-flexbox nav[role=navigation] ul {
				display: block;
				max-width: 1000px;
				width: 1000px;
				height: 2em;
				text-align: center;
				position: relative;
				margin: 0 auto;
			}
			.no-flexbox nav[role=navigation] ul li {
				width: 200px;
				float: left;
				height: 2em;
			}
			.no-flexbox nav[role=navigation] ul li a {
				line-height: 2em;
			}
	/*
		Navigation fixed
	*/
	
	
	/*
		Change to a different logo
	*/
		header[role=banner] {
			background-position: 16px 16px;
			height: 8em;
			
			background-image: url('pix/logo-horizontal.png');
			background-position: 50% 2em;
			background-repeat: no-repeat;
			background-size: auto;
			color: rgb(249, 248, 247);
		}
		header[role=banner] h1, header[role=banner] span { /* The logo text */
		/*margin-top: 1em;
		margin-left: 6em;
		text-align: center;
		font-weight: bold;
		height: 105px;
		width: 308px;
		
		background-image: url('pix/daladevelop-vertical-white.png');
		background-repeat: none;
		background-position: 0px 0px;
		background-size: 308px 105px;*/
	}
	/*
		Logo fixed
	*/
	
	
	footer {
		position: fixed;
		bottom: 0px;
		width: 100%;
	}
}


/*
	For displays that is at least 960px wide, use the 960.gs Grid and
	position the <aside> to the side of the main content
*/
@media all and (min-width: 960px) {
	nav[role=navigation] ul {
		width: 980px;
		max-width: none;
	}
	section {
		width: 1000px;
		margin: 0 auto;
		
		position: relative;
	}

	section p{margin-bottom: 0.8em; }
	article[role=article] {
		width: 620px;
		margin: 0;
	}
	body > section > aside {
		width: 300px;
		margin: 8.5em 0 0 0;
		
		position: absolute;
		right: -30px;
		top: 35px;
		
	}
	
}