@import url(reset.css);

body{font: 12px Arial, Tahoma, Sans-serif;color:#000000;background:}
@font-face { 

font-family : '"sansation"'; 
src : url("../font/sansation_Light.ttf")format("truetype"); 
font-style : normal; 
} 

li {list-style-image:none;list-style-position:outside;list-style-type:none;}

p{font: 14px Arial, Tahoma, Sans-serif;}

h1{font: 20px Arial, Tahoma, Sans-serif;}
h2{font: 25px Arial, Tahoma, Sans-serif;}
h5{font: 18px Arial, Tahoma, Sans-serif;}

#wrapper{height: 500px;width: 980px;margin-left:150px;margin-top: 70px;}

#left{ float:left;background-color: #000000;background: url(../image/main-left3.jpg) no-repeat center left;height: 380px;width: 450px;float: left;margin-top: -10px}

#right{height: 370px;width: 450px; float: left;margin-left: auto;}
#right ul{float: left;}
#right a{float: left;}

#home ul{margin-left: 50px;}
#home a{background: url(../image/home-main2.png) no-repeat;height: 112px;width:292px;}
#home a:hover{background: url(../image/home-main2.png) no-repeat;background-position: 0px -112px;}

#home-blog ul{margin-left: 27px;}
#home-blog li{margin-top: 14px;}
#home-blog a{ background: url(../image/blog3.png) no-repeat;height: 33px;width:82px;}
#home-blog a:hover{background: url(../image/blog3.png) no-repeat;background-position: 0px -33px;}

#home-about ul{margin-left: 3px;}
#home-about a{background: url(../image/about3.png) no-repeat;height: 49px;width:219px;}
#home-about a:hover{background: url(../image/about3.png) no-repeat;background-position: 0px -49px;}

#wrapper-blog-home{float:left; width:400px; height: 49px;}

#home-portfolio ul{margin-left: 20px;}
#home-portfolio a{background: url(../image/portfolio3.png) no-repeat;height: 103px;width:321px;}
#home-portfolio a:hover{background: url(../image/portfolio3.png) no-repeat; background-position: 0px -103px;}


#home-contact ul{margin-left: 50px;}
#home-contact  a{background: url(../image/contact3.png) no-repeat;height: 36px;width:258px;}
#home-contact  a:hover{background: url(../image/contact3.png) no-repeat; background-position: 0px -36px;}


#footer{float: left;width: 980px;height: 80px; margin-left: 150px; background-color: white;}
#footer h4{ margin-left: 200px;color: black}

/**internal site view**/
#internal{
background-color: black;
}
#wrapper-internal{
float: left;
height: 750px;
width: 980px;
margin-left:150px;
background-color: #ffffff;
}

#left-home ul{margin-left: 10px;}
#left-home a{height: 300px;width:392px;}


#footer-internal{text-align: center;float: left;width: 980px;margin-top: 50px; background-color:black; color:white; height: 300px;}

/**right side header**/
#title{float: left;height: 150px;width: 588px;margin-top: 20px;}

/** about me **/
#left-internal{float: left;height: 650px;width: 392px;}
#left-internal a{float: left}
#left-internal li{float : left}

#about-blog ul{margin-left: 45px;}
#about-blog li{margin-top: 14px;}
#about-blog a{background: url(../image/blog3.png) no-repeat;height: 33px;width:82px; }
#about-blog a:hover{background: url(../image/blog3.png) no-repeat; background-position: 0px -33px;}

#about-about ul{margin-left: 103px;}
#about-about a{background: url(../image/about3.png) no-repeat;height: 49px;width:219px; background-position: 0px -49px;}
#about-about a:hover{background: url(../image/about3.png) no-repeat;height: 49px;width:219px; background-position: 0px -49px;}

#about-portfolio ul{margin-left: 40px;}
#about-portfolio a{background: url(../image/portfolio3.png) no-repeat;height: 103px;width:321px;}
#about-portfolio a:hover{background: url(../image/portfolio3.png) no-repeat; background-position: 0px -103px;}

