/*
Theme Name: wegrass
Theme URI: http://wegrass.com/
Author: Wegrass Interactive Co., Ltd.
*/


/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */

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, font, 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 {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}
body {
	line-height: 1;
}
h1, h2, h3, h4, h5, h6 {
	clear: both;
	font-weight: normal;
}
ol, ul {
	list-style: none;
}
blockquote {
	quotes: none;
}
blockquote:before, blockquote:after {
	content: '';
	content: none;
}
del {
	text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a img {
	border: none;
}

/* ----------- General ----------- */

body{

	font-size: 75%;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.5em;
}

html>body{
	font-size: 12px;
}

a{
	text-decoration: none;
	outline: none;
}

a:focus, a:hover{
	color: #c1003f;
}

ul,ol,p{
	margin-bottom: 1em;
}
em{
	font-style: normal;
	color: #9f0000;
}

/* ----------- Layout ----------- */

.wrapper{
	width: 100%;
	position: relative;
}

.container{
	position: relative;
}

.clearer{
	clear: both;

}

/* ----------- General Content ----------- */
.info-table{
	padding: 5px;
	border: none;
	font-size: 0.8em;
	background: white;
	margin: 0 0 20px 0;
}
.info-table th,
.info-table td{
	padding: 4px 10px;
}
.info-table th{
	background: black;
	color: white;
}

/* ----------- Main ----------- */

.main-wrapper{
	background: #FBFEE1 url(images/main-bg.jpg) repeat-x; 
	padding-bottom: 0px;
}

.ray{
	background: url(images/ray.png) center bottom no-repeat;
	position: absolute;
	bottom: 0;
	left: 0;
	height: 698px;
	width: 100%;
	z-index: 10;
}

.grass-yard{
	background: url(images/grass-bg.png) repeat-x;
	height: 36px;
	position: absolute;
	bottom: 0px;
	z-index: 200;
}

.cloud{
	background: url(images/cloud-bg.png) repeat-x;
	height: 263px;
	width: 100%;
	position: absolute;
	top: 0px;
	z-index: 0;
	left: 0;
}

/* ----------- Header ----------- */

#header{
	width: 940px;
	margin: 0px auto;
	height: 140px;
	z-index: 100;
}

#header .wegrass-logo{
	position: absolute;
	top: 12px;
}

#header .wegrass-logo a{
	text-indent: -9999px;
	background: url(images/wegrass-logo.png) no-repeat;
	width: 290px;
	height: 98px;
	display: block;
}

#header .menu-main-container{
	position: absolute;
	right: 0px;
	top: 48px;
	height: 50px;
	padding-left: 18px;

}

#header .main-menu-list{
	height: 50px;
	margin-bottom: 0px;
}

#header .main-menu-list li{
	float: left;
	padding: 0 0 0 25px;
	line-height: 50px;
	height: 50px;

}

#header .main-menu-list li a{
	font-size: 24px;
	color: #666;
	text-transform: lowercase;
}

#header .main-menu-list li a:hover,
#header .main-menu-list li.current-menu-item a,
#header .main-menu-list li.current_page_item a,
#header .main-menu-list li.current_page_parent a{
	color: #da9903;
}

