#exarea{
	border:2px dashed #086CA2;
	background-color:white;
	font-family:Verdana;
	font-size:25px;


}
p{
word-wrap: break-word;
}
* {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);	
}
div{
word-wrap: break-word;
}

#orangespan{color:#FF8B00;}
#bluespan{color:#086CA2;}
#bluespan2{color:#3989B5;}
#redspan{color:red;}
#greenspan{color:green;}
#blackspan{color:black;}
#cyanspan{color:cyan;}

#code{
	color:#E6E6E6;
	font-family:Verdana;
	font-size:25px;
}
.comment{
color:#308A00;
}
#background{
	background-color:#000000;
	
} 

#title{
	color:#FF8B00;
	font-family:Verdana;
	font-size:40px;
	text-align:center;
	
}

#titlecode{
	color:#FF8B00;
	font-family:Verdana;
	font-size:40px;
	margin:auto 0;

}

#center{
text-align:center;
}
#bk{text-decoration:none;color:#E6E6E6;width:150px; display:inline-block;}

#back{
	height:50px;
	width:150px;
	background-color:#086CA2;
	font-family:Verdana;
	line-height:50px;
	font-size:30px;
	text-align:center;
	border-radius:10px;
}

#redbox{
width:170px;
height:50px;
background-color:red;
}

#cssblue{
color:blue;
}

.div17{
	height:50px;
	display: inline-block;
	background-color:#086CA2;
	width:120px;
	border-radius:10px;
	font-family:Verdana;
	line-height:50px;
	font-size:30px;
	text-align:center;
	margin-top:10px;
	
	
}

.div18{
	height:50px;
	display: inline-block;
	background-color:#F88B00;
	width:120px;
	border-radius:10px;
	font-family:Verdana;
	line-height:50px;
	font-size:30px;
	text-align:center;
	margin-top:10px;
	
}

.nodec{
	text-decoration:none;
	color:white;

	
}

#table1{
	color:#FFFFFF;
	margin:auto;
	text-align:center;
}

/*********************** Background *******************************/ 
/**background-color**/
#div4{
width:150px;
height:75px;
background-color:red;
}
#div5{
width:150px;
height:75px;
background-color:#FF8B00;
}
#div6{
width:150px;
height:75px;
background-color:rgb(48,138,0);
}

/**background-image**/
#div7{
width:150px;
height:75px;
background-image:url('../Res/bgimage.png');
border:2px solid black;
}
#div8{
width:150px;
height:75px;
background-image:url('../Res/bgimage.png');
background-repeat:no-repeat;
border:2px solid black;
}

/**background-repeat**/
#div16{
width:150px;
height:75px;
background-image:url('../Res/bgimage.png');
border:2px solid black;
background-repeat:repeat;
}
#div17{
width:150px;
height:75px;
background-image:url('../Res/bgimage.png');
border:2px solid black;
background-repeat:repeat-x;
}
#div18{
width:150px;
height:75px;
background-image:url('../Res/bgimage.png');
border:2px solid black;
background-repeat:repeat-y;
}
#div19{
width:150px;
height:75px;
background-image:url('../Res/bgimage.png');
background-repeat:no-repeat;
border:2px solid black;
}

/**background-attachment**/
.body1{
background-image:url('../Res/bgimage2.png');
background-repeat:no-repeat;
background-position:right top;
background-attachment:scroll;

}
#divscroll{
width:300px;
height:1050px;
background-color:green;
}
/**background-position**/
#div12{
width:150px;
height:75px;
background-image:url('../Res/bgimage.png');
background-repeat:no-repeat;
border:2px solid black;
background-position:left center;
}

#div13{
width:150px;
height:75px;
background-image:url('../Res/bgimage.png');
background-repeat:no-repeat;
border:2px solid black;
background-position:center center;
}

#div14{
width:150px;
height:75px;
background-image:url('../Res/bgimage.png');
background-repeat:no-repeat;
border:2px solid black;
background-position:bottom right;
}

#div15{
width:150px;
height:75px;
background-image:url('../Res/bgimage.png');
background-repeat:no-repeat;
border:2px solid black;
background-position:35% 80%;
}
#div1{
width:250px;
height:75px;
border:7px dotted black;
text-align:center;
background-color:red;
padding:10px;
background-clip:border-box;
}
#div2{
width:250px;
height:75px;
border:7px dotted black;
text-align:center;
background-color:red;
padding:10px;
background-clip:padding-box;

}
#div3{
width:250px;
height:75px;
border:7px dotted black;
text-align:center;
background-color:red;
padding:10px;
background-clip:content-box;

}

#div9{
width:250px;
height:75px;
border:7px dotted black;
background-image:url('../Res/bgimage2.png');
background-repeat:no-repeat;
text-align:center;
padding:10px;
background-origin:border-box;
}
#div10{
width:250px;
height:75px;
border:7px dotted black;
background-image:url('../Res/bgimage2.png');
background-repeat:no-repeat;
text-align:center;
padding:10px;
background-origin:padding-box;

}
#div11{
width:250px;
height:75px;
border:7px dotted black;
background-image:url('../Res/bgimage2.png');
background-repeat:no-repeat;
text-align:center;
padding:10px;
background-origin:content-box;

}

#div20{
width:250px;
height:75px;
border:7px dotted black;
background-image:url('../Res/bgimage2.png');
background-repeat:no-repeat;
text-align:center;
background-size:auto;
}

#div21{
width:250px;
height:75px;
border:7px dotted black;
background-image:url('../Res/bgimage2.png');
background-repeat:no-repeat;
text-align:center;
background-size:200px 50px;
}

#div22{
width:250px;
height:75px;
border:7px dotted black;
background-image:url('../Res/bgimage2.png');
background-repeat:no-repeat;
text-align:center;
background-size:50% 50%;
}

