b{
line-height: 20px;
}

#tutorial{
	margin: 0 auto;
	padding:12px;
}
#wrapper{
	clear:both;
	margin:12px auto 0;
	border:0px solid #000;

	font-family: Arial;
}

/*////////////////*/
#bold-important{
background:#f0f0f0;
color:#c00;
border:1px solid #c00;
padding:1px 12px;
}
#red-font{
color:#e00;
}
q{
	color:#390;
	font-weight:normal;
}
#blue-font{
	color:#00d;
	font-weight:normal;
}
#orange-font{
	color:#ff9900;
	font-weight:normal;
}
#high{
	padding: 2px 12px;
	line-height: 30px;
	background-color:#ddd;
}
#padding{
padding-left:22px;
}

/* ------------  coding box -----------------*/
pre{
	width:100%;
	float:left;
	font-family:Verdana;
	font-size: 11px;
}
#black{
	padding-top:2px;
	float:right;
	width:92%;
	font-weight:normal;
	text-align:left;
	color:#000;
	border:0px solid red;
}
#padding-left{
padding-left:22px;
}
#style-code{
	float:right;
	width:90%;
	margin:12px 20px;
	padding:4px;
	border:1px dotted #999999;
	background:#f0f0f0 url("images/grey_bkg.jpg") repeat-x bottom left;/* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f0f0f0'); /* for IE */
background: -moz-linear-gradient(top,  #fff,  #f0f0f0); /* for firefox 3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f0f0f0)); /* for webkit browsers */
}
#style-numbering{
	float:left;
	width:4%;
	font-weight:bold;
	color:#000;
	padding:2px 2px 0px 10px;
	border-right-width: 1px;
	border-right-style: dotted;
	border-right-color: #aaa;
}
#clear-both{
width:1px;
clear:both;
display:block;
font-weight: bolder;
}
/* ----------------- Coding box end --------------------*/
/* --------------------------- Tutorial ----------------------------*/
.collage-container{
	width: 280px !important;
	height: 320px !important;
	margin: 0 auto;
}
#collage-container{
	height: 500px;
	margin: 30px auto;
	position: relative;
	border: 2px solid #777;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
}
#collage-one,#collage-two,#collage-three,#collage-four,#collage-five,#collage-six,#collage-seven{
	width:168px;
	height:224px;
	padding:10px;
	background:#eee;
	border-radius:20px;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	position:absolute;
}
#collage-one{

transform:rotate(-20deg);
-o-transform:rotate(-20deg);
-moz-transform:rotate(-20deg);
-webkit-transform:rotate(-20deg);
z-index:1;
}
#collage-two{

z-index:2;
transform:rotate(10deg);
-o-transform:rotate(10deg);
-moz-transform:rotate(10deg);
-webkit-transform:rotate(10deg);
}
#collage-three{

transform:rotate(30deg);
-o-transform:rotate(30deg);
-moz-transform:rotate(30deg);
-webkit-transform:rotate(30deg);
z-index:3;
}
#collage-four{

transform:rotate(-40deg);
-o-transform:rotate(-40deg);
-moz-transform:rotate(-40deg);
-webkit-transform:rotate(-40deg);
z-index:4;
}
#collage-five{

transform:rotate(-40deg);
-o-transform:rotate(-43deg);
-moz-transform:rotate(-40deg);
-webkit-transform:rotate(-40deg);
z-index:5;
}
#collage-six{

transform:rotate(-10deg);
-o-transform:rotate(-10deg);
-moz-transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);
z-index:6;
}
#collage-seven{

transform:rotate(30deg);
-o-transform:rotate(30deg);
-moz-transform:rotate(30deg);
-webkit-transform:rotate(30deg);
z-index:7;
}
#collage-one {
    left: 10%;
    top: 12%;

}
#collage-two {
    right: 10%;
    top: 7%;
}
#collage-three {
    left: 27%;
    top: 6%;
}
#collage-four {
    bottom: 6%;
    left: 15%;
}
#collage-five {
    right: 27%;
    top: 3%;
}
#collage-six {
    left: 39%;
    top: 35%;
}
#collage-seven {
    bottom: 7%;
    right: 12%;
}