#about-contact ul{margin-left: 70px;}
#about-contact  a{background: url(../image/contact3.png) no-repeat;height: 36px;width:258px;}
#about-contact  a:hover{background: url(../image/contact3.png) no-repeat; background-position: 0px -36px;}

#right-internal-about{float: left;height: 800px;width: 588px;}
#right-internal-about h1{height: 150px;width: 588px;}
#right-internal-about p{float: left;margin-top: 20px;padding: 10px;height: 500px;width: 450px;}
#right-internal-about .about{background: url(../image/about-title.jpg) no-repeat;}



/**contact me**/
#contact-blog ul{margin-left: 45px;}
#contact-blog li{margin-top: 14px;}
#contact-blog a{background: url(../image/blog3.png) no-repeat;height: 33px;width:82px;}
#contact-blog a:hover{background: url(../image/blog3.png) no-repeat; background-position: 0px -33px;}

#contact-about ul{margin-left: 103px;}
#contact-about a{background: url(../image/about3.png) no-repeat;height: 49px;width:219px;}
#contact-about a:hover{background: url(../image/about3.png) no-repeat; background-position: 0px -49px;}

#contact-portfolio ul{margin-left: 40px;}
#contact-portfolio a{background: url(../image/portfolio3.png) no-repeat;height: 103px;width:321px;}
#contact-portfolio a:hover{background: url(../image/portfolio3.png) no-repeat; background-position: 0px -103px;}

#contact-contact ul{margin-left: 70px;}
#contact-contact  a{background: url(../image/contact3.png) no-repeat;height: 36px;width:258px; background-position: 0px -36px;}
#contact-contact  a:hover{background: url(../image/contact3.png) no-repeat; background-position: 0px -36px;}

#wrapper-contact{float: left;height: 950px;width: 980px; margin-left:150px;background-color: #ffffff; }
#right-internal-contact{float: left;height: 600px;width: 588px;}
#right-internal-contact .contact{background: url(../image/contact-title.jpg) no-repeat;}
#right-internal-contact h1{height: 150px;width: 588px;}
#right-internal-contact a{float:left;height: 40px;width: 40px;}
#right-link-contact{background: url(../image/contact-bot.png) no-repeat;width: 450px;height: 50px;float: left;margin-left: 20px;}
#form{float:left; width:450px; margin-left:10px;background-color:#FF9900; padding:20px}
#buffer{float:left; width: 490px; height:1px;background-color:#FFC89C;margin-left:10px;border:1px dashed}
#links{float:left; width: 490px; height:100px;background-color:#FF9900;margin-left:10px; border: 2px; border-top-style: dashed}
#links p{float:left; width:450px; margin-left:20px; margin-top:10px;}
#links ul{float:left; width:450px; margin-left:20px; margin-top:10px;}
#links li{float:left; width:40px; margin-right:10px;}





/**portfolio**/
#portfolio-blog ul{margin-left: 45px;}
#portfolio-blog li{margin-top: 14px;}
#portfolio-blog a{background: url(../image/blog3.png) no-repeat; height: 33px;width:82px;}
#portfolio-blog a:hover{background: url(../image/blog3.png) no-repeat; height: 33px;width:82px; background-position: 0px -33px;}

#portfolio-about ul{margin-left: 103px;}
#portfolio-about a{background: url(../image/about3.png) no-repeat;height: 49px;width:219px;}
#portfolio-about a:hover{background: url(../image/about3.png) no-repeat;height: 49px;width:219px; background-position: 0px -49px;}

#portfolio-portfolio ul{margin-left: 40px;}
#portfolio-portfolio a{background: url(../image/portfolio3.png) no-repeat;height: 103px;width:321px; background-position: 0px -103px;}
#portfolio-portfolio a:hover{background: url(../image/portfolio3.png) no-repeat; background-position: 0px -103px;}