#div23{
width:250px;
height:75px;
border:7px dotted black;
background-image:url('../Res/bgimage2.png');
background-repeat:no-repeat;
text-align:center;
background-size:cover;
}
#div24{
width:250px;
height:80px;
border:7px dotted black;
background-image:url('../Res/bgimage2.png');
background-repeat:no-repeat;
text-align:center;
background-size:contain;
}
/***********************BORDER******************************/

/*border style*/
#div26{
width:250px;
height:70px;
text-align:center;
border-width:5px;
border-color:black;
border-style:none;
}
#div27{
width:250px;
height:70px;
text-align:center;
border-width:5px;
border-color:black;
border-style:solid;
}
#div28{
width:250px;
height:70px;
text-align:center;
border-width:5px;
border-color:black;
border-style:dotted;
}
#div29{
width:250px;
height:70px;
text-align:center;
border-width:5px;
border-color:black;
border-style:dashed;
}
#div30{
width:250px;
height:70px;
text-align:center;
border-width:5px;
border-color:black;
border-style:inset;
}
#div31{
width:250px;
height:70px;
text-align:center;
border-width:5px;
border-color:black;
border-style:outset;
}

#div32{
width:250px;
height:70px;
text-align:center;
border-width:5px;
border-color:black;
border-style:ridge;
}

#div33{
width:250px;
height:70px;
text-align:center;
border-width:2px;
border-color:black;
border-style:groove;
}
#div34{
width:250px;
height:70px;
text-align:center;
border-width:5px;
border-color:black;
border-style:double;
}

#div35{
width:250px;
height:70px;
text-align:center;
border-width:5px;
border-color:black;
border-style:hidden;
}

#div36{
width:250px;
height:70px;
text-align:center;
border-width:5px;
border-color:black;
border-style:inherit;
}

/*border color*/
#div37{
width:250px;
height:70px;
text-align:center;
border-width:5px;
border-style:solid;
border-color:transparent;
}
#div38{
width:250px;
height:70px;
text-align:center;
border-width:5px;
border-style:solid;
border-color:inherit;
}
#div39{
width:250px;
height:70px;
text-align:center;
border-width:5px;
border-style:solid;
border-color:red;
}
#div40{
width:250px;
height:70px;
text-align:center;
border-width:5px;
border-style:solid;
border-color:blue green;
}
#div41{
width:250px;
height:70px;
text-align:center;
border-width:5px;
border-style:solid;
border-color:#FF8B00;
}
/*Top and bottom are blue, sides are green.*/

/*border collapse*/
#table42{
border-collapse:separate;
}
#table43{
border-collapse:collapse;
}

/* border bottom */
#div44{
width:250px;
height:70px;
text-align:center;
border-width:2px;
border-bottom-width:15px;
border-style:solid;
}
#div45{
width:250px;
height:70px;
text-align:center;
border-width:2px;
border-style:solid;
border-bottom-style:dashed;
}
#div46{
width:250px;
height:70px;
text-align:center;
border-width:2px;
border-style:solid;
border-bottom-color:red;
}
#div47{
width:250px;
height:70px;
text-align:center;
border-width:2px;
border-style:solid;
border-bottom:5px dashed blue;
}
/* border top */
#div48{
width:250px;
height:70px;
text-align:center;
border-width:2px;
border-top-width:12px;
border-style:solid;
}
#div49{
width:250px;
height:70px;
text-align:center;
border-width:3px;
border-style:solid;
border-top-style:dotted;
}
#div50{
width:250px;
height:70px;
text-align:center;
border-width:2px;
border-style:solid;
border-top-color:green;
}
#div51{
width:250px;
height:70px;
text-align:center;
border-width:2px;
border-style:solid;
border-top: 5px solid red;
}

/* border left */
#div52{
width:250px;
height:70px;
text-align:center;
border-width:2px;
border-style:solid;
border-left-width:17px;
}
#div53{
width:250px;
height:70px;
text-align:center;
border-width:3px;
border-style:solid;
border-left-style:dotted;
}
#div54{
width:250px;
height:70px;
text-align:center;
border-width:2px;
border-style:solid;
border-left-color:orange;
}
#div55{
width:250px;
height:70px;
text-align:center;
border-width:2px;
border-style:solid;
border-left: 15px dashed purple;
}

/* border right */
#div56{
width:250px;
height:70px;
text-align:center;
border-width:2px;
border-style:solid;
border-right-width:17px;
}
#div57{
width:250px;
height:70px;
text-align:center;
border-width:3px;
border-style:solid;
border-right-style:dotted;
}
#div58{
width:250px;
height:70px;
text-align:center;
border-width:2px;
border-style:solid;
border-right-color:orange;
}
#div59{
width:250px;
height:70px;
text-align:center;
border-width:2px;
border-style:solid;
border-right: 15px dashed purple;
}

/* border radius */
#div60{
width:250px;
height:70px;
text-align:center;
border:2px solid black;
border-radius:5px;
}
#div61{
width:250px;
height:70px;
text-align:center;
border:2px solid black;
border-radius:50%;
}
#div62{
width:250px;
height:70px;
text-align:center;
border:2px solid black;
border-radius:7%;
}
#div63{
width:250px;
height:70px;
text-align:center;
border:2px solid black;
border-radius:1em;
border-top-right-radius:2px;
}
#div64{
width:250px;
height:70px;
text-align:center;
border:2px solid black;
border-top-right-radius:10px;
border-bottom-left-radius:15px;
}

/* border width*/
#div65{
width:250px;
height:70px;
text-align:center;
border:solid black;
border-width:thin;
}
#div66{
width:250px;
height:70px;
text-align:center;
border:solid black;
border-width:medium;
}
#div67{
width:250px;
height:70px;
text-align:center;
border:solid black;
border-width:thick;
}
#div68{
width:250px;
height:70px;
text-align:center;
border:solid black;
border-width:inherit;
}
#div69{
width:250px;
height:70px;
text-align:center;
border:solid black;
border-width:7px;
}

