====== CSS Shorts ======
===== Backgrounds =====
http://www.cssmatic.com/gradient-generator

http://www.colorzilla.com/gradient-editor/

<file>
/*  CSS Document  */

/*  This file was provided as part of a weekly web design tutorial series.
	Sign-up for our newsletter, at http://codifydesign.com, to be notified
	about each new episode of CSS Shorts
*/

/*html{ height: 100%;}*/

body {
	//margin: 0;
	padding-top: 30px;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 14px;
//	background-repeat: no-repeat;
//	background-image: url(media/louvre.jpg);
//	background-position: 50% bottom;
//	background-size: cover;
}

#container {
	width: 90%;
	margin: 0 auto; padding-top: 50%;
	border: 1px solid #ccc;
//	background-color: #0d8bcd;
//	background: linear-gradient(#68c87a,#0d8bcd);
//	background: linear-gradient(to bottom right,#68c87a,#0d8bcd);
//	background: linear-gradient(to bottom right,#68c87a,#0d8bcd 10%);
//	background: repeating-linear-gradient(to bottom right,#68c87a,#0d8bcd 10%);
//	background: radial-gradient(#68c87a,#0d8bcd 70%);
//	background-repeat: no-repeat;
//	background-repeat: repeat;
	background-image: url(media/clovers.jpg);
	background-position: 50% 50%;
	background-position: 50% bottom;
	background-size: 350px 172px;
	background-size: contain;
	background-size: cover;
	background-image: url(media/louvre.jpg);
//	display: none;
  opacity: 0.5;

}

#container p {
	margin: 0; padding: 20px;
	color: #fff;
	background-color: rgba(0,0,0,.6);
}
</file>
===== Positioning =====

Elements flow relative to html.

<file>

posistion: static;
posistion: relative;
posistion: fixed;
posistion: absolute;

Removes natural flow, then looks to elements parent until it finds position properties. If none found, it will position relative to the page.
aside img {
    position: absolute; top: 0px; left: 0px;
}

This will catch the previous absolute position and contain it within the article element.
article{
    ...
    position: relative;
}

Again traps the innermost element into this element.
aside {
    ...
    position: relative;
}

Change the position relative to the new container
aside img {
    position: absolute: top: -10px; left: -12px;
}

Now we alter the stacking order to allow the graphic to move below the text.
aside h3 {
    position: relative:
}
Adjust registration of graphic
aside a {
    ...
    position: absolute;
    bottom: -4px;
    right: -4px;
}

Change position of the whole elelment
aside {
    ...
    top: 65px;
    right: 25px;
}

To prevent the text from flowing underneath, change the padding on the article.
article {
    padding: 15px 260px 25px 25px;
}

Fixed positioning will set the location of the elements to the page so content scrolls underneath it.

aside {
    ...
    position: fixed;
}

@media screen and (max-width: 540px) {
	article {
		padding-right: 25px;
	}
	aside {
		position: relative;
		top: auto;
		right: auto;
	}
	aside a { position: static;}
</file>

===== Floats =====
<file>
...
h2 { font-size: 1.4em; margin: 0 0 .5em 0; clear: left;}
...

/* items to be edited during the tutorial */

figure {
	width: 130px;
	margin: 5px 24px 12px 0px;
	float: left;
}

article {
	margin-bottom: 30px;
	width: 57%;
	float: left;
}

aside {
	margin: 0 0 0px 8%;
	padding-left: 3%;
	border-left: 4px solid rgba(111, 64, 0, 0.3);
	width: 30%;
	float: left;
}



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

	article { width: auto; float: none;}
	aside { width: auto; float: none; margin: 35px 0;}

}
</file>