/* ----------- Footer ----------- */
.footer-wrapper{
	background: #99be0b url(images/footer-wrapper.jpg) repeat-x;
	height: 90px;
	color: white;
	font-weight: bold;
	text-shadow: 1px 1px 1px #8c950e;
	filter: dropshadow(color=#8c950e, offx=1, offy=1);
	z-index: 500;
	position: relative;
}

.footer-content{
	width: 940px;
	margin: 0px auto;
	padding: 20px 0px;
	position: relative;
	z-index: 100;
}

.footer-wrapper ul.sitemap-list{
	color: white;
}

.footer-wrapper ul.sitemap-list li{
	display: inline-block;
	*display: inline;
	background: url(images/sitemap-sep.png) right center no-repeat;
	padding-right: 12px;
	margin-right: 10px;
	
}

.footer-wrapper ul.sitemap-list li.last{
	background: none;
}

.footer-wrapper a{
	color: white;
	text-shadow: 1px 1px 2px #6a7104;
	filter: dropshadow(color=#6a7104, offx=1, offy=1);
	font-weight: bold;
}

.footer-wrapper a:hover{
	text-shadow: 1px 1px 1px #8c950e;
	filter: dropshadow(color=#8c950e, offx=1, offy=1);
	position: relative;
	top: 1px;
	left: 1px;
}

.footer-left-box{
	float: left;
	width: 50%;
}

.footer-right-box{
	float: right;
	width: 50%;
	text-align: right;
}

.footer-right-box p img{
	float: none;
	margin: 0;
	padding: 0;
}

/* ----------- Cartoon ----------- */

.wetree{
	background: url(images/wetree.png);
	width: 398px;
	height: 442px;
	position: absolute;
	bottom: -20px;
	left: 290px;
}

.blue-bird{
	background: url(images/blue-bird.png);
	width: 68px;
	height: 49px;
	position: absolute;
	bottom: 234px;
	left: 654px;
}

.kingkong{
	background: url(images/kingkong.png);
	width: 87px;
	height: 169px;
	position: absolute;
	bottom: 0px;
	right: 10px;
}

.tortoise{
	background: url(images/tortoise.png);
	width: 87px;
	height: 169px;
	position: absolute;
	bottom: 0px;
	right: 105px;
}

.member{
	position: absolute;
	bottom: -5px;
}
#net{
	background: url(images/net.png) no-repeat;
	width: 117px;
	height: 161px;
	left: 400px;
}
#a{
	background: url(images/a.png);
	width: 117px;
	height: 161px;
	left: 490px;
}
#mix{
	background: url(images/mix.png);
	width: 117px;
	height: 161px;
	left: 310px;
}
#mek{
	background: url(images/mek.png);
	width: 156px;
	height: 161px;
	left: 210px;
}
#zeal{
	background: url(images/zeal.png);
	width: 117px;
	height: 179px;
	left: 660px;
}
#x{
	background: url(images/x.png);
	width: 117px;
	height: 179px;	
	left: 578px;
}
#prite{
	background: url(images/prite.png);
	width: 117px;
	height: 179px;
	left: 155px;
	bottom: -10px;	
}


/* ----------- Content ----------- */

.body-content{
	padding-bottom: 120px;
	color: #555;
	z-index: 100;
	position: relative;
}

.body-with-member{
	padding-bottom: 200px;
}

#post-file{
	margin-bottom: 30px;
	padding: 5px 20px 10px 20px;
	background: #f5f6ec;
	border: 1px solid #e6e4c7;
}

#post-content{
	margin-bottom: 50px;
}

.rtl{
	font-size: 1.2em;
}

.rtl a{
	border-bottom: 1px dotted;
	color: #c1003f;
}

.rtl p{
	line-height: 1.5em;
	margin-bottom: 1.5em;
}

.rtl ul{
	list-style: disc;
	padding-left: 15px;
	margin-bottom: 2em;
}

.rtl ul li{
	line-height: 1.5em;
}

.rtl ol{
	list-style: decimal;
	padding-left: 20px;
	margin-bottom: 2em;
}

.rtl ol li{
	line-height: 1.5em;
}

.rtl h2{
	font-size: 1.5em;
	line-height: 1em;
	margin-bottom: 0.5em;
	margin-top: 1.25em;
	color: #333;
}

.rtl h2 a{
	border: none;
}

.rtl .post-img{
	display: block;
	background: #F5F6EC;
	text-align: center;
	border: 1px solid #e6e4c7;
	padding: 20px;
	margin-bottom: 1.5em;
}

.rtl .post-img img{
	border: 1px solid #ccc;
}

.rtl blockquote{
	padding: 20px 20px 1px 20px;
	background: #fff;
	margin-bottom: 1.5em;
	font-style: normal;
	color: #c1003f;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #ddd;	
}




/* ----------- Home ----------- */

body.home .body-content{
	height: 350px;
	padding-bottom: 0px;
}

.balloon{
	position: absolute;
	width: 200px;
	cursor: pointer;
}

.balloon  h1 a,
.balloon h2 a{
	color: #333;
}

.balloon a{
	color: #555;
}

.balloon h1{
	margin-bottom: 8px;
	font-size: 36px;
	color: #333;
}

.balloon h2{
	margin-bottom: 8px;
	font-size: 32px;
	color: #333;
}

a .balloon{
	color: #5c5c5c;
}

.ballon h2 a:hover,
.ballon h1 a:hover{
	
}

.balloon p{
	font-size: 16px;
	line-height: 1.3em;
	color: #888;
}

.balloon#we{
	top: 60px;
	left: 40px;
}

.balloon#create{
	top: 260px;
	left: 110px;
	width: 250px;
}

.balloon#share{
	right: 0px;
	top: 120px;
}

/* ----------- General Page ----------- */

.pad-20{
	padding: 20px;
}

.center-box{
	text-align: center;
	padding: 20px 30px 40px 30px;
	color: #666;
	width: 660px;
	margin: 30px auto 0px auto;
	position: relative;
}

.center-box h1{
	font-size: 42px;
	margin-bottom: 16px;
	color: #666;
}

