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.007699s 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 ;}

Native auto_css syntax

Only css no javascript

Gradient demo

Text effects demo

change cursor demo

box shadows demo

box halos demo

opacity demo

Round corners demo

Box emboss/relief

Other round corners demo

A 2 lines button demo

A 1 line alertbox demo

font family & size

Functions in css comments -1-

Functions in css comments -2-

Button with hover reversed color

transitions (CSS3 only)

transitall 1

desaturation (experimental, works on Chrome)

desaturation (experimental, works on Chrome)

sepia (experimental, works on Chrome)

negative (experimental, works on Chrome)

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)

computed css content (computed_css.css)

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