html,

body {
height: 100%;

}
img {max-width: 100%;
    height: auto;
}
.nav {
display: inline;
	line-height: 35px;
	list-style:none;
	margin: 0 5px;
font-size: 1.2em;
}
.nav .icon {
  display: none;
}
#facebook {
float: right;
padding-right: 10px;

}

.cart {
vertical-align: text-top;
}
.download {
float: right;
padding-right: 10px;
}
.logo {
margin-top: 20px;
width: inherit;
margin-left: auto;
}
.nav a{
	/* This generators the gradient on top of the solid color */
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0, rgba(255,255,255,.5)),
		color-stop(1, rgba(0,0,0,.1))
	);
	background-image: -moz-linear-gradient(
		center top,
		rgba(255,255,255,.5) 0%,
		rgba(0,0,0,.1) 100%
	);
	color: #f4f4f4; /* IE */
	color: rgba(255, 255, 255, 0.8);
	font: bold 18px "Myriad Pro","Lucida Grande",Helvetica,Arial,sans-serif;		
	outline:none;
	padding: 5px 15px;
	text-decoration: none;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px; 
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
	-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
	-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);	
}
.nav a:active {
		background-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0,rgba(255,255,255,.5)),
			color-stop(.1,rgba(255,255,255,.2)),
			color-stop(.85, rgba(0,0,0,.2)),
			color-stop(100, rgba(0,0,0,.4))
		);
		background-image: -moz-linear-gradient(
			center bottom,
			rgba(255,255,255,.5) 0%,
			rgba(255,255,255,.2) 10%,
			rgba(0,0,0,.2) 85%,
			rgba(0,0,0,.4) 100%
		);
	}
/* Dark Text */
.nav a.dark {
	color: #333; /* IE */
	color: rgba(0, 0, 0, 0.8);
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
}
/*********** COLORS *************/
/* Create your own class for your own colors */
.red {
	background: #B80202;
	border: #B80202 1px solid
}
	.red:hover, .red:focus{
		background-color:#e30606
	}
.green {
	background: #46c431;
	border: #46c431 1px solid
}
	.green:hover,.green:focus {
		background-color:#44e329
	}
.yellow {
	background: #D9CE1C;
	border: #D9CE1C 1px solid
}
	.yellow:hover,.yellow:focus {
		background-color:#eee117
	}
.cyan {
	background: #23c6de;
	border: #23c6de 1px solid
}
	.cyan:hover,.cyan:focus {
		background-color:#18d8f4;
		cursor: pointer;
	}
.blue {
	background: #3271d9;
	border: #3271d9 1px solid
}
	.blue:hover,.blue:focus {
		background-color:#377ef2
	}

.wrapper {
width: 860px;
margin: auto;
min-height: 100%;
}

footer {
clear: both;
width: auto;
margin: 0px auto;
margin-top: -60px;
position: relative;
z-index: 10;
height: 40px;
font-size: 0.5em;
text-align: right;
}

#content {
float: left;
padding: 10px;
font-family: Tahoma,Helvetica,Arial,'宋体',sans-serif;
padding-bottom: 40px;
width: 95%;
}

#menu {
float: right;
top: 10em;
padding-left: 1em;
width: 20%;
border-left: 1px dotted grey;
background-color: #b0c4de;
font-family: Tahoma,Helvetica,Arial,'宋体',sans-serif;
}

.value li {
list-style-type: square;
}
.contact span
{font-style: italic;
color: blue;
}
#font {
padding-top: 180px;
color: blue;
font-size: 1.2em;
}

.tables TD {
WIDTH: 300px;
HEIGHT:250px;
text-align: center;
vertical-align: top;
}

.tables a{
text-decoration: none;
}


#myhouse {
cursor: pointer;
}

.problem {
margin-right: 2em;
text-align: right;
}
.problem ul {
list-style: none;
}
.problem li:before {
content: "\003F";
}

.offer ul {
list-style: none;
}
.offer li:before {
content: "\00BB";
}
.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #18d8f4;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidebar a:hover {
  color: #f1f1f1;
}

.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}