.center-box h2{
	font-size: 32px;
	margin-bottom: 16px;
	color: #666;
}

.center-box p{
	font-size: 16px;
}

.section-sep{
	height: 20px;
}

/* ----------- Blog sidebar ----------- */
.sidebar-block{
	margin-bottom: 30px;
}

#related-posts-box ul{
	margin-top: 10px;
	list-style: disc;
	padding: 0 0 0 15px;
}

#related-posts-box ul li{
	margin-bottom: 1px;
}

#related-posts-box ul li a{
	color: #555;
}

#subscribe-box a{
	color: #666;
}

.sidebar-title{
	color: #666;
	font-size: 20px;
	margin-right: 10px;
}

#tags-box ul{
	float: left;
	margin-top: 10px;
}

#tags-box ul li{
	float: left;
	margin: 0 15px 15px 0;
}



#tags-box ul li a{
	display: block;
	width: 32px;
	height: 32px;
	text-indent: -9999px;
	opacity:0.5;
	-moz-opacity:0.5;
	filter: alpha(opacity=50);
	background-color: #FBFEE1;
}

#tags-box ul li.active a{
	opacity:0.9;
	-moz-opacity:0.9;
	filter: alpha(opacity=90);	
}

#tags-box ul li#jquery a{
	background-image: url(images/tags/jquery.png);
}

#tags-box ul li#wordpress a{
	background-image: url(images/tags/wordpress.png);
}

#tags-box ul li#ci a{
	background-image: url(images/tags/ci.png);
}

#tags-box ul li#game a{
	background-image: url(images/tags/game.png);
}

#tags-box ul li#css a{
	background-image: url(images/tags/css.png);
	width: 60px;
}

#tags-box ul li#php a{
	background-image: url(images/tags/php.png);
	width: 60px;
}

.tags{
	float: left;
}

.tags ul li{
	float: left;
	margin-right: 10px;
}

.tags ul li div{
	text-indent: -9999px;
	display: block;
	width: 16px;
	height: 16px;
}

.tags ul li#ci div{
	background: url(images/tags/small/ci.png);
}

.tags ul li#jquery div{
	background: url(images/tags/small/jquery.png);
}

.tags ul li#wordpress div{
	background: url(images/tags/small/wordpress.png);
}

.tags ul li#game div{
	background: url(images/tags/small/game.png);
}

.tags ul li#css div{
	background: url(images/tags/small/css.png);
	width: 32px;
}

.tags ul li#php div{
	background: url(images/tags/small/php.png);
	width: 32px;
}

#cats-box ul{
	margin-top: 10px;
}

#cats-box ul li{
	float: left;
	margin-right: 10px;
}

#cats-box ul li a{
	display: block;
	padding: 5px 10px;
	background: #99be0b;
	color: #590d22;
	float: left;
	font-size: 14px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	font-weight: bold;
}

#cats-box ul li.active a{
	color: white !important;	
}


#cats-box ul li#general a{
	background: #B71A46;
	color: #590d22;
}

#cats-box ul li#knowledge a{
	background: #1A89B7;
	color: #0c3f54;
}

#cats-box ul li{
	margin-bottom: 10px;
}

.watermark{
	color: #aaa;
}

#subscribe{
	display: block;
	width: 215px;
	height: 42px;
	background: url(images/subscribe-bt.png);
	text-indent: -9999px;
	margin-top: 10px;
}

#subscribe:hover{
	background-position: 0 -42px;
}

#subscribe:active{
	background-position: 0 -84px;
}

#prev-page{
	display: block;
	text-indent: -9999px;
	background: url(images/prev-bt.png);
	width: 102px;
	height: 32px;
	margin-right: 10px;
	cursor: pointer;
	margin-top: 10px;
	float: left;
}

#prev-page:hover{
	background-position: 0 -32px;
}

#prev-page:active{
	background-position: 0 -64px;
}

#next-page{
	display: block;
	text-indent: -9999px;
	background: url(images/next-bt.png);
	width: 102px;
	height: 32px;
	cursor: pointer;
	margin-top: 10px;
	float: left;
}

#next-page:hover{
	background-position: 0 -32px;
}

#next-page:active{
	background-position: 0 -64px;
}

/* ----------- Blog ----------- */
#post-box{
	height: 420px;
	overflow: hidden;
	position: relative;
}

#post-box-slide{
	position: relative;
}

.post-item .post-title{
	height: 50px;
	line-height: 42px;
	color: white;
	font-size: 20px;
	position: absolute;
	left: 160px;
}

.post-item .post-title a{
	color: white;
}