/*Syntax*/
#div70{
width:250px;
height:70px;
text-align:center;
border:solid black;
border-width:7px;
}
/*
#div71{
width:250px;
height:70px;
text-align:center;
border:solid black;
border-width:7px;
}
*/

.allcss{
outline: 2px dashed blue
}
.link{
	color:white;
	text-decoration:none;
	border-bottom:2px solid #086CA2
}
 /* Selectors */
 
 /* id */
 #div72{
width:250px;
height:70px;
text-align:center;
border: 2px dashed black;
border-width:7px;
}

/* class */
.div73{
width:250px;
height:75px;
border:2px dashed red;
}

/* Descendant */

#div74  p{
color:red;
}
/* child */
#div76 > p{
color:blue;
}
#div77{
/* this does nothing but is used as an example */
}
/* siblings */
/* adjacent */
#h78 + p{
color:red;
}
/* general */
#h79 ~ p{
color:green;
}

/* attributes */
 p[id="para80"]{
color:red;
}
p[id*="a81"]{
color:blue;
}
p[id^="Xp"]{
color:green;
}
p[id$="83"]{
color:orange;
}
p[id~="spaces"]{
color:yellow;
}
p[id|="para85"]{
color:purple;
}


/* pseudo class */
/* active */
#div87{
width:300px;
height:200px;
background-color:red;
}
#div87:active{
background-color:blue;
}

/* focus */
#area88{
border:2px solid red;
width:100%;
}
#area88:focus{
background-color:green;
}

/* visited */
#secretlink:visited{
color:red;
}

/* hover */
#secretlink2:hover{
background-color:yellow;
}

/* link */
#secretlink3:link{
background-color:red;
}
#secretlink3:visited{
background-color:green;
}

/* disabled */
.form89:disabled{
background:red;
}

/* enabled */
.form90:enabled{
background:green;
}
.form90:checked{
background:green;
}

/* selection */
/*
::selection{
background:red;
}
::-moz-selection{
background:red;
}
.div91::-moz-selection{
background:green;
}
.div91::selection{
background:green;
}
/*

/* lang */
p:lang(es){
color:red;
}

/* nthchild */
/*
p:nth-child(2){
color:red;
}
*/
#div92{
/* USED IN NTH-CHILD */
}

/* nth-last-child */
/*
p:nth-last-child(2){
color:red;
}
*/
#div93{
/* USED IN NTH-LAST-CHILD */
}

/* first child */
/*
p:first-child{
color:red;
}
*/
#div94{
/* USED IN FIRST-CHILD */
}

/* last child */
/*
p:last-child{
color:green;
}
*/
#div95{
/* USED IN LAST-CHILD */
}

/* only child */
/*
p:only-child{
color:blue;
}
*/
#div96{}
#div97{}
/* div96 and 97 are used in ONLY-CHILD */

/* nth by type */
#div98{}
/* used in NTH-BY-TYPE */
/*
p:nth-of-type(2){
color:red;
}
*/

/* nth last by type */
#div99{}
/* used in NTH-LAST-BY-TYPE */
/*
p:nth-last-of-type(2){
color:red;
}
*/

/* last of type */
#div100{}
/* used in LAST-OF-TYPE */
/*
p:last-of-type{
color:orange;
}
*/
/* first of type */
#div101{}
/* USED IN FIRST OF TYPE */
/*
p:first-of-type{
color:green;
}
*/
/* only of type */
#div102{}
#div103{}
/*
p:only-of-type{
color:red;
}
*/

/* empty */


#div104{
width:150px;
height:75px;
background-color:red;
}
#div105{}

/* root */
/*
:root{
background-color:red;
}
*/
#div106{}

/* not (x) */
/*
:not(p){
color:green;
}
*/
/*
#div107{}
:target{
background-color:red;
}
*/


/******** FONTS *********/
/* Font family */
#div108{
font-family:Verdana,Serif;
}
#div109{
font-family:"Times New Roman",Arial,Serif;
}
#div110{
font-family:Inherit;
}
/* font size */
#div111{
font-size:120%;
}
#div112{
font-size:20px;
}
#div113{
font-size:x-small;
}
#div114{
font-size:larger;
}
#div115{
font-size:Inherit;
}

/* font style */
#div116{
font-style:normal;
}
#div117{
font-style:italic;
}
#div118{
font-style:oblique;
}
#div119{
font-style:inherit;
}

/* font-variant */
#div120{
font-variant:small-caps;
}

/* font-weight */
#p121{
font-weight:Normal;
}
#p122{
font-weight:Bold;
}
#p123{
font-weight:Bolder;
}
#p124{
font-weight:Lighter;
}
#p125{
font-weight:500;
}

/* font general */
#p126{
font: 50px Arial;
}
#p127{
font:italic 25px Verdana;
}
#p128{
font:30px Verdana;
color:red;
}

/* background */
#div129{
width:250px;
height:100px;
border:5px dotted black;
background:url('../Res/bgimage.png') no-repeat ;
}

/* border */
#div130{
width:250px;
height:100px;
border:5px solid blue;
}

/* clear */
#img132{
float:right;
}

#p131{
clear:right;
}

/* display */
#p132{
display:none;
background-color:red;
}
#p133{
display:inline;
background-color:red;
}
#p134{
display:block;
background-color:red;
}
#p135{
display:inline-block;
background-color:red;
}
#p136{
display:list-item;
background-color:red;
}

/* float */
#img137{
float:left;
}

/* height */
#div138{
height:150px;
width:200px;
background-color:red;
}
#div139{
height:300px;
width:200px;
background-color:green;
}
#div140{
height:60%;
width:150px;
background-color:blue;
color:orange;
}

/* max height */
#div141{
max-height:100px;
overflow:auto;
}
/* min height */
#div142{
min-height:100px;
background-color:orange;
}

