/*
 * mobile3.css
 *
 * Dan Armendariz
 * Computer Science 76
 * Building Mobile Applications
 * Harvard Extension School
 *
 * a simple (but better) CSS layout targeted for mobile platforms.
 *
 */

body, html {
	margin: 0;
	padding: 0;
	background-color: #9999cc;
}

#page {
	margin: 0 auto;
}

#col1 {
	margin: 10px;
	padding: 10px;
	border: 1px solid black;

	-webkit-border-top-left-radius: 8px;
	-webkit-border-top-right-radius: 8px;
	-webkit-border-bottom-left-radius: 8px;
	-webkit-border-bottom-right-radius: 8px;
	background-image: -webkit-gradient(linear, left top, right bottom,from(#ccc),to(#999));
}

#col2 {
	margin: 10px;
	padding: 10px;
	border: 1px solid black;

	-webkit-border-top-left-radius: 8px;
	-webkit-border-top-right-radius: 8px;
	-webkit-border-bottom-left-radius: 8px;
	-webkit-border-bottom-right-radius: 8px;
	background-image: -webkit-gradient(linear, left top, right bottom,from(#999),to(#ccc));
}

#transform {
    width: 100px;
    height: 100px;
    margin: 50px;
    float: clear;
    border: 1px solid black;
	background-image: -webkit-gradient(linear, left top, right bottom,from(#999),to(#ccc));
    -webkit-transform: skew(45deg);
}

#rotate {
    width: 100px;
    height: 100px;
    margin: 50px;
    float: clear;
    border: 1px solid black;
	background-image: -webkit-gradient(linear, left top, right bottom,from(#999),to(#ccc));
    -webkit-transform: rotate(180deg);
}

#multiple {
    width: 100px;
    height: 100px;
    margin: 50px;
    -webkit-transform: skew(30deg) rotate(45deg) scale(1.5,1.5);
	background-image: -webkit-gradient(linear, left top, right bottom,from(#999),to(#ccc));
    border: 1px solid black;
}



@-webkit-keyframes changeme {
	0% {
	    background-color: #999;
		padding: 0;
	}
	100% {
	    background-color: #ccc;
		padding: 0 200px;
	}
}

#change {
    width: 100px;
    height: 100px;
    margin: 50px;
    background-color: #999;
    border: 1px solid black;

}

#change:hover {
    -webkit-animation-name: changeme;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: 2;
	-webkit-animation-direction: alternate;
	-webkit-animation-timing-function: ease-in-out;
}