.post-item .post-meta{
	 top: 57px;
    left: 175px;
    position: absolute;
    width: 475px;
}

.post-item{
	background: url(images/post-pink.png) left top no-repeat;
	margin-bottom: 20px;
	height: 90px;
	position: relative;
}

.post-thumb{
	position: absolute;
	left: 10px;
	top: 9px;
}

.post-item.knowledge{
	background: url(images/post-blue.png) left top no-repeat;
}

.post-item.general{
	
}

.post-item .post-date{
	float: right;
}

.post-share{
	margin-top: 10px;
}

/* ----------- Playground Page ----------- */
#project-box{
	width: 430px;
	margin: 0 auto;
	padding: 50px 0 0 0;
}
#project-box ul{
	
}
#project-box ul li{
	list-style: none;
	float: left;
	margin: 0 40px;
}
.project-item{
	margin-bottom: 25px;
	margin-top: 5px;
}
.project-badge{
	display: block;
}
.project-name{
	background: white;
	display: block;
	padding: 5px 10px;
	text-align: center;
	color: #888;
	margin: 10px 0 0 0;
	border: 1px solid #eee;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	font-weight: bold;
	font-size: 12px;
}
.project-name small{
	display: block;
	color: #ccc;
	font-weight: normal;
}
a:hover .project-name{
	color: white;
	border: 1px solid #9e0134;
	background: #C1003F;
}
a:hover .project-name small{
	color: white;
}
#chameleon-badge{
	width: 117px;
	height: 88px;
	background: url(images/playground/chamelion.png) no-repeat;
}
#seven-days-badge{
	width: 120px;
	height: 88px;
	background: url(images/playground/seven-days.png) no-repeat;
}

.project-balloon{
	background: url(images/project-balloon.png) no-repeat;
	width: 253px;
	height: 58px;
	padding: 20px 20px 20px 40px;
	color: #999;
	letter-spacing: 0.5px;
}

.project-balloon h2 a{
	color: #555;
}

.project-balloon h2{
	margin-bottom: 5px;
	font-size: 18px;
	font-weight: bold;
}

.project-meta{
	padding: 5px 0 0 0;
}

/* ----------- Compact ----------- */

#header-bar{
	height: 48px;
	background: url(images/header-compact-bar.png) repeat-x bottom;
	z-index: 500;
	position: relative;
	margin-bottom: 40px;
}

#header-compact .wegrass-logo{
	position: absolute;
	left: 5px;
	top: 8px;
}

#header-compact .wegrass-logo a{
	display: block;
	text-indent: -9999px;
	background: url(images/logo-compact.png) no-repeat;
	width: 128px;
	height: 34px;
}

#header-compact .menu-main-container{
	position: absolute;
	right: 5px;
	top: 16px;
}

#header-compact .menu-main-container ul li{
	float: left;
	margin-left: 20px;
}

#header-compact .menu-main-container ul li a{
	color: #aaa;
}
#header-compact .menu-main-container ul li.current-page-ancestor a{
	color: white;
}
#header-compact .menu-main-container ul li a:hover{
	color: white;
}

/* ----------- Project ----------- */

#project-highlight{
	
}

#project-highlight .post-share{
	float: left;
	margin: 13px 0 0 0;
}

#project-head-meta{
	padding: 15px 0 0 0;
}

#project-head-meta .project-title{
	margin-bottom: 10px;
	font-size: 42px;
}

#project-head-meta p{
	font-size: 1.2em;
}

.project-icon{
	font-size: 1.4em;
	display: block;
	height: 21px;
	padding: 15px 0 0 50px;
	color: #555;
	float: left;
	margin-right: 40px;
	
}

.project-icon#demo{
	background: url(images/demo.png) no-repeat left center;
}

.project-icon#download{
	background: url(images/download.png) no-repeat left center;
}

#project-content{
	margin-bottom: 50px;
}

/* ----------- Contact Page ----------- */

.postcard{
	background-image: url(images/postcard.jpg);
	background-repeat: no-repeat;
	height: 292px;
	width: 589px;
	margin: 30px auto 0px auto;
	position: relative;
}


.contact-info{
	padding: 30px 20px 20px 20px;
	padding-left: 46px;
}

.contact-info h1{
	font-size: 18px;
	margin-bottom: 18px;
}

#contact-form{
	padding: 34px 20px 0px 33px;
	height: 240px;
	overflow: hidden;
}

#contact-form p{
	margin-bottom: 8px;
}

#contact-form input[type="text"], #contact-form select, #contact-form textarea{
	width: 268px;
	padding: 6px;
	font-family: Arial, Helvetica, sans-serif;	
	background: #fff;
	font-size: 16px;
	border: 1px solid #bbb;
}