#portfolio-contact ul{margin-left: 70px;}
#portfolio-contact  a{background: url(../image/contact3.png) no-repeat;height: 36px;width:258px;}
#portfolio-contact  a:hover{background: url(../image/contact3.png) no-repeat; background-position: 0px -36px;}

#portfolio-subtitle{float:left; margin-top: 10px; margin-left: 45px; height:200px; width:300px;}
#subtitle1 {float: left; height: 90px; width:90px; background-color: #000000; margin:5px;}


#title h1{background: url(../image/portfolio-title.jpg) no-repeat; width: 588px; height:150px;}


#right-internal-portfolio .navi{float: left;width: 588px;height: 30px;}
#right-internal-portfolio .navili{float: left;margin-right: 10px;width: 80px;height: 30px;background: url(../image/port-navi.png) no-repeat;}
#right-internal-portfolio a{float: left; color: white; text-decoration: none}
#right-internal-portfolio a:hover{opacity: 0.5;color:white}

#right-internal-portfolio .fashion {margin-top: 7px;margin-left: 18px;}
#right-internal-portfolio .advertising{margin-top: 7px;margin-left: 1px;}
#right-internal-portfolio .website{margin-top: 7px;margin-left: 18px;}
#right-internal-portfolio .school{margin-top: 7px;margin-left: 20px;}
#right-internal-portfolio .others{margin-top: 7px;margin-left:20px;}

/**portfolio-art-template**/
#art-temp{float: left; margin-top:8px; height: 260px; width: 480px; background-color: #020F01; padding: 15px;}
#photo{float:left; width:200px; height:250px;}
#info{float: left; margin-left: 5px; width:260px; height: 250px; padding: 5px;}
#portfolio-text{color: #ffffff;}
#portfolio-title{color: #59ab1d;}

/**portfolio-art-template-2**/
#art-temp2{float:left; margin-top: 20px; height:260px; width: 510px;}
#art-temp2 .photo{float:left; height:180px; width:510px; background-color:#000000;}
#art-temp2 .info{float: left; height: 80px; width: 490px; padding: 10px;}
#art-temp2 .info a{color:#000000;}
#art-temp2 .info a:hover{color:#010101;}
#art-temp2 .info h1{float: left; height: 20px; width: 480px;}
#art-temp2 .info p{float: left; height: 20px; width: 480px; }

/**portfolio-cartoon-template**/
#cartoon-temp{float:left; margin-left:5px; margin-top:8px; height: 260px; width: 205px; border: 2px dotted black; padding: 5px;}
#cartoon-title h1{float:left; height:20px; width:450px; padding: 5px; color: white;}
#cartoon-title p{float:left; height:20px; width:420px;  padding: 5px; color: white;}
#cartoon-title{float:left; margin:3px; height:70px; width:450px; background-color: #59ab1d; padding: 5px; color: white;}


/**portfolio - fashion**/
#wrapper-fashion{float: left;height: 2800px;width: 980px;margin-left:150px;background-color: #ffffff;}
#right-internal-portfolio-fashion{float:left; height:2600px; width:588px;}

/**portfolio - advertising**/
#wrapper-advertising{float: left;height: 1500px;width: 980px;margin-left:150px;background-color: #ffffff;}
#right-internal-portfolio-advertising{float:left; height:1300px; width:588px;}

/**portfolio - cartoon**/
#wrapper-cartoon{float: left;height: 4050px;width: 980px;margin-left:150px;background-color: #ffffff;}
#right-internal-portfolio-cartoon{float:left; height:3850px; width:588px;}

/**portfolio-schoolwork**/
#wrapper-school{float: left;height: 5300px;width: 980px;margin-left:150px;background-color: #ffffff;}
#right-internal-portfolio-school{float:left; height:5100px; width:588px;}
#nm2208{float: left;}

/**portfolio-about**/
#wrapper-about{float: left;height: 900px;width: 980px;margin-left:150px;background-color: #ffffff;}

