@charset "UTF-8";

/*
-----------------------------------------------------
CSS file:	for screen media
FileName:	main.css
developer_url:	http://class-design.com/
Version:	2009.06.04
-----------------------------------------------------
*/

html {
	color: #000;
	background: #FFF url("/class/img/bg.gif") repeat 0 0;
}

body {	
	font-size: 70%;
	line-height: 1.2;
}

h1 {
	margin: 150px 0 50px 157px;
}

p, h2, address {
	margin: 10px 0 0 195px;
}

/* Vanity
----------------------------------------------------*/

#vanity {
	margin: 100px 0 100px 200px;
}

#vanity li {
	margin: 30px 0;
}

#vanity a {
	display:block;
	width:57px;
	height:20px;
	text-indent: -7777px;
}

#vanity li.php a {	background: url(/class/img/powered-php.gif);}
#vanity li.php a:hover {	background: url(/class/img/h_powered-php.gif);}

#vanity li.mysql a {	background: url(/class/img/powered-mysql.gif);}
#vanity li.mysql a:hover {	background: url(/class/img/h_powered-mysql.gif);}

#vanity li.xhtml a {	background: url(/class/img/valid-xhtml10.gif);}
#vanity li.xhtml a:hover {	background: url(/class/img/h_valid-xhtml10.gif);}

#vanity li.css a {	background: url(/class/img/valid-css.gif);}
#vanity li.css a:hover {	background: url(/class/img/h_valid-css.gif);}



/* CMS
----------------------------------------------------*/

#cms-title {
	z-index: 999;
	position: fixed;
	bottom: 5px;
	left: 5px;
	color: #777;
	background: transparent;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 0.1em;
}

#cms {
	z-index: 777;
	position: fixed;
	bottom: -170px;
	left: -95%;
	width: 100%;
	height: 200px;
	background: #700 url(/class/img/bg-cms.png) repeat 0 0;
	font-weight: bold;
	text-align: center;
}

#cms:hover {
	position: fixed;
	bottom: 0;
	left: 0;
	background: transparent url(/class/img/bg-cms.png) repeat 0 0;
}

#cms ul {
	margin: 20px 100px 0 20px;
}

#cms li {
	float: left;
	margin: 0 10px 10px 0;
}

#cms li a {
	display: block;
	text-indent: -7777px;
}

#cms li.mt a {	width: 88px; height: 66px; background: url("/class/img/mt.png") no-repeat 0 0;}
#cms li.wp a {	width: 145px; height: 45px; background: url("/class/img/wp.png") no-repeat 0 0;}
#cms li.nc a {	width: 145px; height: 45px; background: url("/class/img/nc.png") no-repeat 0 0;}
#cms li.xo a {	width: 120px; height: 60px; background: url("/class/img/xo.png") no-repeat 0 0;}
#cms li.ec a {	width: 70px; height: 70px; background: url("/class/img/ec.png") no-repeat 0 0;}
#cms li.ga a {	width: 120px; height: 45px; background: url("/class/img/ga.png") no-repeat 0 0;}
#cms li.cm a {	width: 145px; height: 45px; background: url("/class/img/cm.png") no-repeat 0 0;}
#cms li.pw a {	width: 88px; height: 31px; background: url("/class/img/pw.png") no-repeat 0 0;}

#cms li.mt a:hover {	width: 88px; height: 66px; background: url("/class/img/mt.png") no-repeat 0 -66px;}
#cms li.wp a:hover {	width: 145px; height: 45px; background: url("/class/img/wp.png") no-repeat 0 -45px;}
#cms li.nc a:hover {	width: 145px; height: 45px; background: url("/class/img/nc.png") no-repeat 0 -45px;}
#cms li.xo a:hover {	width: 120px; height: 60px; background: url("/class/img/xo.png") no-repeat 0 -60px;}
#cms li.ec a:hover {	width: 70px; height: 70px; background: url("/class/img/ec.png") no-repeat 0 -70px;}
#cms li.ga a:hover {	width: 120px; height: 45px; background: url("/class/img/ga.png") no-repeat 0 -45px;}
#cms li.cm a:hover {	width: 145px; height: 45px; background: url("/class/img/cm.png") no-repeat 0 -45px;}
#cms li.pw a:hover {	width: 88px; height: 31px; background: url("/class/img/pw.png") no-repeat 0 -31px;}