@charset "UTF-8";

@font-face{
    font-family:roboto-300;
    src:url(../fonts/Roboto-Light.ttf);   /* !!!!! LOOOK AT THE FONTS !!!!!!*/
	font-weight:300;
}
@font-face{
	font-family:roboto-400;
	src:url(../fonts/Roboto-Regular.ttf);
	font-weight:400;
}
/*@font-face{
	font-family:roboto-100;
	src:url(../fonts/Roboto-Thin.ttf);
	font-weight:100;}*/
@font-face{
	font-family:roboto-slab;
	src:url(../fonts/RobotoSlab-Thin.ttf);}
@font-face{
	font-family:imitation_song;
	src:url(../fonts/RicSungNew.ttf)}
@font-face{ font-family:neuton; src:url(../fonts/Neuton-Light.ttf);}

img, object, embed, video {
	max-width: 100%;
	float:left;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}
body{height:100%; color:#333333;}
html{height:100%;}
* {padding:0; margin:0;}

.italics{font-style:italic;}
.small{font-size:85%;}

a:hover  { outline:0;text-decoration:none;color:#0000ff}
a:focus { outline:0; background-color:#FFFF00; color:#000000;}
a:active:focus{outline:0; background-color:#ffffff; color:#0000ff;}
a, visited {text-decoration:underline; color:#333;}

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}



/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		10;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

/* Mobile Layout: 480px and below. */

.gridContainer {
	height:auto !important;
	margin: 0 auto;
	width: 100%;
	min-height:100%;
	min-width:320px;
}
#header {
	clear: both;
	float: left;
	width: 100%;
	display: block;
	background:url(../images/summer.jpg) no-repeat;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.buffer{}
.fiveelement_co_uk{margin:2% 0%; min-width:320px;}
.centre{margin:0 auto;max-width:1024px;min-width:320px;}

#menu {
	clear: both;
	float: left;
	width: 100%;
	display: block;
	margin: 0;
	background-color:rgba(50,50,50,.5);
	font-family:roboto-400;
}

#menu ul{text-align:center; width:100%; font-size:0;}
#menu li{list-style:none; list-style-type:none; display:inline; }
#menu li a{
	float: left;
	text-transform: lowercase;
	font-size: 16px;
	display: block;
	width: 25%;
	overflow: hidden;
}
#menu a:hover {color:#333333; background:rgb(255,255,255); background-color:rgba(255,255,255,1); text-decoration:none;}
#menu a:active:focus {color:#333333; outline:none;background:rgb(255,255,255);background-color:rgba(255,255,255,1);}
#menu a, visited{color:#ffffff; text-shadow:none; font-size:20px; text-decoration:none}
#menu a:focus{color:#000000;background:rgb(255,255,0);background-color:rgba(255,255,0,1);}

.window{height:100px;width:100px;float:left;margin:3% 0 0 3%;display:inline; position:relative;}

#welcome_page .welcome_page a {color:#333333; background:rgb(255,255,255); background-color:rgba(255,255,255,1);}


.stretch{
		-webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;}

.welcome{background-image:url(../images/welcome.jpg);}
.treatment{background-image:url(../images/treatment.jpg);}
.massage{background-image:url(../images/massage.jpg);}
.location{background-image:url(../images/clinic_room_6.jpg);}
.five_element_tx{background-image:url(../images/five_element_tx.jpg);}
.huangdi{background-image:url(../images/huangdi.jpg);}
.links{background-image:url(../images/links.jpg);}
.contact{background-image:url(../images/more_info.jpg);}

.bibliography{ background-image:url(../images/chart.jpg);}

.biblography{font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;}/* to edit !!!!! ************************************/


		.compendium{font-family:neuton;}
	

		.chinese_character{font-family:imitation_song; font-size:150%;}
		.chinese_character a:hover{text-decoration:none; color:#000;}
		.chinese_character a:active:focus{ text-decoration:none}
		.chinese_character a, visited{ text-decoration:none;}

h1{	font-size:18px; margin:3%;
	text-transform:lowercase;
	font-weight:normal;}
h2{	font-size:15px; margin:3%;	
	text-transform:lowercase;
	font-weight:normal;}
h3{	font-size:15px; margin:2% 3.5%;
	text-transform:lowercase;
	font-weight:normal;}
p{	font-size:14px; margin:3%;
	font-weight:300;}
.list{margin:0 0 0 5%}


#more_content {
	overflow:auto;
	clear: both;
	float: left;
	margin:0 0 10px 0;
	width: 100%;
	display: block;}	
	
.water{color:#0000FF}
.wood{color:#00FF00}
.fire{color:#FF0000}
.earth{color:#FFFF00}

.green{
	background:none;
	background-color:rgba(184,236,60,.1);
}
.box{
	border-top:solid thin rgb(50,50,50);
	border-bottom:solid thin rgb(50,50,50);
	padding: 0;
	margin:2% 0 0 0;
}
.adr{display:block;}
.button{vertical-align:bottom;}
.p-honorific-suffix, .honorificSuffix{font-size:70%}
.indications{margin:0% 4%; list-style:none; list-style-type:none; font-size:12px; font-weight:300;}
.map{width:100%; height:300px;}
.success {margin:3%}
.button{ position:relative; bottom:0px;}
.cover_map{
   background:transparent; 
   position:relative; 
   width:100%;
   height:300px; /* your iframe height */
   top:300px;  /* your iframe height */
   margin-top:-300px;  /* your iframe height */
}
.notes{font-size:88%; display:block; margin:3%;}
.strong{ font-weight:bold}

#cloud_wrapper{width:100%;float:left;padding:1% 0;margin:0px 0 30px 0;}
#info_menu{width:96%;margin:0%;float:left; text-align:justify;padding:1% 2%}

.wrd{text-transform:lowercase;}
.wrd a{padding:1%;line-height:20px;text-decoration:none}
.wrd a:hover{ text-decoration:none;}

.tagcloud0 a:hover{color:#FFFFFF;background:#FF7600} 
.tagcloud1 {color:#0000FF} 
.tagcloud2 a{color:#00FF00;}
.tagcloud3{font-size:1.7em;color:#FF0000;z-index:7}.tagcloud3 a{color:#FF0000}
.tagcloud4{font-size:1em;color:#E5E5E5;z-index:6}.tagcloud4 a{color:#039FAF;}
.tagcloud5{font-size:1em;color:#FFFF00;z-index:5}.tagcloud5 a{color:#607EC5}
.tagcloud6{font-size:1em;color:#99E03C;z-index:4}.tagcloud6 a{color:#99E03C}
.tagcloud7{font-size:1.4em;color:#00FF33;z-index:3}.tagcloud7 a{color:##133B97}
.tagcloud8{font-size:1.2em;color:#FF1100;z-index:2}.tagcloud8 a{color:#FF1100}
.tagcloud9{font-size:1.1em;color:#133B97;z-index:1}.tagcloud9 a{color:#133B97}
.tagcloud10{font-size:1.1em;color:#f82432;z-index:0}.tagcloud10 a{color:#f82432}

#foot{float:left;margin:-30px auto;height:30px;width:100%;clear:both;color:#fff; min-width:320px;position:relative;font-size:12px;font-weight:100; font-family:roboto-300;}

#foot ul {list-style:none; list-style-type:none;float:right; width:100%;background-color:rgba(0,0,0,1); height:30px; line-height:17px;}
#foot a{color:#fff; text-decoration:none; }
#foot a:hover{outline:none; text-decoration:none; color:#00FF00;}
#foot a:focus{background:rgb(255,255,0); background-color:rgba(255,255,0,1); color:#333333;}
#foot a:active:focus{text-shadow:none;background:rgb(0,255,0); background-color:rgba(0,255,0,1);}
#foot a{}

.show_phone{ display:inline; visibility:visible;}
.left{ float:left;line-height:30px; padding:0 0 0 .5%;}
.right{ float:right;padding:5px 1% 0 1%;}
.icons{padding:0 0 0 1.5%}

.hide_mobile{display:none; visibility:hidden;}
.show_mobile{display:block; visibility:visible;}


/* Tablet Layout: 481px to 800px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 480px) {
.gridContainer {
	width: 100%;
	padding-left: 0%;
	padding-right: 0%;
}
#header {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
.buffer{}
.fiveelement_co_uk{max-width:460px;margin:3% 2%;}
#menu {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#menu ul{width:100%;}
#menu li a {
	font-size: 21px;
	width: 25%;
	font-weight: 300;
}

h1{ font-size: 21px; margin:0 3%; font-weight:normal;}
h2{	font-size:18px; margin:3%; font-weight:normal;}
h3{	font-size:18px; margin:3%; font-weight:normal;}
p{ font-size:16px;margin:3%; }


.window {margin:6% 0 3% 5%;}

#more_content {	
	clear: both;
	float: right;
	display: block;
	width: 96%;
	margin:2% 2% 20px 2%;
}

.page_title{display:block;margin: 0; }
.content{display:block; margin-top:4%;}
.green{background:none; background-color:rgba(184,236,60,.1)}
.box{border: thin solid rgb(50,50,50);padding:0; margin:0 0 20px 0;}

table{
	width: 100%;
	margin: 30px 0 20px 0;
	border-top: solid thin rgb(50,50,50);
}
th{ font-size:14px; font-weight:300;}
td{ font-size:13px; font-weight:300;}


#cloud_wrapper{width:100%; margin:0px 0 50px 0; padding:0}
#info_menu{width:92%;margin:0 2%; padding:1%;text-align:justify;}

.wrd{}
.wrd a{text-decoration:none; line-height:30px}

#foot{ font-size:14px; line-height:30px}


.hide_mobile{display:inline; visibility:visible;}
.show_phone{display:none; visibility:hidden;}

.left{padding:0 .5%}
.right{padding:5px 2% 0 0;}
.tel{padding:0 .5% 0 3%}

}

/* Desktop Layout: 801px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 800px) {

.gridContainer {
	width: 100%;
	padding-left: 0%;
	padding-right: 0%;
}
#header {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
.buffer{}	
.fiveelement_co_uk{max-width:480px; margin:3% 2%}

#menu {clear: both;margin-left: 0;width: 100%;display: block;}
#menu ul {float:right; width:80%; text-align:left;}
#menu li a {	padding:0% 0 0 2%; width:23%;font-size:23px;line-height:25px;}

#more_content{display:inline;clear:none; float:right; width:70%; margin:5% 10% 60px 0%;}

.window{margin:5% 0 5% 5%;height:100px;width:100px;}
.page_title{ width:100%; height:100px;position:relative; margin:0;}
.content{margin-top:8%}

h1{
	margin: 0%;
	font-size: 23px;
	position: absolute;
	bottom: 0;
	left: 2%;
}
h2{font-size:18px;margin:2%;}
h3{	font-size:18px; margin:2%;}
p{	font-size:16px;	margin:3% 2%;}

.success {margin:2%}
.notes{ margin:2%;}

table{margin:0 0 0 0;}
th{font-size:16px;}
td{font-size:15px;}

#cloud_wrapper{width:20%;float:left;padding:0; margin:0;border:none;}
#info_menu{width: 150px;margin: 0% 0% 60px 0%;float: left;padding: 0;text-align: right}

.wrd{font-size:14px;z-index:0; width:100%; float:left; white-space:nowrap;}
.wrd a{color:#333333; padding: 0 4% 0 0% ; display:block;}
.wrd a:hover{background:none; color:#333333; text-decoration:underline;}

#foot{margin:-30px 0 0 0; }
#foot ul{}

.right{ padding:5px 1% 0 0;}
.tel{padding:0 .5% 0 2%}

.zeroMargin_desktop {margin-left: 0;}

.map{width:100%; height:500px;}
.cover_map{height:500px; top:500px; margin-top:-500px;}
}

@media only screen and (min-width:1025px) {   

.gridContainer{
	max-width:1024px;
}
.buffer{}
.fiveelement_co_uk{margin:3% 2%}

#menu ul{width:75%;}

.window {
	height: 150px;
	width: 150px;
	margin-top: 10%;
	margin-right: 0%;
	margin-left: 5%;
	float: left;
	clear: both;
	margin-bottom: 5%;
}

.white{bottom: 10px;left:15px;font-size:14px;}

#more_content{margin:10% 0 90px 0%; width:75%;}
.page_title{ width:85%; height:150px;position:relative;}
.content{margin-top:7%; width:85%;}

.indications{margin:0% 4%; list-style:none; list-style-type:none; font-size:16px; font-weight:300;}
.box{margin:2% 0 20px 0}

h1{
	margin: 0%;
	text-align: left;
	width: auto;
	right: auto;
}
h2{margin:3% 2%;}

p{margin:2%;}

#cloud_wrapper{width:25%;float:left;margin:0 0 90px 0;}
#info_menu{width: 165px;float: left;	margin: 0 0 30px 45px;padding: 0;text-align: right;background: none;background-color: rgba(184,236,60, 0);}

.wrd { width:100%}
.wrd a{padding: 0 5% 0 0;}

#foot{margin:-30px 0 0 0; height:30px;}
#foot ul{}
#foot ul a {}

.tel{padding:0 .5% 0 1.3%}
}
@media only screen and (min-width:1700px) {   
.fiveelement_co_uk{margin:2%}
}