Native auto_css syntax

Only css no javascript

Gradient demo

	syntax: 
	vgradient #color1 #color2
	you can use your own values like this:
	GRADCOL1="#953"
	GRADCOL2=lighten(GRADCOL1,80)
	vgradient GRADCOL1 GRADCOL2
	
	changing GRADCOL1 will change the gradient.

vgradient #F00 #00F

hgradient #F00 #00F

Text effects demo

txtemboss + bolder command

txtemboss #888 + bolder command

txthalo red command

txtshadow command


italic underon txtc commands

stikeon

capitalized text

Small Caps Text

uppercase text


txtblur 1 black

txtblur 2 black

txtblur 5 black

txtblur 10 red

change cursor demo

the hand (my friend ^^)

waiting

text selection

HELP! (I need somebody)

Arrow -->

box shadows demo

boxshadow 1 3

boxshadow 3 3

boxshadow 3 15

insetshadow 1 3

insetshadow 3 3

insetshadow 3 10

box halos demo

creates a halo around a box.

boxhalo red

boxhalo blue

boxhalo green

boxhalo #FF0

or inside a box

insethalo yellow

insethalo #FF0

opacity demo

opacity 80

opacity 50

opacity 20


Opacity 20 => 99 on hover

Round corners demo

roundc 2

roundc 5

roundc 10

Box emboss/relief

boxemboss 1

boxemboss 3

boxraise 1

boxraise 3

boxemboss 1 insetshadow 1 3 roundc 5

boxemboss #B83 1 insetshadow 2 5 roundc 35 vgradient #F70 #C60 txtc txtshadow

Other round corners demo

Leaf form 1:
leafleft 10

Leaf form 2:
leafright 10

Rounded header :
roundtop 10

Rounded bottom :
roundbottom 10

Rounded left border :
roundleft 10

Rounded right border :
roundright 10

A 2 lines button demo 