/* width */
#div143{
height:100px;
width:150px;
background-color:red;
}
#div144{
height:150px;
width:200px;
background-color:green;
}
#div145{
height:auto;
width:75%;
background-color:blue;
color:orange;
}

/* min width */
#div146{
height:100px;
min-width:250px;
background-color:cyan;
}

/* max width */
#div147{
height:auto;
max-width:45px;
background-color: yellow;
}

/* margin */
#div148{
height:75px;
width:150px;
background-color:green;
border:2px solid black;
margin:5px;
}
#div149{
height:75px;
width:150px;
background-color:orange;
border:2px solid black;
margin:20px 5px 10px 30px;
}

/* margin bottom */
#div150{
height:75px;
width:150px;
background-color:green;
border:2px solid black;
margin-bottom:5%;
}
#div151{
height:75px;
width:150px;
background-color:red;
border:2px solid black;
margin-bottom:50px;
}

/* margin left */
#div152{
height:75px;
width:150px;
background-color:green;
border:2px solid black;
display:inline-block;
margin-left:5%;
}
#div153{
height:75px;
width:150px;
background-color:red;
border:2px solid black;
display:inline-block;
margin-left:10px;
}

/* margin right */
#div154{
height:75px;
width:150px;
background-color:green;
border:2px solid black;
display:inline-block;
float:right;
margin-right:10%;

}
#div155{
height:75px;
width:150px;
background-color:red;
border:2px solid black;
display:inline-block;
float:right;
margin-right:10px;
}

/* margin top */

#div156{
height:75px;
width:150px;
background-color:blue;
border:2px solid black;
margin-top:7%;
}
#div157{
height:75px;
width:150px;
background-color:cyan;
border:2px solid black;
margin-top:26px;
}

/* padding */
#div158{
height:75px;
width:200px;
text-align:center;
line-height:75px;
border:2px solid black;
}

#div159{
height:75px;
width:200px;
text-align:center;
line-height:75px;
border:2px solid black;
padding:20px;
}

/* padding left */
#div160{
height:75px;
width:200px;
text-align:center;
line-height:75px;
border:2px solid black;
}

#div161{
height:75px;
width:200px;
text-align:center;
line-height:75px;
border:2px solid black;
padding-left:20px;
}

/* padding right */
#div162{
height:75px;
width:200px;
text-align:center;
line-height:75px;
border:2px solid black;
}

#div163{
height:75px;
width:200px;
text-align:center;
line-height:75px;
border:2px solid black;
padding-right:50px;
}

/* padding top */
#div164{
height:75px;
width:200px;
text-align:center;
line-height:75px;
border:2px solid black;
}

#div165{
height:75px;
width:200px;
text-align:center;
line-height:75px;
border:2px solid black;
padding-top:40px;
}
/* padding bottom */
#div166{
height:75px;
width:200px;
text-align:center;
line-height:75px;
border:2px solid black;
}

#div167{
height:75px;
width:200px;
text-align:center;
line-height:75px;
border:2px solid black;
padding-bottom:35px;
}

/* overflow */

#div168{
height:100px;
width:100px;
border:3px dashed red;
overflow:hidden;
color:orange;
}
#div169{
height:100px;
width:290px;
border:3px dashed red;
overflow:scroll;
color:orange;
}
#div170{
height:100px;
width:290px;
border:3px dashed red;
overflow:auto;
color:orange;
}
#div171{
height:100px;
width:200px;
border:3px dashed red;
overflow:visible;
color:orange;
}

/* overflow-x */
.para172{
width:200px;
}
#div173{
height:150px;
width:150px;
border:2px solid black;
overflow-y:auto;
overflow-x:hidden;
}

#div174{
height:150px;
width:150px;
border:2px solid black;
overflow-y:auto;
overflow-x:scroll;
}

#div175{
height:150px;
width:150px;
border:2px solid black;
overflow-y:auto;
overflow-x:visible;
}
/* overflow y */
#div176{
height:150px;
width:150px;
border:2px solid black;
overflow-x:auto;
overflow-y:hidden;
}

#div177{
height:150px;
width:150px;
border:2px solid black;
overflow-x:auto;
overflow-y:scroll;
}

#div178{
height:150px;
width:150px;
border:2px solid black;
overflow-x:visible;
overflow-y:visible;
}

/* visibility */
#div179{
height:70px;
width:200px;
visibility:hidden;
}

#tr180{
visibility:collapse;
}

/* direction */
#para181{
direction:ltr;
}

#para182{
direction:rtl;
}

/* letter spacing */
#para183s{
letter-spacing:normal;
}
#para184{
letter-spacing:5px;
}
#para185{
letter-spacing:-2px;
}
#para186{
letter-spacing:1cm;
}

/* text align */
#div187{
text-align:left;
}

#div188{
text-align:right;
}

#div189{
text-align:center;
}

#div190{
border:2px solid black;
width:200px;
text-align:justify;
}

#div191{
text-align:start;
}

#div192{
text-align:end;
}

#div193{
text-align:inherit;
}

/* text decoration */
#span194{
text-decoration:none;
}

#span195{
text-decoration:underline;
}

#span196{
text-decoration:overline;
}

#span197{
text-decoration:line-through;
}

/* text indent */
#div198{
width:200px;
border:2px dashed black;
text-indent:50px
}

#div199{
border:2px dashed black;
text-indent:15%;
}

/* text shadow */

#span200{
text-shadow: 10px 10px orange;
}

#span201{
text-shadow: 0px 10px 5px orange;
}

#para202{
text-indent:20px;
text-shadow: -15px 20px green, 15px -20px red;
}

#para203{
text-align:center;
text-shadow: -50px 20px 5px green, 15px -20px red, 50px 20px 10px blue, -15px -50px orange;
}

/* text transform */
#para204{
text-transform:none;
}

