/* 
	Plugin dml-define
	Define una variable y la sustituye por su valor 
	Ejemplo: define(gris) -> #808080
*/
@define {
	rosa: #d8327b;
	gris: #808080;
}

/* 
	Plugin dml-color
	Consigue el color complementario y sus matices, tambien una escala de grises
	Valores entre el 0 al 10, siendo 0 blanco y 10 negro
	Ejemplo: 
		@colors {
			id_color : color_principal;
			id_otro	 : color_principal;
		}
	Sustitucion:
		colors:idcolor("tipo_color","valor del 0 al 10");
	Tipos: 
		mc: maincolor				colors:id_color("mc","5");
		sc: secondolor				colors:id_color("sc","10");
		ms: maincolor_secondcolor	colors:id_color("msr","6");
		wb: white_black				colors:id_color("wb","8");
*/
@colors {
	main: #d8327b;
}

/* Cuerpo
------------------------------------------------------------*/
body ,.example {
	margin: 0;
	padding: 0;
	background-color:#fff;
	background-image: url(images/display.gif);
	background-repeat: no-repeat;
	background-position: 30px 70px;
	font:11px/18px "Trebuchet MS", Tahoma, Verdana, Helvetica, sans-serif;
	text-align: justify;
	color: define(gris);
}

/* Cabecera
------------------------------------------------------------*/
#header {
	background-image: url(images/header.gif);
	background-repeat: repeat-x;
	height: 42px;
}

#header h1{
	margin: 0;
}

#header a {
	display: block;
	width: 150px;
	height:41px;
	background-image: url(images/logo.gif);
}

span {
	display:none;
}

/* Titulos
------------------------------------------------------------*/
H2:before {
    display: block;
    text-align: left;
    font-size:10px;
    content: "Example Cssing";
}

/* 
	Plugin dml-navigator
	Pseudoclass que se aplica segun el navegador
	Navegadores: opera, safari, konqueror, mozilla e ie
	Para "ie" esta disponible algunas versiones: 6, 5.5, 4 y 3
	Ejemplo: h2:ie("6","5.5") {}
*/
h2:safari {
	color: define(gris);
}

/* Contenedor
------------------------------------------------------------*/
#content {
	margin:10px 50px 0px 200px;
	padding:5px;
}

/* 
	Plugin dml-input
	Escribe en un campo input el valor indicado
	El selector debe ser una id
*/
#nick:input("CSSing 1.0") {
	color: colors:main("mc","3");
}

/* 
	Plugin dml-onmouseover
	Cambia la clase de un div cuando el raton se encuentra
	en ella.
	El selector debe comenzar con div.
*/
div.content {
	color: define(gris);
}

div.content:onmouseover, a {
	color: define(rosa); 
}

/* 
	Plugin dml-colors
	Ejemplo de sustitucion de colores
*/
li.maincolor {
	color: colors:main("mc","5");
}

li.secondcolor {
	color: colors:main("sc","5");
}

li.maincolor_secondcolor {
	color: colors:main("ms","7");
}

li.white_black {
	color: colors:main("wb","8");
}