.button{boxraise 1 roundc 4 boxshadow 1 1 vgradient #360303 #851010 pad 5 txtc txtshadow transitall 500ms }
	.button:hover{boxemboss 1 insetshadow 1 2 vgradient #120000 #630000 transitall 500ms }

I'm a button


A 1 line alertbox demo

I'm an alert box made with 1 line:
.alert{roundc 10 insetshadow 0 2 vgradient ffe617 ffc808 pad 5 txtc txthalo red width:90%;color:darkred}

font family & size

ff_courrier fs 18
Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro.

ff_palatino fs 20
Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro.

ff_lucida fs 22
Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro.

ff_verdana fs 24
Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro.

ff_impact fs 26
Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro.

Functions in css comments -1-

	/* autosized paragraphs with background images
		image1="../logo.png"
	    dimensions1=dimensions(image1)	
	    back1="background-image:url(image1); dimensions1"
    */
    p.img1{back1}

Functions in css comments -2-

	/* changing color
	    color_base="#F00"
	    color1=lighten(color_base,50)
	    color2=darken(color_base,50)
	    color3=reverse(color_base)
    */
	.light{color:color1;}
	.dark{color:color2;}
	.rever{color:color3;}
  • Text in RED => text in .light
  • Text in RED => text in .dark
  • Text in RED => text in .rever

    • Button with hover reversed color

    	/*	
	 	color_base="#F00"
	    color1=lighten(color_base,50)
	    color2=darken(color_base,50)
	    color3=reverse(color_base)
	    color4=darken(color3,50)
	    red_button="background-color:color2;color:color1;"
	    green_button="background-color:color3;color:color4;"
	*/
	.button1{ roundc 5 bowshadow 1 2 boxraise 1 redbutton}
	.button1:hover{greenbutton}
    Hover me
    Changing color_base to #00F

    transitions (CSS3 only)

    transitall 1

    resize 2

    xsize 2

    ysize 2

    move 50 50

    rotate 90

    cumulating effects 1
    roundc 20 move 0 -5 boxshadow 5 5

    cumulating effects 2
    roundc 20 move 0 -5 insetshadow 5 5

    cumulating effects 3
    background:black;
    rotate 180
    opacity 0

    desaturation (experimental, works on Chrome)


    on hover -> blur 5


    blur 2                         blur 10

    desaturation (experimental, works on Chrome)


    on hover -> desaturate


    desaturate                         desaturate 50

    sepia (experimental, works on Chrome)


    on hover -> sepia


    sepia                         sepia 50

    negative (experimental, works on Chrome)


    on hover -> negative


    negative                         negative 25

    files content

    see the documentation

    master css content (css.css)

    the file you work on (you can change the name or process multiples css files)

    			
/*INITIALISATION

The values used in this css file
    FRONTCOLOR="#AAA" 
    GRADCOL1="#777" 
    GRADCOL2=lighten(GRADCOL1,10) 
    BACKCOLOR=darken(FRONTCOLOR,60)
    CONFIGCOLOR1=lighten(FRONTCOLOR,50)
    CONFIGCOLOR2=darken(FRONTCOLOR,20)

    color_base="#F00"
    color1=lighten(color_base,50)
    color2=darken(color_base,50)
    color3=reverse(color_base)
    color4=darken(color3,50)
    red_button="background-color:color2;color:color1;"
    green_button="background-color:color3;color:color4;"

    color_bas2="#00F"
    color5=lighten(color_bas2,50)
    color6=darken(color_bas2,50)
    color7=reverse(color_bas2)
    color8=darken(color7,50)
    blue_button="background-color:color6;color:color5;"
    blue2_button="background-color:color7;color:color8;"

    image1="../logo.png"
    image2="../people.jpg"
    dimensions1=dimensions(image1)	
    dimensions2=dimensions(image2)
    back1="background-image:url(image1); dimensions1"
    back2="background-image:url(image2); dimensions2"


*/

body{ff_tahoma; min-width:900px;background-color:#DDD;pad 10}
div{width:420px;flol mar 5 boxraise 1 boxshadow 1 2 pad 5 roundc 5 background-color:CONFIGCOLOR2; } 
h1{boxemboss 1 txthalo white smallcaps txtc roundc 5 pad 5 background-color:#333;color:#EEE;fs 20 insetshadow 0 4 marb 25}

p{mar 10}
pre{ff_courrier antioverflow color:white; txti }
h1.title{smallcaps txtshadow color: white;background-color:#444; roundc 10;  pad 5 fs 24 txthalo white}
div.master{
	color:FRONTCOLOR;
	background-color:BACKCOLOR;
	width: 98%;
	height:100% auto;
	/* this replacement rules syntax is included by default in auto_css*/
	txtb!important
	txti
	txthalo #777
}

div.computed{
	width:98%;
	background:BACKCOLOR;
	txtshadow
	opacity 80
	pad 5
	
	underoff
}

div.gradient{}
.gradient .grad1{vgradient #F00 #00F pad 10 height:50px;color:white;}
.gradient .grad2{hgradient #F00 #00F pad 10 height:50px;color:white;}
div.demo{height:600px;vgradient GRADCOL1 GRADCOL2 }

/* text effects*/
div.text{}
	.halo{txthalo red fs 30px;}
	.emboss{txtemboss color:black;txtxb}
	.emboss2{txtemboss #888 color:black;txtxb}
	.shado{txtshadow }
	.effects{txti underon txtc marb 0 display:inline-block; mar 0}
	.effects2{strikeon display:inline-block; mar 0}
	.effects3{capital display:inline-block; mar 0}
	.effects4{smallcaps display:inline-block; mar 0}
	.effects5{ucase display:inline-block; mar 0}
	.blur1{fs 20 txtb txtblur 1 black width:100px; float:left}
	.blur2{fs 20 txtb txtblur 2 black width:100px; float:left}
	.blur3{fs 20 txtb txtblur 5 black width:100px; float:left}
	.blur4{fs 20 txtb txtblur 10 red width:100px; float:left}
	
/* cursor effects*/
div.cursors{	}
	.hand{curhand}
	.wait{curwait}
	.text{curtext}
	.arrow{cursoes}
	.help{curhelp}
/* boxshadows */
div.boxshadows{color:CONFIGCOLOR1;background-color:CONFIGCOLOR2;}
div.boxshadows p{pad 5}
	.bs1{boxshadow 1 2}
	.bs2{boxshadow 3 3}
	.bs3{boxshadow 3 15}
	.bs4{insetshadow 1 2}
	.bs5{insetshadow 3 3}
	.bs6{insetshadow 3 10}

/* boxshalos */
div.boxhalos{color:FRONTCOLOR;background-color:BACKCOLOR;}
div.boxhalos p{pad 5 }
	.bh1{boxhalo red background-color:red;color:black;}
	.bh2{boxhalo blue background-color:blue;color:white;}
	.bh3{boxhalo green background-color:green;color:white;}
	.bh4{boxhalo #FF0 background-color:yellow;color:black;}
	.bh5{insethalo yellow background-color:#411;color:yellow;}
	.bh6{insethalo #FF0 background-color:#411;color:yellow;}

	
/* opacity */
div.opacity{color:CONFIGCOLOR1;background-color:CONFIGCOLOR2;}
div.opacity p{pad 5 background-color:BACKCOLOR;}
	.op1{opacity 80}
	.op2{opacity 50}
	.op3{opacity 20}
	div.opacity img{opacity 20 transitall 1s}
	div.opacity img:hover{opacity 99 transitall 1s}

/* rounded borders */
div.rounded{color:CONFIGCOLOR1;height:600px;}
div.rounded p{pad 5 background-color:#222; mar 10}
	.ro1{roundc 2}
	.ro2{roundc 5}
	.ro3{roundc 10}
	.ro4, .ro5, .ro6, .ro7, .ro8, .ro9{height:60px;txtc boxshadow 2 1  border:1px solid black}
	.ro4{leafleft 10 }
	.ro5{leafright 10}
	.ro6{roundtop 10}
	.ro7{roundbottom 10}
	.ro8{roundleft 10}
	.ro9{roundright 10}
	
		
	.em1{boxemboss 1}
	.em2{boxemboss 3}
	.em3{boxemboss 1 insetshadow 1 3 roundc 5}
	.em4{boxemboss #B83 1 insetshadow 2 5 roundc 35 vgradient #F70 #C60 txtc txtshadow}
	.re1{boxraise 1}
	.re2{boxraise 3}
/* button */
div.buton{color:CONFIGCOLOR1;background-color:BACKCOLOR;height:600px;}	
	.button{boxraise 1 roundc 8 boxshadow 1 1 vgradient #360303 #851010 pad 5 txtc txtshadow width:300px;transitall 500ms }
	.button:hover{boxemboss 1 insetshadow 1 2 vgradient #120000 #630000 transitall 500ms }
	.alert{roundc 10 insetshadow 0 2 vgradient #ffe617 #ffc808 pad 5 padl 100 txthalo red width:60%;color:darkred;marauto antioverflow}
	
/* fonts */
div.ff {color:CONFIGCOLOR1;background-color:BACKCOLOR; height:600px;overflow-y:hidden;}
	div.ff p{txtshadow}
	.f1{ff_courrier fs 18}
	.f2{ff_palatino fs 20}
	.f3{ff_lucida fs 22}
	.f4{ff_trebuchet fs 24}
	.f5{ff_impact fs 26}

div.transitions {color:CONFIGCOLOR1;background-color:BACKCOLOR; height:700px;overflow-y:hidden;}
	div.transitions p{border:1px solid black;
	transitall 500ms marauto width:100px;background:red;txtc marb 5 mart 5 curhand}
	.tra1{}
	.tra1:hover{resize 2}
	.tra2:hover{xsize 2}
	.tra3:hover{ysize 2}
	.tra4:hover{move 50 50}
	.tra5:hover{rotate 90}
	
	.tra10, .tra20{width:200px!important}
	.tra10:hover{roundc 20 move 0 -5 boxshadow 5 5}
	.tra20:hover{roundc 20 insetshadow 2 3 resize 0.95}
	.tra30{width:150px!important;height:100px!important; roundc 75 padt 50 fs 15}
	.tra30:hover{background:black!important;rotate 180 opacity 0}
	.tra40:hover{move 50 50}
	.tra50:hover{rotate 90}
		

div.desaturation{color:CONFIGCOLOR1;background-color:darkred; height:600px;overflow-y:hidden;}
  div.desaturation img{transitall 1s }
  div.desaturation img:hover{ transitall 1s desaturate}
  div.desaturation img.half{desaturate 50}
  div.desaturation img.all{desaturate 100}
  
div.sepia{color:CONFIGCOLOR1;background-color:darkred; height:600px;overflow-y:hidden;}
  div.sepia img{transitall 1s }
  div.sepia img:hover{ transitall 1s sepia}
  div.sepia img.half{sepia 50}
  div.sepia img.all{sepia 100}
  
div.negative{color:CONFIGCOLOR1;background-color:darkred; height:600px;overflow-y:hidden;}
  div.negative img{transitall 1s }
  div.negative img:hover{ transitall 1s negative}
  div.negative img.half{negative 25}
  div.negative img.all{negative 100}

div.blur{color:CONFIGCOLOR1;background-color:darkred; height:600px;overflow-y:hidden;}
  div.blur img{transitall 1s }
  div.blur img:hover{ transitall 1s blur 5}
  div.blur img.half{blur 2}
  div.blur img.all{blur 10}
 
div.functions{height:700px;}
	div.functions p.img1{back1}
	div.functions p.img2{back2}
	div.functions li{fs 20 color:color_base}

	div.functions .light{color:color1;}
	div.functions .dark{color:color2;}
	div.functions .rever{color:color3;}
	div.functions .button1{red_button mar 20 pad 20 roundc 5 boxshadow 1 2 boxraise 1 txtc width:100px; transitall 1s}
	div.functions .button1:hover{ green_button transitall 1s}
	div.functions .button2{blue_button mar 20 pad 20 roundc 5 boxshadow 1 2 boxraise 1 txtc width:100px;transitall 1s}
	div.functions .button2:hover{ blue2_button transitall 1s}

    computed css content (computed_css.css)

    the file that auto_css generates with your master and your own rules 

    /*Generated in 0.031728s with auto_css v1.3*/

    /* HTML5 Reset Stylesheet by HTML5Doctor.com */
    html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
    body{line-height:1}
    article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
    nav ul{list-style:none}
    blockquote,q{quotes:none}
    blockquote:before,blockquote:after,q:before,q:after{content:none}
    a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
    ins{background-color:#ff9;color:#000;text-decoration:none}
    mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
    del{text-decoration:line-through}
    abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
    table{border-collapse:collapse;border-spacing:0}
    hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
    input,select{vertical-align:middle}  
    
 

body{font-family: Tahoma, Geneva, sans-serif;; min-width:900px;background-color:#DDD;padding : 10px ;}
div{width:420px;float:left; margin : 5px ; border:1px solid #444;border-bottom-color:#333;border-top-color:#aaa; -moz-box-shadow: 0 1px 2px #000; -webkit-box-shadow: 0 1px 2px #000; box-shadow: 0 1px 2px #000; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#000000')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#000000');   padding : 5px ; -moz-border-radius: 5px;  -webkit-border-radius: 5px;  border-radius: 5px;    background-color:#888888; } 
h1{border:1px solid #444;border-top-color:#333;border-bottom-color:#aaa;    text-shadow:0 0 5px white; font-variant:small-caps; text-align: center; -moz-border-radius: 5px;  -webkit-border-radius: 5px;  border-radius: 5px;    padding : 5px ; background-color:#333;color:#EEE;font-size : 20px; -moz-box-shadow: inset 0 0px 4px #000000; -webkit-box-shadow: inset 0 0px 4px #000000; box-shadow: inset 0 0px 4px #000000;   margin-bottom : 25px ;}

p{margin : 10px ;}
pre{font-family: 'Courier New', Courier, monospace; white-space: pre;white-space: pre-wrap;white-space: pre-line;white-space: -pre-wrap;white-space: -o-pre-wrap;white-space: -moz-pre-wrap;white-space: -hp-pre-wrap;word-wrap: break-word; color:white; font-style: italic; }
h1.title{font-variant:small-caps; text-shadow: 0 1px 1px black; color: white;background-color:#444; -moz-border-radius: 10px;  -webkit-border-radius: 10px;  border-radius: 10px;   ;  padding : 5px ; font-size : 24px;    text-shadow:0 0 5px white;}
div.master{
	color:#AAA;
	background-color:#444444;
	width: 98%;
	height:100% auto;
	 
	font-weight: bold!important;
	font-style: italic;
	   text-shadow:0 0 5px #777;
}

div.computed{
	width:98%;
	background:#444444;
	text-shadow: 0 1px 1px black;
	opacity: .80;filter: alpha(opacity=80);-ms-filter: "alpha(opacity=80)"; -khtml-opacity: .80; -moz-opacity: .80; 
	padding : 5px ;
	
	text-decoration: none;
}

div.gradient{}
.gradient .grad1{filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #F00, endColorstr = #00F); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #F00, endColorstr = #00F)"; background-image: -moz-linear-gradient( top, #F00, #00F); background-image: -ms-linear-gradient( top, #F00, #00F); background-image: -o-linear-gradient( top, #F00, #00F); background-image: -webkit-gradient(linear, center top, center bottom, from(#F00), to(#00F)); background-image: -webkit-linear-gradient( top, #F00, #00F); background-image: linear-gradient( top, #F00, #00F);    padding : 10px ; height:50px;color:white;}
.gradient .grad2{filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #F00, endColorstr = #00F);-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #F00, endColorstr = #00F)"; background-image: -moz-linear-gradient( left, #F00, #00F); background-image: -ms-linear-gradient( left, #F00, #00F); background-image: -o-linear-gradient( left, #F00, #00F); background-image: -webkit-gradient(linear, left top, right top, from(#F00), to(#00F)); background-image: -webkit-linear-gradient( left, #F00, #00F); background-image: linear-gradient( left, #F00, #00F);    padding : 10px ; height:50px;color:white;}
div.demo{height:600px;filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #777, endColorstr = #919191); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #777, endColorstr = #919191)"; background-image: -moz-linear-gradient( top, #777, #919191); background-image: -ms-linear-gradient( top, #777, #919191); background-image: -o-linear-gradient( top, #777, #919191); background-image: -webkit-gradient(linear, center top, center bottom, from(#777), to(#919191)); background-image: -webkit-linear-gradient( top, #777, #919191); background-image: linear-gradient( top, #777, #919191);    }

 
div.text{}
	.halo{   text-shadow:0 0 5px red; font-size: 30px;;}
	.emboss{text-shadow: 0 1px 0 #aaa; color:black;font-weight: bolder;}
	.emboss2{text-shadow: 0 1px 0 #888; color:black;font-weight: bolder;}
	.shado{text-shadow: 0 1px 1px black; }
	.effects{font-style: italic; text-decoration: underline; text-align: center; margin-bottom : 0px ; display:inline-block; margin : 0px ;}
	.effects2{text-decoration:line-through; display:inline-block; margin : 0px ;}
	.effects3{text-transform:capitalize;display:inline-block; margin : 0px ;}
	.effects4{font-variant:small-caps; display:inline-block; margin : 0px ;}
	.effects5{text-transform:uppercase; display:inline-block; margin : 0px ;}
	.blur1{font-size : 20px; font-weight: bold; text-shadow:0 0 1px black;color:transparent; width:100px; float:left}
	.blur2{font-size : 20px; font-weight: bold; text-shadow:0 0 2px black;color:transparent; width:100px; float:left}
	.blur3{font-size : 20px; font-weight: bold; text-shadow:0 0 5px black;color:transparent; width:100px; float:left}
	.blur4{font-size : 20px; font-weight: bold; text-shadow:0 0 10px red;color:transparent; width:100px; float:left}
	
 
div.cursors{	}
	.hand{cursor: pointer; }
	.wait{cursor: wait; }
	.text{cursor: text; }
	.arrow{cursor: se-resize; }
	.help{cursor: help; }
 
div.boxshadows{color:#ffffff;background-color:#888888;}
div.boxshadows p{padding : 5px ;}
	.bs1{-moz-box-shadow: 0 1px 2px #000; -webkit-box-shadow: 0 1px 2px #000; box-shadow: 0 1px 2px #000; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#000000')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#000000');  }
	.bs2{-moz-box-shadow: 0 3px 3px #000; -webkit-box-shadow: 0 3px 3px #000; box-shadow: 0 3px 3px #000; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#000000')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#000000');  }
	.bs3{-moz-box-shadow: 0 3px 15px #000; -webkit-box-shadow: 0 3px 15px #000; box-shadow: 0 3px 15px #000; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=15, Direction=135, Color='#000000')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=15, Direction=135, Color='#000000');  }
	.bs4{-moz-box-shadow: inset 0 1px 2px #000000; -webkit-box-shadow: inset 0 1px 2px #000000; box-shadow: inset 0 1px 2px #000000;  }
	.bs5{-moz-box-shadow: inset 0 3px 3px #000000; -webkit-box-shadow: inset 0 3px 3px #000000; box-shadow: inset 0 3px 3px #000000;  }
	.bs6{-moz-box-shadow: inset 0 3px 10px #000000; -webkit-box-shadow: inset 0 3px 10px #000000; box-shadow: inset 0 3px 10px #000000;  }

 
div.boxhalos{color:#AAA;background-color:#444444;}
div.boxhalos p{padding : 5px ; }
	.bh1{-moz-box-shadow: 0 0 5px red; -webkit-box-shadow: 0 0 5px red; box-shadow: 0 0 5px red; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='red')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='red');    background-color:red;color:black;}
	.bh2{-moz-box-shadow: 0 0 5px blue; -webkit-box-shadow: 0 0 5px blue; box-shadow: 0 0 5px blue; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='blue')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='blue');    background-color:blue;color:white;}
	.bh3{-moz-box-shadow: 0 0 5px green; -webkit-box-shadow: 0 0 5px green; box-shadow: 0 0 5px green; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='green')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='green');    background-color:green;color:white;}
	.bh4{-moz-box-shadow: 0 0 5px #FF0; -webkit-box-shadow: 0 0 5px #FF0; box-shadow: 0 0 5px #FF0; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#FF0')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#FF0');    background-color:yellow;color:black;}
	.bh5{-moz-box-shadow: inset 0 0 5px yellow; -webkit-box-shadow: inset 0 0 5px yellow; box-shadow: inset 0 0 5px yellow;      background-color:#411;color:yellow;}
	.bh6{-moz-box-shadow: inset 0 0 5px #FF0; -webkit-box-shadow: inset 0 0 5px #FF0; box-shadow: inset 0 0 5px #FF0;      background-color:#411;color:yellow;}

	
 
div.opacity{color:#ffffff;background-color:#888888;}
div.opacity p{padding : 5px ; background-color:#444444;}
	.op1{opacity: .80;filter: alpha(opacity=80);-ms-filter: "alpha(opacity=80)"; -khtml-opacity: .80; -moz-opacity: .80; }
	.op2{opacity: .50;filter: alpha(opacity=50);-ms-filter: "alpha(opacity=50)"; -khtml-opacity: .50; -moz-opacity: .50; }
	.op3{opacity: .20;filter: alpha(opacity=20);-ms-filter: "alpha(opacity=20)"; -khtml-opacity: .20; -moz-opacity: .20; }
	div.opacity img{opacity: .20;filter: alpha(opacity=20);-ms-filter: "alpha(opacity=20)"; -khtml-opacity: .20; -moz-opacity: .20;  -webkit-transition:all 1s ;-moz-transition:all 1s ;-o-transition:all 1s ;transition:all 1s ;}
	div.opacity img:hover{opacity: .99;filter: alpha(opacity=99);-ms-filter: "alpha(opacity=99)"; -khtml-opacity: .99; -moz-opacity: .99;  -webkit-transition:all 1s ;-moz-transition:all 1s ;-o-transition:all 1s ;transition:all 1s ;}

 
div.rounded{color:#ffffff;height:600px;}
div.rounded p{padding : 5px ; background-color:#222; margin : 10px ;}
	.ro1{-moz-border-radius: 2px;  -webkit-border-radius: 2px;  border-radius: 2px;   }
	.ro2{-moz-border-radius: 5px;  -webkit-border-radius: 5px;  border-radius: 5px;   }
	.ro3{-moz-border-radius: 10px;  -webkit-border-radius: 10px;  border-radius: 10px;   }
	.ro4, .ro5, .ro6, .ro7, .ro8, .ro9{height:60px;text-align: center; -moz-box-shadow: 0 2px 1px #000; -webkit-box-shadow: 0 2px 1px #000; box-shadow: 0 2px 1px #000; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#000000')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#000000');    border:1px solid black}
	.ro4{-moz-border-radius: 10px 0;  -webkit-border-radius: 10px 0 10px 0;  border-radius: 10px 0 10px 0;    }
	.ro5{-moz-border-radius: 0 10px;  -webkit-border-radius: 0 10px 0 10px;  border-radius: 0 10px 0 10px;   }
	.ro6{-moz-border-radius: 10px 10px 0 0;  -webkit-border-radius: 10px 10px 0 0;  border-radius: 10px 10px 0 0;   }
	.ro7{-moz-border-radius: 0 0 10px 10px;  -webkit-border-radius: 0 0 10px 10px;  border-radius: 0 0 10px 10px;   }
	.ro8{-moz-border-radius: 10px 0 0 10px;  -webkit-border-radius: 10px 0 0 10px;  border-radius: 10px 0 0 10px;   }
	.ro9{-moz-border-radius: 0 10px 10px 0;  -webkit-border-radius: 0 10px 10px 0;  border-radius: 0 10px 10px 0;   }
	
		
	.em1{border:1px solid #444;border-top-color:#333;border-bottom-color:#aaa;}
	.em2{border:3px solid #444;border-top-color:#333;border-bottom-color:#aaa;}
	.em3{border:1px solid #444;border-top-color:#333;border-bottom-color:#aaa; -moz-box-shadow: inset 0 1px 3px #000000; -webkit-box-shadow: inset 0 1px 3px #000000; box-shadow: inset 0 1px 3px #000000;   -moz-border-radius: 5px;  -webkit-border-radius: 5px;  border-radius: 5px;   }
	.em4{border:1px solid #444;border-top-color:#333;border-bottom-color:#B83; -moz-box-shadow: inset 0 2px 5px #000000; -webkit-box-shadow: inset 0 2px 5px #000000; box-shadow: inset 0 2px 5px #000000;   -moz-border-radius: 35px;  -webkit-border-radius: 35px;  border-radius: 35px;    filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #F70, endColorstr = #C60); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #F70, endColorstr = #C60)"; background-image: -moz-linear-gradient( top, #F70, #C60); background-image: -ms-linear-gradient( top, #F70, #C60); background-image: -o-linear-gradient( top, #F70, #C60); background-image: -webkit-gradient(linear, center top, center bottom, from(#F70), to(#C60)); background-image: -webkit-linear-gradient( top, #F70, #C60); background-image: linear-gradient( top, #F70, #C60);    text-align: center; text-shadow: 0 1px 1px black;}
	.re1{border:1px solid #444;border-bottom-color:#333;border-top-color:#aaa;}
	.re2{border:3px solid #444;border-bottom-color:#333;border-top-color:#aaa;}
 
div.buton{color:#ffffff;background-color:#444444;height:600px;}	
	.button{border:1px solid #444;border-bottom-color:#333;border-top-color:#aaa; -moz-border-radius: 8px;  -webkit-border-radius: 8px;  border-radius: 8px;    -moz-box-shadow: 0 1px 1px #000; -webkit-box-shadow: 0 1px 1px #000; box-shadow: 0 1px 1px #000; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#000000')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#000000');   filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #360303, endColorstr = #851010); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #360303, endColorstr = #851010)"; background-image: -moz-linear-gradient( top, #360303, #851010); background-image: -ms-linear-gradient( top, #360303, #851010); background-image: -o-linear-gradient( top, #360303, #851010); background-image: -webkit-gradient(linear, center top, center bottom, from(#360303), to(#851010)); background-image: -webkit-linear-gradient( top, #360303, #851010); background-image: linear-gradient( top, #360303, #851010);    padding : 5px ; text-align: center; text-shadow: 0 1px 1px black; width:300px;-webkit-transition:all 500ms ;-moz-transition:all 500ms ;-o-transition:all 500ms ;transition:all 500ms ;}
	.button:hover{border:1px solid #444;border-top-color:#333;border-bottom-color:#aaa; -moz-box-shadow: inset 0 1px 2px #000000; -webkit-box-shadow: inset 0 1px 2px #000000; box-shadow: inset 0 1px 2px #000000;   filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #120000, endColorstr = #630000); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #120000, endColorstr = #630000)"; background-image: -moz-linear-gradient( top, #120000, #630000); background-image: -ms-linear-gradient( top, #120000, #630000); background-image: -o-linear-gradient( top, #120000, #630000); background-image: -webkit-gradient(linear, center top, center bottom, from(#120000), to(#630000)); background-image: -webkit-linear-gradient( top, #120000, #630000); background-image: linear-gradient( top, #120000, #630000);    -webkit-transition:all 500ms ;-moz-transition:all 500ms ;-o-transition:all 500ms ;transition:all 500ms ;}
	.alert{-moz-border-radius: 10px;  -webkit-border-radius: 10px;  border-radius: 10px;    -moz-box-shadow: inset 0 0px 2px #000000; -webkit-box-shadow: inset 0 0px 2px #000000; box-shadow: inset 0 0px 2px #000000;   filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #ffe617, endColorstr = #ffc808); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #ffe617, endColorstr = #ffc808)"; background-image: -moz-linear-gradient( top, #ffe617, #ffc808); background-image: -ms-linear-gradient( top, #ffe617, #ffc808); background-image: -o-linear-gradient( top, #ffe617, #ffc808); background-image: -webkit-gradient(linear, center top, center bottom, from(#ffe617), to(#ffc808)); background-image: -webkit-linear-gradient( top, #ffe617, #ffc808); background-image: linear-gradient( top, #ffe617, #ffc808);    padding : 5px ; padding-left : 100px ;    text-shadow:0 0 5px red; width:60%;color:darkred;margin : 0px auto; white-space: pre;white-space: pre-wrap;white-space: pre-line;white-space: -pre-wrap;white-space: -o-pre-wrap;white-space: -moz-pre-wrap;white-space: -hp-pre-wrap;word-wrap: break-word;}
	
 
div.ff {color:#ffffff;background-color:#444444; height:600px;overflow-y:hidden;}
	div.ff p{text-shadow: 0 1px 1px black;}
	.f1{font-family: 'Courier New', Courier, monospace; font-size : 18px;}
	.f2{font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; font-size : 20px;}
	.f3{font-family: 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size : 22px;}
	.f4{font-family: 'Trebuchet MS', Helvetica, sans-serif; font-size : 24px;}
	.f5{font-family: Impact, Charcoal, sans-serif; font-size : 26px;}

div.transitions {color:#ffffff;background-color:#444444; height:700px;overflow-y:hidden;}
	div.transitions p{border:1px solid black;
	-webkit-transition:all 500ms ;-moz-transition:all 500ms ;-o-transition:all 500ms ;transition:all 500ms ;margin : 0px auto; width:100px;background:red;text-align: center; margin-bottom : 5px ; margin-top : 5px ; cursor: pointer; }
	.tra1{}
	.tra1:hover{  -moz-transform:scale(2,2);  -webkit-transform:scale(2,2);  -o-transform:scale(2,2);  transform:scale(2,2);}
	.tra2:hover{  -moz-transform:scaleX(2);  -webkit-transform:scaleX(2);  -o-transform:scaleX(2); scaleX(2);}
	.tra3:hover{  -moz-transform:scaleY(2);  -webkit-transform:scaleY(2);  -o-transform:scaleY(2);  transform:scaleY(2);}
	.tra4:hover{   -moz-transform: translate(50px, 50px); -webkit-transform: translate(50px, 50px); -o-transform: translate(50px, 50px); transform: translate(50px, 50px);}
	.tra5:hover{  -moz-transform:rotate(90deg);  -webkit-transform:rotate(90deg);  -o-transform:rotate(90deg);  transform:rotate(90deg);}
	
	.tra10, .tra20{width:200px!important}
	.tra10:hover{-moz-border-radius: 20px;  -webkit-border-radius: 20px;  border-radius: 20px;       -moz-transform: translate(0px, -5px); -webkit-transform: translate(0px, -5px); -o-transform: translate(0px, -5px); transform: translate(0px, -5px); -moz-box-shadow: 0 5px 5px #000; -webkit-box-shadow: 0 5px 5px #000; box-shadow: 0 5px 5px #000; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#000000')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#000000');  }
	.tra20:hover{-moz-border-radius: 20px;  -webkit-border-radius: 20px;  border-radius: 20px;    -moz-box-shadow: inset 0 2px 3px #000000; -webkit-box-shadow: inset 0 2px 3px #000000; box-shadow: inset 0 2px 3px #000000;     -moz-transform:scale(0.95,0.95);  -webkit-transform:scale(0.95,0.95);  -o-transform:scale(0.95,0.95);  transform:scale(0.95,0.95);}
	.tra30{width:150px!important;height:100px!important; -moz-border-radius: 75px;  -webkit-border-radius: 75px;  border-radius: 75px;    padding-top : 50px ; font-size : 15px;}
	.tra30:hover{background:black!important;  -moz-transform:rotate(180deg);  -webkit-transform:rotate(180deg);  -o-transform:rotate(180deg);  transform:rotate(180deg); opacity: .0;filter: alpha(opacity=0);-ms-filter: "alpha(opacity=0)"; -khtml-opacity: .0; -moz-opacity: .0; }
	.tra40:hover{   -moz-transform: translate(50px, 50px); -webkit-transform: translate(50px, 50px); -o-transform: translate(50px, 50px); transform: translate(50px, 50px);}
	.tra50:hover{  -moz-transform:rotate(90deg);  -webkit-transform:rotate(90deg);  -o-transform:rotate(90deg);  transform:rotate(90deg);}
		

div.desaturation{color:#ffffff;background-color:darkred; height:600px;overflow-y:hidden;}
  div.desaturation img{-webkit-transition:all 1s ;-moz-transition:all 1s ;-o-transition:all 1s ;transition:all 1s ;}
  div.desaturation img:hover{ -webkit-transition:all 1s ;-moz-transition:all 1s ;-o-transition:all 1s ;transition:all 1s ;filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);}
  div.desaturation img.half{filter: grayscale(50%); -webkit-filter: grayscale(50%); -moz-filter: grayscale(50%); -ms-filter: grayscale(50%); -o-filter: grayscale(50%);}
  div.desaturation img.all{filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);}
  
div.sepia{color:#ffffff;background-color:darkred; height:600px;overflow-y:hidden;}
  div.sepia img{-webkit-transition:all 1s ;-moz-transition:all 1s ;-o-transition:all 1s ;transition:all 1s ;}
  div.sepia img:hover{ -webkit-transition:all 1s ;-moz-transition:all 1s ;-o-transition:all 1s ;transition:all 1s ;filter: sepia(100%); -webkit-filter: sepia(100%); -moz-filter: sepia(100%); -ms-filter: sepia(100%); -o-filter: sepia(100%);}
  div.sepia img.half{filter: sepia(50%); -webkit-filter: sepia(50%); -moz-filter: sepia(50%); -ms-filter: sepia(50%); -o-filter: sepia(50%);}
  div.sepia img.all{filter: sepia(100%); -webkit-filter: sepia(100%); -moz-filter: sepia(100%); -ms-filter: sepia(100%); -o-filter: sepia(100%);}
  
div.negative{color:#ffffff;background-color:darkred; height:600px;overflow-y:hidden;}
  div.negative img{-webkit-transition:all 1s ;-moz-transition:all 1s ;-o-transition:all 1s ;transition:all 1s ;}
  div.negative img:hover{ -webkit-transition:all 1s ;-moz-transition:all 1s ;-o-transition:all 1s ;transition:all 1s ;filter: invert(100%); -webkit-filter: invert(100%); -moz-filter: invert(100%); -ms-filter: invert(100%); -o-filter: invert(100%);}
  div.negative img.half{filter: invert(25%); -webkit-filter: invert(25%); -moz-filter: invert(25%); -ms-filter: invert(25%); -o-filter: invert(25%);}
  div.negative img.all{filter: invert(100%); -webkit-filter: invert(100%); -moz-filter: invert(100%); -ms-filter: invert(100%); -o-filter: invert(100%);}

div.blur{color:#ffffff;background-color:darkred; height:600px;overflow-y:hidden;}
  div.blur img{-webkit-transition:all 1s ;-moz-transition:all 1s ;-o-transition:all 1s ;transition:all 1s ;}
  div.blur img:hover{ -webkit-transition:all 1s ;-moz-transition:all 1s ;-o-transition:all 1s ;transition:all 1s ;filter: blur(5px);-webkit-filter: blur(5px); -moz-filter: blur(5px);-ms-filter: blur(5px); -o-filter: blur(5px);}
  div.blur img.half{filter: blur(2px);-webkit-filter: blur(2px); -moz-filter: blur(2px);-ms-filter: blur(2px); -o-filter: blur(2px);}
  div.blur img.all{filter: blur(10px);-webkit-filter: blur(10px); -moz-filter: blur(10px);-ms-filter: blur(10px); -o-filter: blur(10px);}
 
div.functions{height:700px;}
	div.functions p.img1{background-image:url(../logo.png); width:242px; height:246px;}
	div.functions p.img2{background-image:url(../people.jpg); width:200px; height:200px;}
	div.functions li{font-size : 20px; color:#F00}

	div.functions .light{color:#ff8080;}
	div.functions .dark{color:#800000;}
	div.functions .rever{color:#00ff00;}
	div.functions .button1{background-color:#800000;color:#ff8080; margin : 20px ; padding : 20px ; -moz-border-radius: 5px;  -webkit-border-radius: 5px;  border-radius: 5px;    -moz-box-shadow: 0 1px 2px #000; -webkit-box-shadow: 0 1px 2px #000; box-shadow: 0 1px 2px #000; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#000000')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#000000');   border:1px solid #444;border-bottom-color:#333;border-top-color:#aaa; text-align: center; width:100px; -webkit-transition:all 1s ;-moz-transition:all 1s ;-o-transition:all 1s ;transition:all 1s ;}
	div.functions .button1:hover{ background-color:#00ff00;color:#008000; -webkit-transition:all 1s ;-moz-transition:all 1s ;-o-transition:all 1s ;transition:all 1s ;}
	div.functions .button2{background-color:#000080;color:#8080ff; margin : 20px ; padding : 20px ; -moz-border-radius: 5px;  -webkit-border-radius: 5px;  border-radius: 5px;    -moz-box-shadow: 0 1px 2px #000; -webkit-box-shadow: 0 1px 2px #000; box-shadow: 0 1px 2px #000; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#000000')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#000000');   border:1px solid #444;border-bottom-color:#333;border-top-color:#aaa; text-align: center; width:100px;-webkit-transition:all 1s ;-moz-transition:all 1s ;-o-transition:all 1s ;transition:all 1s ;}
	div.functions .button2:hover{ background-color:#ff0000;color:#800000; -webkit-transition:all 1s ;-moz-transition:all 1s ;-o-transition:all 1s ;transition:all 1s ;}