#para205{
text-transform:capitalize;
}

#para206{
text-transform:uppercase;
}

#para207{
text-transform:lowercase;
}

/* unicodebidi */
#div208{
direction:ltr;
}

#span209{
direction:rtl;
unicode-bidi:embed;
}

#para210{
direction:rtl;
unicode-bidi:bidi-override;
}

/* white space */
#div211{
width:150px;
border:2px solid black;
white-space: normal;
}

#div212{
width:150px;
border:2px solid black;
white-space: nowrap;
}

#div213{
width:150px;
border:2px solid black;
white-space: pre;
}

#div214{
width:150px;
border:2px solid black;
white-space: pre-wrap;
}

#div215{
width:150px;
border:2px solid black;
white-space: pre-line;
}

/* word break */
#div216{
width:200px;
border:2px solid black;
word-break:normal;
}

#div217{
width:200px;
border:2px solid black;
word-break:break-all;
}

#div218{
width:200px;
border:2px solid black;
word-break:keep-all;
}

/* word spacing */
#para219{
word-spacing:normal;
}

#para220{
word-spacing:15px;
}

#para221{
word-spacing:-5px;
}

#para222{
word-spacing:1cm;
}

/* word wrap */
#para223{
width:200px;

border:2px solid black;
word-wrap:normal;
}

#para224{
width:200px;
border:2px solid black;
word-wrap:break-word;
}
.overflowhidden{
overflow:hidden;
}

/* column count */
#div225{
width:100%;
column-count:3;
-moz-column-count:3;
-webkit-column-count:3;
}

/* column gap */
#div226{
width:100%;
column-count:3;
-moz-column-count:3;
-webkit-column-count:3;
column-gap:20px;
-moz-column-gap:20px;
-webkit-column-gap:20px;
}

/* column rule color */
#div227{
width:100%;
column-count:3;
-moz-column-count:3;
-webkit-column-count:3;
column-rule-width:5px;
-moz-column-rule-width:5px;
-webkit-column-rule-width:5px;
column-rule-style:dashed;
-moz-column-rule-style:dashed;
-webkit-column-rule-style:dashed;
column-rule-color:red;
-moz-column-rule-color:red;
-webkit-column-rule-color:red;
}

/* column rule style */
#div228{
width:100%;
column-count:3;
-moz-column-count:3;
-webkit-column-count:3;
column-rule-width:5px;
-moz-column-rule-width:5px;
-webkit-column-rule-width:5px;
column-rule-color:blue;
-moz-column-rule-color:blue;
-webkit-column-rule-color:blue;
column-rule-style:double;
-moz-column-rule-style:double;
-webkit-column-rule-style:double;
}

/* column rule width */
#div229{
width:100%;
column-count:3;
-moz-column-count:3;
-webkit-column-count:3;
column-rule-color:green;
-moz-column-rule-color:green;
-webkit-column-rule-color:green;
column-rule-style:dotted;
-moz-column-rule-style:dotted;
-webkit-column-rule-style:dotted;
column-rule-width:medium;
-moz-column-rule-width:medium;
-webkit-column-rule-width:medium;
}

/* column rule */
#div230{
width:100%;
column-count:3;
-moz-column-count:3;
-webkit-column-count:3;
column-rule: 20px dotted blue;
-moz-column-rule: 20px dotted blue;
-webkit-column-rule: 20px dotted blue;
}
/* Don't forget the -moz- and -webkit- prefixes! */

/* columns */
#div231{
columns: auto 5;
-moz-columns: auto 5;
-webkit-columns: auto 5;
}

/* column width */
#div232{
column-width:50px;
-moz-column-width:50px;
-webkit-column-width:50px;
}

/* color */

/*h1{
color:#FF0000;
}*/

#div233{
color:purple;
}

#para234{
color: rgb(128,128,0)
}

#span235{
color:inherit;
}

/* opacity */

#div236{
width:150px;
height:75px;
background-color:red;
opacity:1;
}

#div237{
width:150px;
height:75px;
background-color:red;
opacity:0.7;
}

#div238{
width:150px;
height:75px;
background-color:red;
opacity:0.5;
}

#div239{
width:150px;
height:75px;
background-color:red;
opacity:0.45;
}

#div240{
width:150px;
height:75px;
background-color:red;
opacity:0.3;
}

/* List Style Position */
#ul241{
bordeR:2px solid red;
list-style-position:outside;
}

#ul242{
border:2px solid red;
list-style-position:inside;
}

/*  List style image*/
#ul243{
list-style-image:none;
}

#ul244{
list-style-position:inside;
list-style-image:url('../Res/cssaideiconsmall.png');
}

/* List style type */

#ul245{
list-style-position:inside;
list-style-type:disc;
}

#ul246{
list-style-position:inside;
list-style-type:square;
}

#ul247{
list-style-position:inside;
list-style-type:circle;
}

#ol248{
list-style-position:inside;
list-style-type:decimal;
}

#ol249{
list-style-position:inside;
list-style-type:decimal-leading-zero;
}

#ol250{
list-style-position:inside;
list-style-type:lower-roman;
}

#ol251{
list-style-position:inside;
list-style-type:georgian;
}

#ol252{
list-style-position:inside;
list-style-type:upper-alpha;
}

/* List Style  */
#ul253{
list-style: square inside none;
}

#ul254{
list-style: circle inside url('../Res/cssaideiconsmall.png');
}

#ol255{
list-style: armenian outside none;
}

/* animation */

/* animation name */
#div256{
height:150px;
width:150px;
background-color:red;
animation-name:colours;
animation-duration:5s;
-webkit-animation-name:colours;
-webkit-animation-duration:5s;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
}

@keyframes colours{
30%{background-color:blue;}
60%{background-color:green;}
90%{background-color:red;}
}

