@charset "utf-8";
/* CSS Document */

body {
	font: 100%/1.4 "xDroid Sans", Verdana, Arial, Helvetica, sans-serif;
	color: #2F3E4B;
	xcolor: #444;
	background: #068 url(../img/bg/body_3c.gif) repeat-x fixed;
	}
#wrapper {
	background: #FFFAE5;
	box-shadow: 2px 2px 2px #123;
	border: 1px solid #135;
	border-radius: 12px;
	}
header {
	xbackground: #FFF5CC;
	xborder: 1px solid #40b3d9;
	xborder: 1px solid #ffe57f;
	xborder-radius: 12px;
	}
h1, h2, h3, h4 {
	font-family: "xDroid Serif", Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	text-shadow: 1px 1px 1px #ccc;
	color: #345;
	color: #068;
	}
h1 {
	clear: left;
	text-align: center;
	padding-top: 30px;
	}
h2 {
	border-top: 1px solid #ccc;
	margin: 1.5em 0 .5em; padding-top: .5em;
	}
a{
	text-decoration: none;
	color: #09c;
	}
a:hover{
	text-decoration: underline;
	}
a:active{
	position: relative; top: 1px;
	}
img {
	box-shadow: 2px 2px 2px #aaa;
	border: 1px solid #ccc;
	border: 2px solid #fff;
	border-radius: 6px;
	}
/* ------ Main navigation ------- */
nav ul {
	padding-left: 0;
	}
nav ul li{ 
	display: block; width: 50%;
	float: left;
	list-style: none;
	}
nav ul a{ 
	display: block;
	xfont-weight: bold;
	text-shadow: 1px 1px 1px #999;
	xbackground: #FFF5CC;
   background-color: #FFF5CC;
   background-image: url(images/fallback-gradient.png);
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFAE5), to(#FFF5CC));
   background-image: -webkit-linear-gradient(top, #FFFAE5, #FFF5CC);
   background-image:    -moz-linear-gradient(top, #FFFAE5, #FFF5CC);
   background-image:     -ms-linear-gradient(top, #FFFAE5, #FFF5CC);
   background-image:      -o-linear-gradient(top, #FFFAE5, #FFF5CC);
	box-shadow: 1px 1px 1px #ccc;
	border: 1px solid #FFE57F;
	border-radius: 6px;
	margin: 2px; padding: 12px;
	}
nav ul a:active, nav ul a:hover { 
	text-decoration: none;
	background: #FFFAE5;
	background: #FFe;
	}
/* ------ other ------- */
.gradient-bg {
   background-color: #FFF5CC;
   background-image: url(images/fallback-gradient.png);
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFAE5), to(#FFF5CC));
   background-image: -webkit-linear-gradient(top, #FFFAE5, #FFF5CC);
   background-image:    -moz-linear-gradient(top, #FFFAE5, #FFF5CC);
   background-image:     -ms-linear-gradient(top, #FFFAE5, #FFF5CC);
   background-image:      -o-linear-gradient(top, #FFFAE5, #FFF5CC);
}
ins {
	background: #ffd;
	text-decoration: none;
	}
.comment {
	background: #ffc;
	}
.vers {
	text-align: right;
	color: #c00;
	}

/* ------------ Responsive Web Design ------------- */
#wrapper {
	width: 700px; max-width: 700px;
	margin: 30px auto; padding: 20px 90px 60px;
	}

/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

    @media only screen and (min-width: 768px) and (max-width: 959px) {
        #wrapper { 
			width: 600px; 
			margin: 0px auto; padding: 30px 5%;
			width: 80%; 
			margin: 10px auto; padding: 0 10% 30px;}
		nav ul {
			padding-left: 0;
			}
        nav ul a{ 
			display: block;
   background-color: #FFF5CC;
   background-image: url(images/fallback-gradient.png);
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFAE5), to(#FFF5CC));
   background-image: -webkit-linear-gradient(top, #FFFAE5, #FFF5CC);
   background-image:    -moz-linear-gradient(top, #FFFAE5, #FFF5CC);
   background-image:     -ms-linear-gradient(top, #FFFAE5, #FFF5CC);
   background-image:      -o-linear-gradient(top, #FFFAE5, #FFF5CC);
			box-shadow: 1px 1px 1px #ccc;
			border: 1px solid #FFE57F;
			border-radius: 6px;
			margin: 2px; padding: 12px;}
    }


/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 767px) {
        #wrapper { 
			width: 300px; 
			margin: 0px auto; padding: 20px 3%;
			width: 90%; 
			margin: 10px auto; padding: 0 5% 20px;}
		nav ul {
			padding-left: 0;
			}
        nav ul li{ 
			width: 100%;
			float: none;
			}
        nav ul a{ 
			display: block;
   background-color: #FFF5CC;
   background-image: url(images/fallback-gradient.png);
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFAE5), to(#FFF5CC));
   background-image: -webkit-linear-gradient(top, #FFFAE5, #FFF5CC);
   background-image:    -moz-linear-gradient(top, #FFFAE5, #FFF5CC);
   background-image:     -ms-linear-gradient(top, #FFFAE5, #FFF5CC);
   background-image:      -o-linear-gradient(top, #FFFAE5, #FFF5CC);
			box-shadow: 1px 1px 1px #ccc;
			border: 1px solid #FFE57F;
			border-radius: 6px;
			margin: 2px; padding: 12px;}
    }


/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        #wrapper { 
			width: 420px; 
			margin: 0px auto; padding: 20px 3%;
			width: 90%; 
			margin: 10px auto; padding: 0 3% 10px; }
		nav ul {
			padding-left: 0;
			}
        nav ul a{ 
			display: block;
   background-color: #FFF5CC;
   background-image: url(images/fallback-gradient.png);
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFAE5), to(#FFF5CC));
   background-image: -webkit-linear-gradient(top, #FFFAE5, #FFF5CC);
   background-image:    -moz-linear-gradient(top, #FFFAE5, #FFF5CC);
   background-image:     -ms-linear-gradient(top, #FFFAE5, #FFF5CC);
   background-image:      -o-linear-gradient(top, #FFFAE5, #FFF5CC);
			box-shadow: 1px 1px 1px #ccc;
			border: 1px solid #FFE57F;
			border-radius: 6px;
			margin: 2px; padding: 12px;}
    }