@charset "utf-8";

p.padding1 {
 border: 2px dotted red;
 padding: 10px;
 display: inline-block;
}

p.padding2 {
 border: 2px dotted red;
 padding: 10px 20px 30px 40px;
 display: inline-block;
}

div.margin1 {
 border: 2px dotted blue;
 width: 200px;
 margin: 10px 30px;
}

div.margin2 {
 border: 2px dotted blue;
 width: 200px;
 margin: 0 auto;
}



div.w100-h100 {
 border: solid 1px;
 width: 100px;
 height: 100px;
 margin-bottom: 10px;
}

div.w200-h200 {
 border: solid 1px;
 width: 200px;
 height: 200px;
}

div.bg-sample {
 background-image:url(../img/background-image-sample.jpg);
 width: 150px;
 height: 150px;
}

div.test1 {
 width: 200px;
 height: 200px;
 border: solid 1px #cccccc;
 background-image: -webkit-linear-gradient(red,blue);
 background-image: linear-gradient(red,blue);
 color: #ffffff;
}

div.test2 {
 width: 200px;
 height: 200px;
 border: solid 1px #cccccc;
 background-image: -webkit-linear-gradient(red,yellow,blue);
 background-image: linear-gradient(red,yellow,blue);
 color: #ffffff;
}

div.test3 {
 width: 200px;
 height: 200px;
 border: solid 1px #cccccc;
 background-image: -webkit-linear-gradient(red 80%, blue);
 background-image: linear-gradient(red 80%, blue);
 color: #ffffff;
}

div.test4 {
 width: 200px;
 height: 200px;
 border: solid 1px #cccccc;
 background-image: -webkit-linear-gradient(left top,red,blue);
 background-image: linear-gradient(to bottom right,red,blue);
 color: #ffffff;
}

div.test5 {
 width: 200px;
 height: 200px;
 border: solid 1px #cccccc;
 background-image: -webkit-radial-gradient(red,blue);
 background-image: radial-gradient(red,blue);
 color: #ffffff;
}




div.box1 {
 width:100px;
 height:100px;
 background-color: #00ff00;
 margin:0px;
 padding:0px;
}

div.box2 {
 width:100px;
 height:100px;
 background-color: #ffff00;
 margin:0px;
 padding:0px;
}

div.box3 {
 width:100px;
 height:100px;
 background-color: #ff0000;
}

div.box4 {
 width:100px;
 height:100px;
 background-color: #00ff00;
 float: right;
}

div.box5 {
 width:100px;
 height:100px;
 background-color: #ffff00;
 float: right;
}

div.box6 {
 width:100px;
 height:100px;
 background-color: #ff0000;
 float: right;
}

div.box7 {
 width:100px;
 height:100px;
 background-color: #00ff00;
 float: left;
}

div.box8 {
 width:100px;
 height:100px;
 background-color: #ffff00;
 float: left;
}

div.box9 {
 width:100px;
 height:100px;
 background-color: #ff0000;
 float: left;
}

div.box0 {height: 100px;}






div.sample1 {
 box-shadow: 10px 10px #ccc;
 -moz-box-shadow: 10px 10px #ccc;
 -webkit-box-shadow: 10px 10px #ccc;
 -o-box-shadow: 10px 10px #ccc;
 width: 400px;
 border: solid 1px #ccc;
 margin-bottom: 20px;
 padding: 10px;
}

div.sample2 {
 box-shadow: 10px 10px 10px #ccc;
 -moz-box-shadow: 10px 10px 10px #ccc;
 -webkit-box-shadow: 10px 10px 10px #ccc;
 -o-box-shadow: 10px 10px 10px #ccc;
 width: 400px;
 border: solid 1px #ccc;
 margin-bottom: 20px;
 padding: 10px;
}

div.sample3 {
 box-shadow: inset 5px 5px 5px #ccc;
 -moz-box-shadow: inset 5px 5px 5px #ccc;
 -webkit-box-shadow: inset 5px 5px 5px #ccc;
 -o-box-shadow: inset 5px 5px 5px #ccc;
 width: 400px;
 border: solid 1px #ccc;
 margin-bottom: 20px;
 padding: 10px;
}

div.sample4 {
 box-shadow: 0 0 5px 3px #ff9900;
 -moz-box-shadow: 0 0 5px 3px #ff9900;
 -webkit-box-shadow: 0 0 5px 3px #ff9900;
 -o-box-shadow: 0 0 5px 3px #ff9900;
 width: 400px;
 border: none;
 margin-bottom: 20px;
 padding: 10px;
}

div.sample1 p {
 margin: 0;
 font-size: 18px;
}

div.sample2 p {
 margin: 0;
 font-size: 18px;
}

div.sample3 p {
 margin: 0;
 font-size: 18px;
}

div.sample4 p {
 margin: 0;
 font-size: 18px;
}





div.bg-img {
 background-image:url(../img/bg-sample.jpg);
 padding: 10px;
}

div.bg-rgba {
 background-color:rgba(255,255,255,0.8);
 width: 200px;
 height: 200px;
 margin: auto;
 text-align: center;
}

div.bg-rgba p {margin: 0;}