@-webkit-keyframes colours{
30%{background-color:blue;}
60%{background-color:green;}
90%{background-color:red;}
}

/* animation delay*/

#div257{
height:150px;
width:150px;
background-color:red;
animation-name:colours;
-webkit-animation-name:colours;
animation-duration:5s;
-webkit-animation-duration:5s;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
animation-delay:5s;
-webkit-animation-delay:5s;
}

@keyframes colours{
30%{background-color:blue;}
60%{background-color:green;}
90%{background-color:red;}
}

@-webkit-keyframes colours{
30%{background-color:blue;}
60%{background-color:green;}
90%{background-color:red;}
}

/* animation direction*/

#div258{
height:150px;
width:150px;
background-color:blue;
animation-name:colours;
-webkit-animation-name:colours;
animation-duration:15s;
-webkit-animation-duration:15s;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
animation-direction:normal;
-webkit-animation-direction:normal;
}

#div259{
height:150px;
width:150px;
background-color:blue;
animation-name:colours;
-webkit-animation-name:colours;
animation-duration:15s;
-webkit-animation-duration:15s;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
animation-direction:reverse;
-webkit-animation-direction:reverse;
}

#div260{
height:150px;
width:150px;
background-color:blue;
animation-name:colours;
-webkit-animation-name:colours;
animation-duration:15s;
-webkit-animation-duration:15s;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
animation-direction:alternate;
-webkit-animation-direction:alternate;
}

@keyframes colours{
0% {background-color:blue;}
25%{background-color:green;}
50%{background-color:red;}
75%{background-color:orange;}
}

@-webkit-keyframes colours{
0% {background-color:blue;}
25%{background-color:green;}
50%{background-color:red;}
75%{background-color:orange;}
}

/* animation duration */
#div261{
height:150px;
width:150px;
background-color:blue;
animation-name:colours;
-webkit-animation-name:colours;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
animation-duration:5s;
-webkit-animation-duration:5s;
}

@keyframes colours{
0% {background-color:blue;}
25%{background-color:green;}
50%{background-color:red;}
75%{background-color:orange;}
}

@-webkit-keyframes colours{
0% {background-color:blue;}
25%{background-color:green;}
50%{background-color:red;}
75%{background-color:orange;}
}

/* animation iteration count */
#div262{
height:150px;
width:150px;
background-color:blue;
animation-name:colours;
-webkit-animation-name:colours;
animation-iteration-count:2;
-webkit-animation-iteration-count:2;
animation-duration:5s;
-webkit-animation-duration:5s;
}

#div263{
height:150px;
width:150px;
background-color:blue;
animation-name:colours;
-webkit-animation-name:colours;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
animation-duration:5s;
-webkit-animation-duration:5s;
}

@keyframes colours{
0% {background-color:blue;}
25%{background-color:green;}
50%{background-color:red;}
75%{background-color:orange;}
}

@-webkit-keyframes colours{
0% {background-color:blue;}
25%{background-color:green;}
50%{background-color:red;}
75%{background-color:orange;}
}

/* animation play state */
#div264{
height:150px;
width:150px;
background-color:blue;
animation-name:colours;
-webkit-animation-name:colours;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
animation-duration:5s;
-webkit-animation-duration:5s;
animation-play-state:paused;
-webkit-animation-play-state:paused;
}

#div265{
height:150px;
width:150px;
background-color:blue;
animation-name:colours;
-webkit-animation-name:colours;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
animation-duration:5s;
-webkit-animation-duration:5s;
animation-play-state:running;
-webkit-animation-play-state:running;
}

@keyframes colours{
0% {background-color:blue;}
25%{background-color:green;}
50%{background-color:red;}
75%{background-color:orange;}
}

@-webkit-keyframes colours{
0% {background-color:blue;}
25%{background-color:green;}
50%{background-color:red;}
75%{background-color:orange;}
}

/* animation timing function */
#div266{
height:100px;
width:100px;
background-color:blue;
animation-name:moveright;
-webkit-animation-name:moveright;
position:relative;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
animation-duration:5s;
-webkit-animation-duration:5s;
animation-timing-function:ease;
-webkit-animation-timing-function:ease;
}

#div267{
height:100px;
width:100px;
background-color:blue;
animation-name:moveright;
-webkit-animation-name:moveright;
position:relative;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
animation-duration:5s;
-webkit-animation-duration:5s;
animation-timing-function:linear;
-webkit-animation-timing-function:linear;
}

#div268{
height:100px;
width:100px;
background-color:blue;
animation-name:moveright;
-webkit-animation-name:moveright;
position:relative;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
animation-duration:5s;
-webkit-animation-duration:5s;
animation-timing-function:ease-in;
-webkit-animation-timing-function:ease-in;
}

@keyframes moveright{
0% {left:0px;}
100% {left:90%;}
}

@-webkit-keyframes moveright{
0% {left:0px;}
100% {left:90%;}
}


/* animation */

#div269{
height:150px;
width:150px;
background-color:blue;
animation: colours 5s linear infinite;
-webkit-animation: colours 5s linear infinite;
}

@keyframes colours{
0% {background-color:blue;}
25%{background-color:green;}
50%{background-color:red;}
75%{background-color:orange;}
}

@-webkit-keyframes colours{
0% {background-color:blue;}
25%{background-color:green;}
50%{background-color:red;}
75%{background-color:orange;}
}

/* TRANSITION */

/* transition delay */
#div270{
width:50%;
height:200px;
background-color:red;
transition-duration:5s;
-webkit-transition-duration:5s;
transition-delay: 2s;
-webkit-transition-delay:2s;
}

#div270:active{
width:100%;
}

/* transition duration */ 
#div271{
width:50%;
height:200px;
background-color:red;
transition-duration:3s;
-webkit-transition-duration:3s;
}

#div272{
width:50%;
height:200px;
background-color:red;
transition-duration:10s;
-webkit-transition-duration:10s;
}

