@import url(http://fonts.googleapis.com/css?family=Kaushan+Script); /*logo*/
@import url(http://fonts.googleapis.com/css?family=Niconne);

/*css-reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*================================<end of css-reset>=====================================*/



/*global*/
html	{overflow-y: scroll;}     /*always show a scroll bar to solve the squeeze problem */ 

.clear	{clear:both;}
					

html,body					{height:100%;}
					
#top-wrapper				{background-color:#242424;}
#top						{width:1000px; margin:auto;}
#top a                      {color:inherit; text-decoration:inherit; }
#page-wrapper				{background-color:#FFFBF5;}
#content					{width:1000px; margin:auto; background-color:#FFFBF5;overflow:hidden; position:relative;}/*"overflow:auto" solves the problem that background disappears when using float*/
#foot-wrapper				{height:60px; background-color:#c2b7a2;}
#footer						{width:1000px; margin:auto; position:relative;}
#footer p					{color:#3D423C;}

/*wrapper for sticky footer*/ /* http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ */
.wrapper 					{min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -60px; background-color:#FFFBF5;}
.push 						{height: 60px;}		

#top						{overflow:hidden; background-color:#242424;}
#top h1						{padding-top:18px; margin-bottom:10px; color:#f3ebd9; font-family:"Kaushan Script";font-size:42px;}
#menu						{font-family:"Courier New", Courier, monospace;}
#menu ul					{float:right;}
#menu ul li					{display:inline; }
#menu ul li a				{text-decoration:none; color:#CCCCCC; float:left; padding:0 10px; border-radius:7px;transition:background-color 0.5s ease;}
#menu ul li a:hover			{background-color:#f3ebd9; color:#242424;}
.active a					{background-color:#f3ebd9; color:#242424!important;}



#footer						{overflow:hidden;clear:both; background-color:#c2b7a2; padding-top:5px;}
#footer p					{font-size:18px;;}
.copyright					{float:left;}
.social						{float:right;}
#footer ul					{clear:both; float:right; margin-top:5px;}	
#footer ul li				{display:inline; margin-left:1px;}
.social-icon				{width:24px; height:24px;}




/*home-page*/
.home-welcome							{width:200px; margin:30px 0px 10px 0px; font-size:48px; font-family:Niconne;}
#home-welcome-text						{line-height:1.5em; text-align:justify; font-size:20px; margin:30px 10px 30px 0px; font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif}
#home-three-blocks						{margin-top:80px; padding-left:60px;}
.home-block-img							{margin:auto; width:200px; height:200px;border-radius:100%;}
.home-block-img:hover					{-webkit-box-shadow: 0 0 8px #FFD700; -moz-box-shadow: 0 0 8px #FFD700; box-shadow: 0 0 8px #FFD700;cursor:pointer;}

#home-block1,#home-block2,#home-block3	{width:30%; float:left; margin-left:25px;}		
#home-three-blocks a					{text-decoration:none; color:#808080; transition:color 0.5s ease}
#home-three-blocks h4 a:hover			{color:#996633;}	

	
#h4-1									{margin-left:25px; margin-top:10px;font-size:28px; font-family:Niconne;}
#h4-2									{margin-top:10px;font-size:28px; font-family:Niconne; text-align:center; margin-left:-80px;}
#h4-3									{margin-top:10px;font-size:28px; font-family:Niconne;}
	

#explore-gallery						{width:300px; margin:200px 0px 0px 40px; font-size:56px;line-height:1em; float:left; clear:both;font-family:Niconne;}
#explore-gallery a						{text-decoration:none;color:black; transition:color 0.5s ease}
#explore-gallery a:hover				{color:#996633; }
#the-gallery							{font-size:42px; display:inline;}
							
#slideshow								{margin:110px 5px 0px 0px; float:right;}

#slideshow { 
    position: relative; 
    width: 540px; 
    height: 320px; 
    padding: 10px; 	 
}
#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.4); 
}


/*about-page*/
.about-header				{margin-top:30px; font-size:xx-large; position:relative;}
.about-p span				{font-size:x-large;}
.about-p					{margin-top:20px;width:60%; line-height:1.5em;font-size:20px; text-align:justify;}
.about-img					{margin:70px 0px 0px 70px; opacity:0.9; border: 2px black solid; float:right; width:300px; height:400px;} 


/*class-page*/
.class-header					{margin-top:30px; font-size:xx-large;}
.class-p						{margin-top:20px; line-height:1.5em;font-size:20px; text-align:justify;}
.class-p1						{margin-top:20px; line-height:1.5em;font-size:20px; text-align:justify;}



/*gallery-page*/
.tags							{position:relative;}	
.tags p							{position:absolute; top:-20px; width:25%; display:inline-block; text-align:center; font-family:Niconne; font-size:16px;}
#yings-paintings				{margin-top:30px;}
#yings-paintings p				{}
.year							{padding:0 20px;border-bottom:1px #888888 solid; font-size:x-large;}		
#yings-paintings ul				{padding:30px;}
#yings-paintings ul li			{display:inline; padding:10px; margin-left:10px;}	
#ying-paintings-2014			{padding:5px; clear :right;}
#yings-paintings img   			{padding:5px; border:1px #888888 solid;}


/*service-page*/
.service-header					{margin-top:30px; font-size:xx-large;}
.service-header span			{font-size:large;}

#price-chart					{margin:30px 0px 0px 810px;   box-shadow: 0 0 10px rgba(0,0,0,0.4); font-family:Arial, Helvetica, sans-serif; }
#price-chart td					{padding:5px 10px 5px 10px;}
#price-chart th					{padding:5px 10px 5px 12px; text-align:left; letter-spacing:0.1em;border-bottom:2px #111 solid; border-top:1px #999 solid;}
.even							{background-color:#C0C0C0;}

.service-p						{float:left; width:70%; margin-top:30px; line-height:1.5em;font-size:20px; text-align:justify}
#service-nampa					{width:450px; height:250px;margin:20px 0px 0px 10px;}
.service-p1						{margin-top:40px;line-height:1.5em; font-size:20px;text-align:justify}


/*contact-page*/
.contact-header					{margin-top:30px; margin-bottom:30px; font-size:xx-large; position:relative; clear:both; }
#contact-info                   {width:45%; float:left;}
#contact-info p                 {line-height:1.5em;font-size:20px; text-align:justify}
#contact-info p.tag, #form1 legend             {font-style:italic; }
#form1							{width:45%; line-height:1.5em;font-size:20px; text-align:justify}
#txtComments                    {width:300px; margin-top: 10px;}
#txtName, #txtEmail, #txtSubject, #txtComments, #Label1 {margin-left:10px;}