/**portfolio - others**/
#wrapper-others{float: left;height: 2000px;width: 980px;margin-left:150px;background-color: #ffffff;}
#right-internal-portfolio-others{float:left; height:1800px; width:588px;}

/**portfolio - website**/
#wrapper-website{float: left;height: 850px;width: 980px; margin-left:150px;background-color: #ffffff;}
#right-internal-portfolio-website{float:left; height:800px; width:588px;}

#right-internal-portfolio .mart {background: url(../image/work9.png) no-repeat;height: 339px;width: 484px;float: left;}
#right-internal-portfolio a{float: left;}
#right-internal-portfolio a:hover{opacity:0.5}

/**blog**/
#wrapper-blog{float: left;height: 800px;width: 980px;margin-left:150px;background-color: #ffffff;}

#blog-blog ul{margin-left: 45px;}
#blog-blog li{margin-top: 14px;}
#blog-blog a{background: url(../image/blog3.png) no-repeat;height: 33px;width:82px; background-position: 0px -33px;}
#blog-blog a:hover{background: url(../image/blog3.png) no-repeat;height: 33px;width:82px;background-position: 0px -33px;}

#blog-about ul{margin-left: 125px;}
#blog-about a{background: url(../image/about3.png) no-repeat;height: 49px;width:219px;}
#blog-about a:hover{background: url(../image/about3.png) no-repeat;height: 49px;width:219px; background-position: 0px -49px;}

#blog-portfolio ul{margin-left: 40px;}
#blog-portfolio a{background: url(../image/portfolio3.png) no-repeat;height: 103px;width:321px;}
#blog-portfolio a:hover{background: url(../image/portfolio3.png) no-repeat; background-position: 0px -103px;}

#blog-contact ul{margin-left: 70px;}
#blog-contact  a{background: url(../image/contact3.png) no-repeat;height: 36px;width:258px; }
#blog-contact a:hover{background: url(../image/contact3.png) no-repeat; background-position: 0px -36px;}
#blog-side-bar{float: left;}
.widget1{align: center; margin-left:80px; margin-top: 50px;}


#right-internal-blog{float: left;height: 700px;width: 588px;}
#right-internal-blog h1{height: 150px;width: 588px;}
#right-internal-blog p{float: left;margin-top: 20px;padding: 10px;height: 400px;width: 450px;}
#right-internal-blog .blog{background: url(../image/blog-title.jpg) no-repeat;}

#blogazine-title {float:left; height: 30px; width: 450px; padding: 10px}
#zine {float: left; height: 500px; width: 450px;}

#zine1 {float: left; height: 100px; width: 100px; margin-right: 10px; margin-bottom: 10px; margin-top:10px;}
#zine1 a{float: left; width: 100px; height: 100px; background:url(../image/cws.png) no-repeat;}
#zine1 a:hover{float: left; width: 100px; height: 100px; background:url(../image/cws.png) no-repeat; opacity: 0.5;}

#zine2 {float: left; height: 100px; width: 100px; background-color: #000000; margin-right: 10px; margin-bottom: 10px; margin-top:10px;}
#zine3 {float: left; height: 100px; width: 100px; background-color: #000000; margin-right: 10px; margin-bottom: 10px; margin-top:10px;}
#zine4 {float: left; height: 100px; width: 100px; background-color: #000000; margin-right: 10px; margin-bottom: 10px; margin-top:10px;}
#zine5 {float: left; height: 100px; width: 100px; background-color: #000000; margin-right: 10px; margin-bottom: 10px; margin-top:10px;}
#zine6 {float: left; height: 100px; width: 100px; background-color: #000000; margin-right: 10px; margin-bottom: 10px; margin-top:10px;}
#zine7 {float: left; height: 100px; width: 100px; background-color: #000000; margin-right: 10px; margin-bottom: 10px; margin-top:10px;}
#zine8 {float: left; height: 100px; width: 100px; background-color: #000000; margin-right: 10px; margin-bottom: 10px; margin-top:10px;}
#zine9 {float: left; height: 100px; width: 100px; background-color: #000000; margin-right: 10px; margin-bottom: 10px; margin-top:10px;}
#zine10 {float: left; height: 100px; width: 100px; background-color: #000000; margin-right: 10px; margin-bottom: 10px; margin-top:10px;}