#div271:active{
width:100%;
background-color:blue;
}

#div272:active{
width:100%;
background-color:green;
}

/* transition property */
#div273{
width:50%;
height:200px;
background-color:red;
transition-duration:5s;
-webkit-transition-duration:5s;
transition-property:height, width;
-webkit-transition-property:height, width;
}

#div273:active{
width:100%;
height:250px;
background-color:blue;
}

/* transition timing function */
#div274{
width:50%;
height:200px;
background-color:red;
transition-duration:5s;
-webkit-transition-duration:5s;
transition-timing-function: linear;
-webkit-transition-timing-function: linear;
}

#div275{
width:50%;
height:200px;
background-color:red;
transition-duration:5s;
-webkit-transition-duration:5s;
transition-timing-function: ease;
-webkit-transition-timing-function: ease;
}

#div274:active{
width:100%;
}

#div275:active{
width:100%;
}

/* Transition */
#div276{
width:50%;
height:200px;
background-color:red;
transition: all 5s ease-out 1s;
-webkit-transition: all 5s ease-out 1s;
}

#div276:active{
width:100%;
background-color:yellow;
}

/* OUTLINE */
/* Outline Colour */
#div277{
width:200px;
height:75px;
border:2px solid black;
outline-width:5px;
outline-style:dotted;
outline-color: blue;
}

/* Outline Style */
#div278{
width:200px;
height:75px;
border:2px solid black;
outline-width:5px;
outline-color: red;
outline-style:dashed;
}

#div279{
width:200px;
height:75px;
border:2px solid black;
outline-width:5px;
outline-color: yellow;
outline-style:double;
}

#div280{
width:200px;
height:75px;
border:2px solid black;
outline-width:5px;
outline-color: green;
outline-style:ridge;
}

/* Outline Width */
#div281{
width:200px;
height:75px;
border:2px solid black;
outline-color: red;
outline-style:solid;
outline-width:thin;
}

#div282{
width:200px;
height:75px;
border:2px solid black;
outline-color: red;
outline-style:solid;
outline-width:thick;
}

#div283{
width:200px;
height:75px;
border:2px solid black;
outline-color: red;
outline-style:solid;
outline-width:3px;
}


/* Outline short */
#div284{
width:200px;
height:75px;
margin:0 auto;
border:2px solid black;
outline: 7px dotted green;
}

/* @Keyframes */
#div285{
width:150px;
height:150px;
background-color:blue;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
animation-duration:5s;
-webkit-animation-duration:5s;
animation-name:animation;
-webkit-animation-name:animation;
}

@keyframes animation{
0% {background-color:blue;}
25%{background-color:green;}
50%{background-color:red;}
75%{background-color:orange;}
}

@-webkit-keyframes animation{
0% {background-color:blue;}
25%{background-color:green;}
50%{background-color:red;}
75%{background-color:orange;}
}

/* Backface-Visibility */
#div286{
width:150px;
height:75px;
background-color:red;
border:2px solid black;
}

#div287{
width:150px;
height:75px;
background-color:red;
border:2px solid black;
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
backface-visibility:visible;
-webkit-backface-visibility:visible;
}

#div288{
width:150px;
height:75px;
background-color:red;
border:2px solid black;
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}

/* transform */
#div289{
width:150px;
height:75px;
background-color:red;
}

#div290{
width:150px;
height:75px;
background-color:red;
transform:skew(5deg,7deg);
-webkit-transform:skew(5deg,7deg);
}

#div291{
width:150px;
height:75px;
background-color:red;
transform:rotatex(45deg);
-webkit-transform:rotatex(45deg);
}

#div292{
width:150px;
height:75px;
background-color:red;
transform:rotate(10deg);
-webkit-transform:rotate(10deg);
}

/* transform origin */

.div293{
width:200px;
height:150px;
border:2px solid black;
text-align:center;
margin:0 auto;
}

#div294{
width:150px;
height:75px;
background-color:red;
transform:rotate(7deg);
-webkit-transform:rotate(7deg);
}

#div295{
width:150px;
height:75px;
background-color:red;
transform:rotate(7deg);
-webkit-transform:rotate(7deg);
transform-origin: -100px -100px;
-webkit-transform-origin: -100px -100px;
}

#div296{
width:150px;
height:75px;
background-color:red;
transform:rotate(7deg);
-webkit-transform:rotate(7deg);
transform-origin: right bottom;
-webkit-transform-origin: right bottom;
}

/* Perspective */
#div297{
width:170px;
height:150px;
border:2px solid black;
perspective:none;
-webkit-perspective:none;
}

#div298{
margin:0 auto;
width:100px;
height:100px;
background-color:red;
transform: rotateX(45deg);
}

#div299{
width:170px;
height:150px;
border:2px solid black;
perspective:100px;
-webkit-perspective:100px;
}

#div300{
margin:0 auto;
width:100px;
height:100px;
background-color:red;
transform: rotateX(45deg);
}

/* perspective origin */
#div301{
width:170px;
height:150px;
border:2px solid black;
perspective:100px;
-webkit-perspective:100px;
}

#div302{
margin:0 auto;
width:100px;
height:100px;
background-color:red;
transform: rotateX(45deg);
}

#div303{
width:170px;
height:150px;
border:2px solid black;
perspective:100px;
-webkit-perspective:100px;
perspective-origin:20px 70px;
-webkit-perspective-origin:20px 70px;
}

#div304{
margin:0 auto;
width:100px;
height:100px;
background-color:red;
transform: rotateX(45deg);
}

#div305{
width:170px;
height:150px;
border:2px solid black;
perspective:100px;
-webkit-perspective:100px;
perspective-origin:left top;
-webkit-perspective-origin:left top;
}

#div306{
margin:0 auto;
width:100px;
height:100px;
background-color:red;
transform: rotateX(45deg);
}