#contact-form .wpcf7-select{
	*margin-bottom: 10px;
}

#message-input, #email-input, #type-input{
	width: 280px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
}

#contact-form textarea{
	height: 50px;
}

#contact-form select{
	width: 282px;
}

#contact-form-submit a{
	background: url(images/send-bt.png) no-repeat;
	width: 177px;
	height: 52px;
	cursor: pointer;
	margin: 32px 0 0 -5px;
	font-size: 24px;
	line-height: 48px;
	text-align: center;
	color: #888;
	display: block;
	border-bottom: none;
}

#contact-form-submit a:hover{
	color: #555;
}

#contact-form-submit a:active{
	background-position: -178px 0px;
}

#dummy-resp{
	font-size: 14px;
	background-color: #aaa;
}

.wpcf7-not-valid-tip{
	display: none;
}

div.wpcf7-response-output{
	width: 260px !important;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	color: white;
	border: none !important;
}

div.wpcf7-response-output {
	margin:20px 0px 30px 0px !important;
	padding:5px 10px !important;
}

div.wpcf7-validation-errors{
	background: #da9903 !important;
}

div.wpcf7-mail-sent-ok{
	background: #668c15 !important;
	margin-bottom: 50px !important;
}

div.wpcf7-mail-sent-ng{
	background: #8b0000;
}

input[type="text"], input[type="password"], input.text, input.title, textarea, select{
	margin: 0;
}

/* ----------- Gallery ----------- */

.ngg-galleryoverview{
	margin: 15px 0 1.5em 0;
	float: left;
}

.ngg-gallery-thumbnail-box{
	float: left;
	margin: 0 20px 20px 0;
}

.ngg-gallery-thumbnail-box a{
	border: none;
}

.ngg-gallery-thumbnail-box a img{
	padding: 4px;
	background: #e3e0b7;
}

.ngg-gallery-thumbnail-box a:hover img{
	background: #dad59e;
}

/* ----------- Grow ----------- */
.page-template-page-grow-php{
	background: #fbfee2;
}
#grow-logo{
	display: block;
	margin: 80px auto 30px auto;
	width: 326px;
	height: 106px;
	background: url(images/wegrass.png);
	text-indent: -9999px;
	z-index: 1000;
	position: relative;
}
.page-template-page-grow-php .body-content,
.page-template-page-grow-php .center-box{
	margin: 0 auto;
}

/* ----------- Donate ----------- */
#donate-ball{
	position: absolute;
	top: 10px;
	left: 50px;
	width: 327px;
	height: 331px;
	text-align: center;
}
#donate-ball img{
	display: block;
	margin: 0 auto;
	width: 222px;
}
.donate-box{
	text-align: left;
	padding: 20px 30px 0 400px;
	color: #666;
	margin: 60px auto 0px auto;
	position: relative;
	font-size: 16px;
	line-height: 1.5em;
}
.donate-box h1{
	font-size: 32px;
	margin: 0 0 20px 0;
	color: #666666;
}
#donate-form{
	margin: 20px 0 30px 0;
	float: left;
	position: relative;
}
#donate-amount-box{
	background: url(images/donate/donate-box.png) no-repeat;
	width: 200px;
	height: 59px;
	float: left;
	margin: 0 50px 0 0;
}
#donate-amount-box input{
	padding: 0;
	background: none;
	font-size: 20px;
	text-align: center;
	width: 100px;
	padding: 16px;
	border: none;
}
#paypal-donate{
	float: left;
}
#donate-arrow{
	background: url(images/donate/donate-arrow.png) no-repeat;
	width: 95px;
	height: 60px;
	z-index: 999;
	position: absolute;
	left: 170px;
	top: -28px;
}
.thank-you{
	padding: 10px 20px;
	background: #cdb00f;
	color: white;
	float: left;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	text-shadow: 1px 1px 1px #a18c18;
	filter: dropshadow(color=#a18c18, offx=1, offy=1);
	margin: 10px 0 0 0;
}
.notice{
	padding: 10px 20px;
	background: #cdb00f;
	color: white;
	float: left;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	text-shadow: 1px 1px 1px #a18c18;
	filter: dropshadow(color=#a18c18, offx=1, offy=1);
	margin: 10px 0 0 0;
}
#donate-menu{
	margin: 0 0 30px 0;
}
#donate-menu li{
	float: left;
	margin: 0 20px 0 0;
}
#donate-menu li a{
	padding: 4px 5px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	color: #C1003F;
	background: none;
}
#donate-menu li.active a{
	background: #C1003F;
	color: white;
}