/*****************************************
Clan weil blog
******************************************/
#cwbody{font: 12px Arial, Tahoma, Sans-serif;color:#000000;background: url(../image/bb.png);}
#bwrapper{height: 700px;width: 980px;margin-left:150px;}
#header{float: left; width: 980px; height: 100px; background-color:#000000; background: url(../image/cwshead.png) no-repeat;}

#middle{float: left; width: 980px; height: 700px;}
#cwp{float: left; margin-left: 90px; width: 980px; height: 248px; background: url(../image/cwsp1.png) no-repeat;}
#bfooter {float: left; width: 980px; height: 100px;}
#bfooter ul{float: left; width: 250px; height: 20px; margin-left: 377px;}
#bfooter li{float: left; margin: 5px;}
#bfooter a{color: #ffffff;}
#bfooter a:hover{opacity: 0.5;}
#bcopy{float:left; text-align: center; width: 980px; color: #ffffff;margin-top: 10px;}


/****************************************
Shi Shi blog
****************************************/
#ssbody{font: 12px Arial, Tahoma, Sans-serif;color:#000000;background: url(../image/ssb.png);}
#bwrapper{height: 900px;width: 980px;margin-left:150px;}
#header{float: left; width: 980px; height: 120px; background-color:#000000; margin-top: 20px; background: url(../image/sst.png) no-repeat;}

#smiddle{float: left; width: 980px; height: 700px;}
#ts{float: left; width: 640px; height: 400px; margin-left: 280px; margin-top: 30px;}
#tsl1{float: left;width: 900px; height: 400px; background: url(../image/shishicart.png) #ffffff no-repeat;}
#window{float:left; margin-right: 15px;border: 2px dashed #000000;}

#tsr{float: left; width: 300px; height: 400px; margin-top: 30px; margin-left: 20px;}

#s1{float: left; width: 100px; height: 100px; margin-right:28px;margin-bottom: 20px; border: 2px dashed #000000;}
#s1 a{float: left; width: 100px; height: 100px; background:url(../image/displaypic-shishi.jpg) no-repeat;}
#s1 a:hover{float: left; width: 100px; height: 100px; background:url(../image/displaypic-shishi.jpg) no-repeat; background-position: -50px -85px;}

#s2{float: left; width: 100px; height: 100px;margin-right:28px;margin-bottom: 20px;border: 2px solid #000000;}
#s2 a{float: left; width: 100px; height: 100px; background:url(../image/displaypic-shishi2.jpg) no-repeat;}
#s2 a:hover{float: left; width: 100px; height: 100px; background:url(../image/displaypic-shishi2.jpg) no-repeat; background-position: -50px -80px;}

#s3{float: left; width: 100px; height: 100px;margin-right:28px;margin-bottom: 20px;border: 2px solid #000000;}
#s3 a{float: left; width: 100px; height: 100px; background:url(../image/displaypic-shishi3.jpg) no-repeat;}
#s3 a:hover{float: left; width: 100px; height: 100px; background:url(../image/displaypic-shishi3.jpg) no-repeat; background-position: -50px -80px;}

#s4{float: left; width: 100px; height: 100px; margin-right:28px;margin-bottom: 20px;border: 2px dashed #000000;}
#s5{float: left; width: 100px; height: 100px; margin-right:28px;margin-bottom: 20px;border: 2px dashed #000000;}
#s6{float: left; width: 100px; height: 100px; margin-right:28px;margin-bottom: 20px;border: 2px solid #000000;}

#bs{float: left; width: 620px; height: 200px; margin-left: 280px; margin-top: 20px; border: 2px dashed #000000;}