/* transform style */
#div307{
height:200px;
width:50px;
background-color:red;
transform:rotatex(45deg);
-webkit-transform:rotatex(45deg);
transform-style:flat;
-webkit-transform-style:flat;
}

#div308{
height:150px;
width:30px;
background-color:blue;
transform:rotateY(-30deg);
-webkit-transform:rotateY(-30deg);
transform-origin:50% left;
-webkit-transform-origin:50% left;
}


#div309{
height:200px;
width:50px;
background-color:red;
transform:rotatex(45deg);
-webkit-transform:rotatex(45deg);
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
}

#div310{
height:150px;
width:30px;
background-color:blue;
transform:rotateY(-30deg);
-webkit-transform:rotateY(-30deg);
transform-origin:50% left;
-webkit-transform-origin:50% left;
}

/* Content */

p{
counter-increment: paras;
}

#p311::before{
content:"www.";
}

#p312::after{
content:attr(title);
}

#p313::after{
content:counter(paras);
}

/* counter */
body{
counter-reset: counterName;
}

p{
counter-increment: counterName;
}

#p314::after{
content:counter(counterName);
}

/* counter reset */
body{
counter-reset: theCounter 2;
}

p{
counter-increment: theCounter;
}

#p315::after{
content:counter(theCounter);
}

/* counter increment */
body{
counter-reset: theCount;
}

p{
counter-increment: theCount 3;
}

#p316::after{
content:counter(theCount);
}

/* Quotes */
.q316 {
quotes: "<" ">" "(" ")";
}

/* Line Height */
#p317{
line-height:normal;
}

#p318{
line-height:50px;
}

#p319{
line-height:3;
}

/* vertical align */
#img320{
vertical-align:top;
}

#img321{
vertical-align:bottom;
}

#img322{
vertical-align:middle;
}

#img323{
vertical-align:baseline;
}

/* bottom */
#div324{
width:150px;
height:75px;
border:2px solid blue;
position:relative;
bottom:20%;
}

#div325{
width:150px;
height:75px;
border:2px solid red;
position:relative;
bottom:-30px;
}

/* top */
#div326{
width:150px;
height:75px;
border:2px solid blue;
position:relative;
top:20px;
}

/* left */
#div327{
width:150px;
height:75px;
border:2px solid red;
position:relative;
left:50px;
}

#div328{
width:150px;
height:75px;
border:2px solid green;
position:relative;
left:30%;
}

/* right */
#div329{
width:150px;
height:75px;
border:2px solid red;
position:relative;
right:20px;
}

/* position */
#div330{
width:150px;
height:70px;
border:2px solid red;
position:fixed;
top:50px;
}

#div331{
width:150px;
height:70px;
border:2px solid green;
position:relative;
top:50px;
}

#div332{
width:150px;
height:70px;
border:2px solid blue;
position:absolute;
right:10px;}

#div333{
width:150px;
height:1000px;
background-color:yellow;
}

/* Z-Index */
#div334{
height:50px;
width:100%;
background-color:red;
position:relative;
bottom:30px;
text-align:center;
}


#div335{
height:50px;
width:100%;
background-color:red;
position:relative;
bottom:30px;
text-align:center;
z-index:1;
}

#span336{
position:relative;
z-index:2;
}

/* clip */
#img337{
position:absolute;
clip:rect(10px,70px,80px,0px)
}

/* after */
#p338::after{
content:".com";
}

/* before */
#p339::before{
content:"www.";
}

/* first letter */
.p339::first-letter{
color:red;
}

/* first line */
#div340::first-line{
color:blue;
}

#div340{
width:200px;
height:200px;
border:2px solid red;
overflow:hidden;
}

/* cursor */
/*
#exarea div{
width:200px;
height:75px;
border:2px solid red;
}
*/

#div341{
cursor:crosshair;
}

#div342{
cursor:pointer;
}

#div343{
cursor:move;
}

#div344{
cursor:nw-resize;
}

#div345{
cursor:text;
}

#div346{
cursor:wait;
}

#div347{
cursor:progress;
}

#div348{
cursor:help;
}

#div349{
cursor:url(../Res/cssaideiconsmall.png),auto;
}

#div350{
cursor:cell;
}

#div351{
cursor:Col-resize;
}

#div352{
cursor:zoom-in;
}

#div353{
cursor:alias;
}

#div354{
cursor:no-drop;
}

/* box shadow */
#div355{
height:75px;
width:150px;
border:2px solid black;
box-shadow: 20px 20px 0px 3px #FF0000;
/* Remove this from production */
-webkit-box-shadow: 20px 20px 0px 3px #FF0000;
}

#div356{
height:75px;
width:150px;
border:2px solid black;
box-shadow: 20px 20px 0px 3px #000, -20px -20px 0px 3px #00FF00;
/* Remove this from production */
-webkit-box-shadow: 20px 20px 0px 3px #000,-20px -20px 0px 3px #00FF00 ;
}

/* box sizing*/
#div357{
width:150px;
height:75px;
border:2px solid black;
padding:5px;
}

#div358{
width:150px;
height:75px;
border:2px solid black;
padding:5px;
box-sizing:border-box;
/* Remove this from production */
-webkit-box-sizing:border-box;
}


/* caption side */

#table359 tr,td{
border:1px solid black;
}

#table359{
width:100%;
border:1px solid black;
}

#caption359{
caption-side:bottom;
}

/* empty cells */
#table360 tr,td{
border:1px solid black;
}

#table360{
width:100%;
border:1px solid black;
empty-cells:hide;
}

#table361{
width:100%;
border:1px solid black;
empty-cells:show;
}

/* table layout */
#table362{
width:100%;
border:1px solid black;
}

#table363{
width:100%;
border:1px solid black;
table-layout:fixed;
}

/* bd spacing */
#table364{
width:100%;
border:1px solid black;
border-spacing:5px 10px;
}