body{margin:0;font-size:14px;font-family:'PingFang SC','Helvetica Neue','Microsoft YaHei UI','Microsoft YaHei','Noto Sans CJK SC',Sathu,EucrosiaUPC,Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;background-color:#fff;color:#333}
a,abbr,address,blockquote,body,caption,cite,code,dd,del,dfn,div,dl,dt,em,fieldset,form,h1,h2,h3,h4,h5,h6,html,iframe,img,ins,label,legend,li,object,ol,p,pre,q,small,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,tr,ul{border:0;margin:0;padding:0}
blockquote{background-color:#f3f7f0;padding:10px;margin:10px;font-size:13px;line-height:2em;}
article,aside,figcaption,figure,figure img,footer,header,hgroup,nav,object,section,video{display:block}
h1{margin:0;font-size:2em;color:#64854c;text-decoration:none;text-indent:-9999px}
h2,h3,h4,h5{font-size:1em}
button,input,select,textarea{}
input[type=radio]{-webkit-appearance:radio}
button,input,select,td,textarea,th{font-size:13px}
button,input,select,textarea{outline:0}
button:hover{cursor:pointer}
embed,img,object{max-width:100%}
img{height:auto;display: block;margin: auto auto}
a img{border:0}
figure{position:relative}
figure img{width:100%}

.page{padding-left:10px;padding-right:10px}
.header{margin-top:17px;margin-bottom:15px}
.navigator{background:#96b97d}
.main{margin-top:20px}
.footer{background:#fff;padding-top:20px;padding-bottom:20px;margin-top:20px;-moz-box-shadow:0 -1px 1px #ececec;box-shadow:0 -1px 1px #ececec}

.horizon{width:100%;max-width:1260px;min-width:755px;margin:0 auto;overflow:hidden}
.col,.fivecol{float:left}

.left-column {width: 14%;margin-right: 1%;display: block;box-sizing:border-box;border: 1px solid rgba(0,0,0,.1)}
.right-column{display: block;box-sizing:border-box; width:14%; margin-left:1%; border: 1px solid rgba(0,0,0,.1)}
.right-home{width:16%;float:left}

div.tutintro{width:auto;min-height:92px}
div.tutintro img{float:left;margin-right:20px;margin-bottom:10px}

.copyright,.fivecol{width:14%}
.listcol{width:27.6%;float:left}

.mobile-nav{display:none}
.search{width:38%;box-sizing: border-box}
.middle-column-home{width:68%;box-sizing:border-box;margin-right:0;padding:12px 20px;border:1px solid #eaeaea;background-color:#fff;border-radius:4px}.eightcol{width:48.8%}
.logo{width:61%;margin-right: 1%}
.middle-column{width:68%}
.nav,.nav-sub{width:100%;float:left}
a img.navup{display:inline-block;padding-right: 5px}

.btn{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.428571429;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;background-image:none;border:1px solid transparent;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}
.result{padding:7px 12px;}
.example-btn{color:#fff;background-color:#5cb85c;border-color:#4cae4c}
.example-btn:hover{color:#fff;background-color:#47a447;border-color:#398439}
.example-btn:active{background-image:none}

code{
    margin: auto 2px;
    padding: 4px;
    font-size: 14px;
    color: #c7254e;
    border-radius: 2px;
    padding:0.2em;
    margin:0;
    background-color: #eceae6;
    border-radius:3px;
}
pre{
    margin:15px auto;
    font:14px/20px Menlo,Monaco,Consolas,"Andale Mono","lucida console","Courier New", monospace;
    white-space:pre-wrap;
    word-break:break-all;
    word-wrap:break-word;
    background-color:#f5f5f5;
    color:#444;
    border-radius:6px;
    padding:10px 25px;
    line-height: 2em;
}
pre code {
    clear: both;
    background: white;
    color: #3B4549;
    font: 14px/20px Menlo,Monaco,Consolas,"Andale Mono","lucida console","Courier New", monospace;
}

.right-list button{top:24px!important;margin:30px 0 0 5px;display:none;background-color:#96b97d;float:right}

.logo h2,.logo h1{background-image:url(/images/blogo.png);background-repeat:no-repeat;text-indent:-9999px;width:240px;height:81px;margin-top:10px;margin-left:20px;display:block;float:left;background-size: 240px 81px;}
.logo span{float:left;height:40px;line-height:40px;margin-top:11px;margin-left:15px;font-size:22px;font-weight:400}
.logo a{width:258px;height:39px;display:block}a{color:#64854c;text-decoration:none;-o-transition-duration:.2s;-o-transition-property:opacity;-webkit-transition-duration:.2s;-webkit-transition-property:opacity}
.logo img{padding:10px 0 0 20px}

.search-mobile{display:none}
.search{text-align:right}
.search input{line-height:34px;left:9px;top:0;text-align:initial;white-space:nowrap;right:9px;height:35px;width:90%;padding:0 3% 0 3%;background-color:#fff;border:1px solid #eaeaea;border-radius:3px;color:#ccc;font-weight:400;font-size:14px;margin-top:10px}
.search input:focus{color:#333;opacity:.8}
.search-reveal{display:none}

table a{text-decoration:underline}
a:hover{opacity:.8;color:#799961}
li,ol,p,ul{line-height:1.5em}

input[type=submit]{
    cursor:pointer;color:#fff;
    padding:7px 10px 7px 10px;
    -webkit-appearance:none;
    width:80px;
    margin:10px 0 0 0;
    font-weight:700;
    text-shadow:0 1px 0 rgba(0,0,0,.2);
    border:1px solid rgba(87,121,63,.8);
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    -moz-background-clip:padding;
    -webkit-background-clip:padding-box;
    background-clip:padding-box;
    background-color:#90b575;
    -moz-box-shadow:0 1px 2px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.25);
    -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.25);
    box-shadow:0 1px 2px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.25);
    background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMTclIiB4Mj0iNTAlIiB5Mj0iLTE3JSI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDAiIHN0b3Atb3BhY2l0eT0iMC4xNSIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmYiIHN0b3Atb3BhY2l0eT0iMC4xNSIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==);
    background-image:-moz-linear-gradient(bottom,rgba(0,0,0,.15) -17%,rgba(255,255,255,.15) 117%);
    background-image:-o-linear-gradient(bottom,rgba(0,0,0,.15) -17%,rgba(255,255,255,.15) 117%);
    background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,.15) -17%,rgba(255,255,255,.15) 117%);
    background-image:linear-gradient(bottom,rgba(0,0,0,.15) -17%,rgba(255,255,255,.15) 117%)
}

.nav{padding:5px 0 5px 20px;height:24px;font-size:16px;font-family:proxima-nova,'Helvetica Neue',Helvetica,Arial,sans-serif}
.nav ul{list-style:none;white-space:nowrap}
.nav li{display:inline;margin:0 20px 0 0}
.nav li a{padding:10px 0 10px 0;text-decoration:none}
.nav li a{color:#fff}
.nav li a:hover{color:#e3efd9}

hr{background-color:#d4d4d4;color:#d4d4d4;height:1px;border:0;clear:both}
span.deprecated{color:#e80000;background-color:transparent}

.article-body ul{line-height:140%}
.article-body ul.activity-dropdown li{text-align:left;border-bottom:1px solid #efefef;padding:10px 10px 10px 30px;background-color:#fff;background-repeat:no-repeat;background-position:left center;background-size:17px auto;margin:0}
.article-body ul.activity-dropdown li span{color:grey;float:right;font-size:.8em}
.article-body ul.activity-dropdown li img{width:30%;display:block;margin:20px 0 0 0}
.article-body h1{text-indent:initial}

.tab{
    font-size:16px;
    line-height:32px;
    color: #64854c;
    font-weight:400;
    text-align:center;
    display:block;
    border-bottom:1px solid rgba(0,0,0,.1);
    padding:0;
    -moz-background-clip:padding;
    -webkit-background-clip:padding-box;
    background-clip:padding-box;
    background-color: #fbfbfb;
}

.tab-logo{
    display:block;
    border-bottom:1px solid rgba(0,0,0,.1);
    padding:0;
    -moz-background-clip:padding;
    -webkit-background-clip:padding-box;
    background-clip:padding-box;
    height:100px;
    text-align: center
}

.tab-logo img{
    width:100%;
    height:100px
}

.sidebar-box{background:#fff;margin:0 0 20px 0}
.sidebar-box .cate-list{padding:0}
.sidebar-box .cate-items{overflow:hidden;padding-left:14px;text-align:center;padding-bottom:16px}
.sidebar-box .cate-items a{color:#999;background-color:#f6f6f6;float:left;width:31.3333%;margin:0 1% 1% 0;padding:0;font-size:13px;height:29px;line-height:29px;overflow:hidden}
.sidebar-box.about-author .article-body{padding:0}

.codelist{overflow:hidden}
.codelist-mobile{display:none}
.codelist a{width:72px;margin:0 5px 8px 5px; position:relative;vertical-align: top;display:inline-block;text-align:center;color:#999;font-size:12px;overflow:hidden;text-decoration:none}
.codelist a:hover{color:#64854c}
.codelist .codeicon{border-radius:5px;margin:0 auto;display:block;margin-bottom:5px}
.codelist a.item-top{width:27%;margin:0 8px 10px 0;text-align:left;color:#bbb;background-color:#fafafa;border-radius:5px;padding:6px 16px}
.codelist a.item-top .codeicon{float:left;margin-left:10px;margin-right:10px}
.codelist a.item-top h4{color:#64854c;font-size:16px;font-weight:400;margin-top:10px;margin-bottom:10px;line-height:1.1em;text-align:left}
.codelist a.item-top strong{display:block;color:#666;text-align:left}
.codelist a.item-top:hover{background-color:#f1f1f1}
.codelist a.item-2 h4{color:#7ccd38}
.codelist a.item-3 h4{color:#52baf5}
.codelist a.item-1 div{padding-left:50px}

.codelist h2{font-size:18px;font-weight:400;margin:12px 0}

.article{background:#fff;border-bottom:0;margin:0 0 20px 0;border:1px solid rgba(0,0,0,.1);}
.article-body h2{font-size:1.2em;line-height:1.8em;background:#f1f7fd;padding:6px 10px;border-radius: 5px;margin:8px 0;}
div.left{color:#64854c;background-color:#fff;font-size:15px;margin:5px;padding:5px;font-weight:700;border-bottom: solid 1px #d4d4d4;}

div.code{width:98%;border:1px solid #d4d4d4;background-color:#f6f4f0;color:#444;padding:5px;margin:0}
div.code div{font-size:110%}
div.code div,div.code p,div.example_code p{font-family:"courier new"}

div.tryit_ex{clear:both;width:600px;height:50px;margin-bottom:5px}
div.tryit_ex img{border:0;float:left;margin-right:10px}
div.tryit_ex h2{padding-top:5px}

table.browserref{border-collapse:collapse;width:100%}
table.browserref tr:nth-child(even){background-color:#f6f4f0}
table.browserref tr:nth-child(odd){background-color:#fff}
table.browserref tr.fixzebra{background-color:#f6f4f0}
table.browserref th{height:32px;background-repeat:no-repeat;background-position:center center;border:1px solid #d4d4d4;background-color:#fff;font-weight:normal;color:#555;padding:5px;vertical-align:middle}
table.browserref td{border:1px solid #d4d4d4;text-align:center;padding:5px;padding-top:7px;padding-bottom:7px;vertical-align:top}
table.browserref .bsIE{background-image:url('/images/compatible_ie.gif')}
table.browserref .bsFirefox{background-image:url('/images/compatible_firefox.gif')}
table.browserref .bsEdge{background-image:url('/images/compatible_edge.gif')}
table.browserref .bsChrome{background-image:url('/images/compatible_chrome.gif')}
table.browserref .bsSafari{background-image:url('/images/compatible_safari.gif')}
table.browserref .bsOpera{background-image:url('/images/compatible_opera.gif')}
.marked{padding:0.2em;margin:0;background-color: #eceae6;border-radius:3px;font-weight:bold;font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace}
table.lamp{width:100%;padding:0;border:1px solid #d4d4d4}
table.lamp th{color:#000;background-color:#fff;padding:10px;padding-right:5px}
table.lamp td{padding:4px;padding-left:0;padding-right:10px;background-color:#fff}
table.tecspec td,table.tecspec th{border:1px solid #d4d4d4;padding:5px;padding-top:7px;padding-bottom:7px;vertical-align:top;text-align:left}
table.reference,table.tecspec{border-collapse:collapse;width:100%;margin-bottom:4px;margin-top:4px}
table.reference .fa {font-size:24px;}
table.reference tr:nth-child(odd){background-color:#f6f4f0}
table.reference tr:nth-child(even){background-color:#fff}
table.reference tr.fixzebra{background-color:#f6f4f0}
table.reference th{color:#fff;background-color:#555;border:1px solid #555;font-size:14px;padding-left:10px;vertical-align:top;text-align:left;line-height: 2em}
table.reference th a:link,table.reference th a:visited{color:#fff}
table.reference th a:active,table.reference th a:hover{color:#ee872a}
tr td:first-child{min-width:25px}
table.reference td{line-height:2em;min-width:24px;border:1px solid #d4d4d4;padding:5px;padding-top:7px;padding-bottom:7px;vertical-align:top}
table.reference td.example_code{vertical-align:bottom}
table.summary{border:1px solid #d4d4d4;padding:5px;font-size:100%;color:#555;background-color:#fafad2}


h2.home{margin-top:0;margin-bottom:5px;font-size:120%;padding-top:1px;padding-bottom:1px;padding-left:1px;color:#900b09;background-color:#fff}
h2.tutheader{margin:5px 0 0 0;padding-top:5px;border-top:1px solid #d4d4d4;clear:both}

a.showbtn,a.showbtn:link,a.showbtn:visited,a.tryitbtn,a.tryitbtn:link,a.tryitbtn:visited{
    display:inline-block;
    color:#FFF;
    background-color:#8ac007;
    font-weight:700;
    font-size:12px;
    text-align:center;
    padding-left:10px;
    padding-right:10px;
    padding-top:3px;
    padding-bottom:4px;
    text-decoration:none;
    margin-left:5px;
    margin-top:0;
    margin-bottom:5px;
    border:1px solid #aaa;
    border-radius:5px;
    white-space:nowrap
}

a.showbtn:active,a.showbtn:hover,a.tryitbtn:active,a.tryitbtn:hover{background-color:#fff;color:#90b575}
a.playitbtn,a.playitbtn:link,a.playitbtn:visited{
    display:inline-block;
    color:#fff;
    background-color:#ffad33;
    border:1px solid #ffad33;
    font-weight:700;
    font-size:11px;
    text-align:center;
    padding:10px;
    padding-top:1px;
    padding-bottom:2px;
    text-decoration:none;
    margin-left:1px;
    border-radius:5px;
    white-space:nowrap
}

a.playitbtn:active,a.playitbtn:hover{background-color:#fff;color:#ffad33}
a.tryitbtnsyntax:active,a.tryitbtnsyntax:hover,a.tryitbtnsyntax:link,a.tryitbtnsyntax:visited{font-family:verdana;float:right;padding-top:0;padding-bottom:2px;background-color:#90b575;border:1px solid #aaa}
a.tryitbtnsyntax:active,a.tryitbtnsyntax:hover{color:#90b575;background-color:#fff}
div.tutintro p{margin-top:0;font-size:14px}

.article-body{padding:10px 15px 20px 15px}
.article-body h3,.article-body h4,.article-body h5{font-size:1.1em;font-weight:700;border: 1px dashed #cae0f3;padding: 6px 10px;background: #f1f7fd;margin:8px 0;}
.article-body h3.heading{margin-top:0}

.article-intro h1{margin:0 0 5px 0;font-size:24px;text-indent:initial;text-decoration:none;color:#000}
.article-intro h1 span{color:#64854c}

.previous-next-links{line-height:32px;overflow:hidden;background:#fbfbfb;color:#8590a6;font-size:15px;padding: 0 20px;border-bottom:1px solid rgba(0,0,0,.1)}
.previous-next-links a{color:grey}
.previous-design-link{float:left;white-space:nowrap;}
.next-design-link{float:right;white-space:nowrap;}

.article-body blockquote p{text-indent:0}
.article-body p{word-wrap:break-word;word-break: break-all;font-size:14px;text-indent: 2em;line-height:2em}
.article-body p a{text-decoration:underline}
.big-middle-column{font-size:13px}

a.download{
    background:url('/images/download.png') no-repeat 15px center #f0f0f0;
    padding:10px 10px 10px 20px;
    margin:20px 40px 20px 0;
    color:#755c3b;
    display:inline-block;
    width:155px;
    text-align:center;
    border-radius:5px;
    text-decoration:none;
    font-size:20px
}

.article-body li > a:visited {color: #EC4E20;}
.article-body a {outline: none;color: #060;font-size: 13px;}
.article-body .quote,.article-body blockquote p{word-wrap:break-word;background:#f3f7f0;padding:4px;font-size:14px;font-style:italic;line-height:1.5em;font-weight:400!important}
.article-body .blockquote-full{background:#f3f7f0;padding:20px;margin:0 0 1.5em 0;font-size:1.5em;font-style:italic;line-height:1.5em;font-weight:400!important}
.article-body .pullquote-l{background:#f3f7f0;padding:20px;margin:0 1.5em 1em 0;font-size:1.5em;font-style:italic;line-height:1.5em;float:left;width:30%}
.article-body .pullquote-r{background:#f3f7f0;padding:20px;margin:1.5em 0 1.5em 1.5em;font-size:1.5em;font-style:italic;line-height:1.5em;float:right;width:30%}
.article-body .wp-caption{width:100%!important}
.article-body .caption,.article-body .wp-caption-text{padding:20px;margin:0 0 1.5em 0;font-style:italic;font-weight:400!important;border-bottom:1px solid #f1f1f1;font-size:1.2em!important;line-height:1.5em;color:#ccc}
.article-body .size-full{max-width:100%}
.article-body .two-column{-moz-column-count:2;-moz-column-gap:2em;-webkit-column-count:2;-webkit-column-gap:2em;margin:0 0 1.5em 0}
.article-body ol,.article-body ul,.sidebar-box ul{margin:0;padding:0;list-style-type:none}
.article-body ol li,.article-body ul li{font-size:14px;line-height: 1.8em;word-break: break-all;}
.article-body ul li p{padding:0 10px}

.article-body ul li, .sidebar-box ul li{padding:0 0 0 1.5em;margin:0 0 1em 1em;background-image: url(/images/bullet.png);background-repeat:no-repeat;background-position:left .5em}
.article-body ol li{list-style-type:decimal;margin:0 0 1em 2.5em;padding:0}
.article-body ol,.article-body ul{margin-top:1em;margin-bottom:1em}
.article-body .caption-right{display:block}

.article-heading h3{font-size:1.5em;color:#ccc}
.article-heading h3 em{font-weight:400}

.sidebar-box .sidebar-cate{padding:0;margin:0}
.sidebar-tree {padding:0}
.sidebar-tree ul{padding:0;margin:0}
.sidebar-tree ul li{line-height:2.5em;position:relative;vertical-align:middle;cursor:pointer;display:block;background-image:none;margin:0}
.sidebar-tree ul li .tit{display:block;font-weight:300}
.sidebar-tree ul li ul{position:absolute;background:#f6f4f0;right:100%;top:0;display:none;float:left;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-tree ul li ul{padding:0 10px}
.sidebar-tree ul li ul li i{color:#666;font-size:11px;padding:0 10px}
.sidebar-tree ul li.selected{z-index:99;position:relative}
.sidebar-tree ul li.selected .h2-tit{position:absolute;z-index:88;background-color:#f6f4f0;border-left:0;width:100%;height:100%;line-height:24px;color:#64854c}
.sidebar-tree a{color:#000;text-decoration:none}
.sidebar-tree a:hover{color:#000;text-decoration:underline}
.sidebar-tree a:active{color:#000}


.article-tree {padding:0}
.article-tree ul{padding:0;margin:0}
.article-tree ul li{line-height:2.5em;position:relative;vertical-align:middle;cursor:pointer;display:block;background-image:none;margin:0;padding-left: 1em}
.article-tree ul li .tit{display:block;font-weight:300}
.article-tree ul li ul{position:absolute;background:#f6f4f0;right:100%;top:0;display:none;float:left;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.article-tree ul li ul{padding:0 10px}
.article-tree ul li ul li i{color:#666;font-size:11px;padding:0 10px}
.article-tree ul li.selected{z-index:99;position:relative}
.article-tree ul li.selected .h2-tit{position:absolute;z-index:88;background-color:#f6f4f0;border-left:0;width:100%;height:100%;line-height:24px;color:#64854c}
.article-tree a{color:#000;text-decoration:none}
.article-tree a:hover{color:#000;text-decoration:underline}
.article-tree a:active{color:#000}

.field-info{margin:10px 0 5px 15px;float:left;color:#111;opacity:.5}
.error,.success{padding:10px;color:#fff;font-weight:700;font-size:1.2em;margin:0 0 20px 0}.error{background-color:#b97d7d}
.error p{margin:0;padding:0;font-size:1em}
.success{background-color:#96b97d}
.archive-list .categories{white-space:nowrap}

.archive-list{background:#fff;margin:0 0 20px 0;border:1px solid #efefef;overflow:hidden}
.archive-list-item:nth-child(even){background:#fbfbfb;border-top:1px solid #efefef;border-bottom:1px solid #efefef}
.archive-list-item{padding:20px;overflow:hidden}
.archive-list-item h2{font-weight:700;margin:0 0 10px 0;font-size:1.2em}.archive-list-item p{margin:0 0 10px 0}
.author-archive-intro h2{margin:0 0 10px 0}


article-body .author-social-links li{height:30px;padding:10px 0 0 40px;margin:0}
.left-column .gallery-list .design img{margin-bottom:10px}

.image-layout-style{background:0}
.archive-list .archive-list-item img{float:left;margin:0 20px 10px 0;width:90%}
.home-latest-articles .archive-list-item img{float:right!important;margin:0 0 10px 20px;width:35%}
.archive-list-item .colors a{display:block;float:left;text-indent:-9999px;width:10px;height:10px;border-radius:10px}
.archive-list-item img.wp-post-image{max-height:109px;float:left;width:25%}
.archive-list-item .post-intro{float:right;}
.archive-gallery .archive-list-item img.gallery-image{float:left;width:47%}
.archive-gallery .archive-list-item .design-information{float:right;width:47%}
.image-layout-style{background:0;border:0}
.image-layout-style .archive-list-item{width:47.5%;float:left;overflow:hidden;background:#fbfbfb;border:0 solid #efefef;margin:0 1% 10px 0;padding:1%}
.image-layout-style .author,.image-layout-style .categories,.image-layout-style .colors,.image-layout-style .date,.image-layout-style h2,.image-layout-style p{display:none}
.image-layout-style .archive-list-item img{display:block;width:100%!important;margin:0}
.image-layout-style .image-alternative{width:90%;padding:15% 5% 15% 5%;height:50px;text-indent:0;color:#333;font-weight:700;font-size:1.4em;background-image:none}
.image-layout-style .archive-list-item:nth-child(even){margin:0 0 10px 0}

.archive-options .choose-color{overflow:hidden}
.archive-options .choose-color a{display:block;float:left;text-indent:-9999px;width:15px;height:15px;margin:0 5px 5px 0;border-radius:15px}
.archive-options .choose-color a.remove_filter{color:#64854c;text-indent:0}
.design-image img,.design-image-detail img,.gallery-image{-webkit-box-shadow:rgba(0,0,0,.246094) 0 1px 2px 0,transparent 0 0 0 0,transparent 0 0 0 0;border-radius:3px;border-style:solid;border-width:3px;border-color:#fff;box-shadow:rgba(0,0,0,.246094) 0 1px 2px 0,transparent 0 0 0 0,transparent 0 0 0 0;box-sizing:border-box;outline-color:#585652;outline-width:0}

span.accepted,span.pending,span.rejected{text-transform:uppercase;font-size:.8em;padding:3px 6px 3px 6px;margin:0 0 0 5px}
span.pending{background:#f7e8c4}
span.rejected{background:#efd4d4}
span.accepted{background:#d9e8cf}
.design-image{background:#fbfbfb;padding:20px 0 20px 0;width:100%;text-align:center;border-bottom:0}
.design-image img{width:94%}
.design-image-detail{overflow:hidden;background:#fdfdfd;margin:0 0 20px 0;padding:20px 0 20px 0;width:100%;text-align:center}
.design-image-detail img{width:44%;margin:0 3% 0 3%;float:left}
.design-details{overflow:hidden}
.design-description{width:45%;margin:0 5% 0 0;float:left;min-width:198px}
.design-meta{width:45%;float:left;min-width:198px}
.design-page .author,.design-page .categories,.design-page .design-colors,.design-page .rating{border-bottom:1px solid #efefef;width:100%;padding:10px 0 10px 25px;margin:0;display:block}
.related-designs{overflow:hidden}
.related-designs img{width:30%;margin:5px 3% 5px 0;float:left}
.article-body .star-rating li{display:inline;margin:0;padding:0}

span.new{float:right;color:#fff;background-color:#90b575;font-weight:700;padding-left:1px;padding-right:1px;border:1px solid #fff;outline:1px solid #90b575;line-height:16px}

.sidebar-box table{width:100%;margin-top:10px}
.sidebar-box td,.sidebar-box td.key{padding:5px 20px 5px 0;vertical-align:middle;font-size:1em;color:grey}
.sidebar-box td.key{color:#000}
.sidebar-box tr{border-bottom:1px solid #efefef;display:block}
.sidebar-box table td:nth-child(odd){width:30px}
.sidebar-box td.step{width:40px!important}
.archive-gallery .archive-list-item img{width:45%}

#page_numbers{overflow:hidden}
#page_numbers ul{margin:0;padding:0 0 20px 0;width:auto}
#page_numbers li{display:block;float:left;text-align:center}
#page_numbers li a{background-color:#fbfbfb;text-decoration:none;padding:3px 8px 3px 8px;display:block;float:left;margin:0 5px 5px 0;text-align:center;border:1px solid #fbfbfb;color:#acacac;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#page_numbers li{color:#acacac}
#page_numbers li a:hover{border:1px solid #dedede}
#page_numbers .active_page a{
    opacity:.7;
    color:grey;
    text-shadow:0 1px 0 rgba(255,255,255,.15);
    border:1px solid rgba(0,0,0,.2);
    -moz-background-clip:padding;
    -webkit-background-clip:padding-box;
    background-clip:padding-box;
    background-color:#f2f2f2;
    background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMTclIiB4Mj0iNTAlIiB5Mj0iLTE3JSI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDAiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmYiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==);
    background-image:-moz-linear-gradient(bottom,rgba(0,0,0,.05) -17%,rgba(255,255,255,.05) 117%);
    background-image:-o-linear-gradient(bottom,rgba(0,0,0,.05) -17%,rgba(255,255,255,.05) 117%);
    background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,.05) -17%,rgba(255,255,255,.05) 117%);
    background-image:linear-gradient(bottom,rgba(0,0,0,.05) -17%,rgba(255,255,255,.05) 117%)
}

#page_numbers li span{
    text-decoration:none;padding:3px 8px 3px 8px;
    display:block;
    float:left;margin:0 5px 5px 0;
    text-align:center;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px opacity:.7;
    color:grey;text-shadow:0 1px 0 rgba(255,255,255,.15);
    border:1px solid rgba(0,0,0,.2);
    -moz-background-clip:padding;
    -webkit-background-clip:padding-box;
    background-clip:padding-box;
    background-color:#f2f2f2;
    background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMTclIiB4Mj0iNTAlIiB5Mj0iLTE3JSI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDAiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmYiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==);
    background-image:-moz-linear-gradient(bottom,rgba(0,0,0,.05) -17%,rgba(255,255,255,.05) 117%);
    background-image:-o-linear-gradient(bottom,rgba(0,0,0,.05) -17%,rgba(255,255,255,.05) 117%);
    background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,.05) -17%,rgba(255,255,255,.05) 117%);
    background-image:linear-gradient(bottom,rgba(0,0,0,.05) -17%,rgba(255,255,255,.05) 117%)
}
#page_numbers .active_page a:hover{border:1px solid rgba(0,0,0,.2)}
#page_numbers .page_info{width:auto;padding:2px 6px 2px 6px}
#page_numbers .space{margin:0 10px 0 0}

.gallery-list{padding:0}

.design{padding:4px;margin:0;overflow:hidden}
.design img{margin:0 0 5px 0}
.design:nth-child(even){background:#fbfbfb;border-top:1px solid #efefef;border-bottom:1px solid #efefef}
.design .author{margin:2px 0 0 0}

.design a{line-height:2.5em;font-size:14px;font-weight:300;text-decoration:none;display:block;padding-left:10px;color:#000}
.design a:hover, .design .on {background-color: rgb(150, 185, 125);font-weight: bold;color: rgb(255, 255, 255);}
.design .has-link{padding-left: 0}

.recommend-here{margin:0 auto 10px auto;padding:0;background-color:#e9e9e9;text-align:center;overflow:hidden}
.recommend-here a{width:100%;background:#efefef;display:block;padding:5px 0 5px 0;color:#ccc}
.recommend-here.list-link a{color:#64854c;font-weight:700;font-size: 16px;}

footer{min-width:100%;margin-top:20px!important}
#footer .copyright{font-size:12px;color:#999;margin:0 auto;width:90%;text-align:center;padding:20px 0}
#footer .copyright a{color:#999}
#footer .copyright a:hover{color:#35b558}

.fade.in{opacity:1}
.fixed-btn .modal.fade.in{top:auto;bottom:0;height:188px;width:128px;padding:10px;margin:0;right:65px;left:auto;text-align:center}
.fixed-btn .modal.fade.in h4{margin:0 0 10px;font-size:14px}
.fixed-btn .modal.fade.in:after,.fixed-btn .modal.fade.in:before{position:absolute;top:109px;right:-8px;content:'';display:inline-block;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:9px solid white}
.fixed-btn .modal.fade.in:before{right:-9px;border-left:9px solid #d9d9d9}
.fixed-btn{position:fixed;right:1%;bottom:5%;width:40px;border:1px solid #eee;background-color:white;font-size:24px;z-index:1040;-webkit-backface-visibility:hidden}
.fixed-btn a{display:inline-block;width:40px;height:40px;text-align:center}
.fixed-btn a:after{content:".";font-size:0;height:100%;display:inline-block;vertical-align:middle}
.fixed-btn a i{vertical-align:middle}
.fixed-btn .go-top{border-bottom:1px solid #eee}
.fixed-btn .writer{background-color:#96b97d;font-size:18px;color:white}
.fixed-btn .hide-go-top{display:none;opacity:0;filter:alpha(opacity=0)}
.hide{display:none}
.modal{background-color:white;border:1px solid #d9d9d9;font-size:14px;font-weight:normal;line-height:20px;position:fixed;top:10%;left:50%;z-index:1050;width:560px;margin-left:-280px;border:1px solid rgba(0,0,0,0.3);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0,0,0,0.3);-moz-box-shadow:0 3px 7px rgba(0,0,0,0.3);box-shadow:0 3px 7px rgba(0,0,0,0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;outline:0}

.hl-default{color:#000}
.hl-code{color:Gray}
.hl-brackets{color:Olive}
.hl-comment{color:#a50}
.hl-quotes{color:#8b0000}
.hl-string{color:#a11}
.hl-identifier{color:#05a}
.hl-builtin{color:Teal}
.hl-reserved{color:Green}
.hl-inlinedoc{color:#00f}
.hl-var{color:#00008b}
.hl-url{color:#00f}
.hl-special{color:Navy}
.hl-number{color:Maroon}
.hl-inlinetags{color:#00f}
.hl-main{background-color:#fff;font-family:Menlo,Monaco,Consolas,"Andale Mono","lucida console","Courier New",monospace;white-space:pre-wrap;word-break:break-all;word-wrap:break-word}
.hl-gutter{background-color:#999;color:#fff}
.hl-table{font-family:courier;font-size:12px;border:solid 1px #d3d3d3}

.bottom-next-prompt{float: left;}
.bottom-summary-prompt{float: right;}

@media handheld,only screen and (max-width:1024px){
    .right-column{display:none}
    .pc-nav{display:none}
    .mobile-nav{display:inline-block;width:100%}
    .middle-column-home{width:68%;margin-right:0}
    .middle-column{width:83%}
    .big-middle-column{width:100%}
    .swatch{display:none}
    .home_feature_thumbnail{width:43%;float:right;margin:0 0 20px 20px}
    .sub-navigation-articles{display:none}
    #footer .copyright{background:#fff;padding-top:20px;padding-bottom:20px;margin-top:20px;-moz-box-shadow:0 -1px 1px #ececec;box-shadow:0 -1px 1px #ececec}

    .codelist a.item-top h4{font-size:14px;text-align:left;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left: 10px}
    .codelist a.item-top{width:40%}
}

@media handheld,only screen and (max-width:768px){
    .logo span{display: none;}
    .main{margin:0}
    .previous-next-links{line-height:40px}
    .article{border:none}
    .tab-logo {display: none;}

    body{-webkit-text-size-adjust:none;-webkit-appearance:none}
    .right-list button{display:block}
    input[type=radio]{-webkit-appearance:"radio"}
    .shortcuts .shortcut{width:22.4%}
    .page,.horizon,body{min-width:0;margin-left:0;margin-right:0;padding-left:0;padding-right:0}
    .col,.fivecol{width:auto;float:none;margin-left:0;margin-right:0}

    .archive-options{display:none}
    .left-column{display:none}
    .right-column{display:none}
    .middle-column,.middle-column-home{width:100%}
    .re-box{margin:0;padding:10px}

    .search{width:30%;float:right}
    .logo{width:40%;float:left}
    .codelist a.item-top strong{text-align:left}
    .codelist a.item-top{width:43%}
    .right-column{display:none}
    .horizon .breadcrumb{padding-left: 5px;}
}

@media handheld,only screen and (max-width:540px){
    .logo span{display: none;}
    .main{margin:0}
    .previous-next-links{line-height:40px}
    .article{border:none}

    body{-webkit-text-size-adjust:none;-webkit-appearance:none}
    .right-list button{display:block}
    input[type=radio]{-webkit-appearance:"radio"}
    .shortcuts .shortcut{width:22.4%}
    .page,.horizon,body{min-width:0;margin-left:0;margin-right:0;padding-left:0;padding-right:0}
    .col,.fivecol{width:auto;float:none;margin-left:0;margin-right:0}

    .archive-options{display:none}
    .left-column{display:none}
    .right-column{display:none}
    .middle-column,.middle-column-home{width:100%}
    .re-box{margin:0;padding:10px}
    .horizon .breadcrumb{padding-left: 5px;}

    .search{width:30%;float:right}
    .logo{width:40%;float:left}
    .codelist a.item-top strong{text-align:left}
    .codelist a.item-top{width:41%}
    .right-column{display:none}
    .bottom-summary-prompt{display:none}
}

@media handheld,only screen and (max-width:480px){
    div.example_code{width:96%}
    .main{margin:0}
    .previous-next-links{line-height:30px}
    .article{border:none}
    .shortcuts .shortcut{width:45%}
    .search{width:100%;float:none}
    .codelist-desktop{display:block}
    .search-reveal{background-image:url(../images/search.png);background-size:15px 15px;background-repeat:no-repeat;text-indent:-9999px;display:inline-block;width:20px;margin:5px;float:right}

    .logo{width:80%;float:left}
    .logo h1{background-size:198px 30px}

    .sub-navigation{display:none}
    .sub-navigation-mobile{display:block;width:90%;margin:0 auto}
    .nav-sub-mobile{font-size:1.1em;font-family:proxima-nova,'Helvetica Neue',Helvetica,Arial,sans-serif;padding:0}
    .mobile-nav-hidden{display:none;padding:10px 0 0 0;background:#fff;border-right:1px solid #efefef;border-left:1px solid #efefef}
    .nav-sub-mobile ul{list-style:none}
    .nav-sub-mobile li a{padding:5px 0 5px 20px;display:block;text-decoration:none}
    .nav-sub-mobile li a:hover,.nav-sub-mobile li.current-cat a{background:#f1f1f1}
    .nav-sub-mobile li a{color:#333}
    .nav-sub-mobile li a:hover{color:#777}

    .archive-list-item img.wp-post-image{float:right!important;margin:0 0 10px 20px}
    .nav-submit{display:none}
    .left-column{display:none}
    .right-column{display:none}
    .nav li,.nav-sub li{margin:0 10px 0 0}
    .logo,.search{text-align:center}
    .search-mobile{margin:0 0 10px 0}
    .search input{text-align:center}
    .search input{height:30px}
    .search-pc{display:none}
    .logo img{padding:5px 0 0 0}
    .tab{margin:0 auto}

    .archive-list-item img,.home_feature_thumbnail{width:50%!important}
    .archive-gallery .archive-list-item img.gallery-image{display:inline-block;width:100%!important;float:none}
    .archive-gallery .archive-list-item .design-information{width:100%;float:none}
    .image-alternative{display:none}
    .image-layout-style .image-alternative{display:block}
    .middle-column-home{width:100%!important;padding:0px 20px;border:none}
    .article-body .two-column{-moz-column-count:1;-webkit-column-count:1;margin:0 0 1em 0}
    .archive-list-item .post-intro{float:none;width:100%}
    .article-heading{padding:10px 20px 5px 20px}
    .article-body{padding-left:20px;padding-right:20px}
    .article-body h2,.article-heading h2,.comments-heading h2{font-size:1.2em}
    .article-body h3,.article-heading h3,.comments-body h3,.comments-heading h3{font-size:1.1em}
    .article-body h4,.article-heading h4,.comments-body h4,.comments-heading h4{font-size:1.1em}
    .article-body h5,.article-heading h5,.comments-body h5,.comments-heading h5{font-size:1.1em}
    .article-heading h3{font-size:1.2em}
    .article-body .quote,.article-body .quote-left,.article-body .quote-right{padding:10px;font-size:1.2em;float:none;width:auto;margin-left:0;margin-right:0}
    .comments-heading h2{float:none}.comments-heading h3{float:none}
    .image-layout-style .archive-list-item{width:94%;padding:3%}

    .archive-options .archive-search{display:none}
    .archive-options .archive-category select{height:27px}
    .archive-options .archive-category{width:60%;margin:0}

    .article-intro h1 {font-size: 1.6em}

    .design-description{width:100%;margin:0}
    .design-meta{width:100%}
    .related-designs img{width:100%;margin:0 0 20px 0}

    .article-body ul.activity-dropdown li{text-align:left;border-bottom:1px solid #efefef;padding:10px 10px 10px 30px;background-color:#fff;background-repeat:no-repeat;background-position:left center;background-size:17px auto}
    .article-body ul.activity-dropdown li span{color:grey;display:block;float:none;font-size:.8em}
    .article-body ul.activity-dropdown li img{width:100%;display:block;margin:20px 0 0 0}

    .codelist a.item-top strong{padding-right:5px}
    .codelist a.item-top{width:100%;height:80px;color:#bbb;background-color:#f6f6f6;border-radius:5px;padding:0}
    .codelist a.item-top h4{font-size:14px;text-align:left}
    .bottom-summary-prompt{display:none}
}

@media only screen and (-webkit-min-device-pixel-ratio:2){
    .logo h2, .logo h1{
        background:url(/images/blogo.png) no-repeat left center;
        background-size:240px 81px
    }

    .nav .current{
        background-image:url(./assets/img/navarrow@2x.png);
        -webkit-background-size:auto 8px;
        -moz-background-size:auto 8px;
        background-size:auto 8px
    }

    .article-body ul li{
        list-style-type:none;
        background-image: url(/images/bullet@2x.png);
        background-repeat:no-repeat;
        background-position:left .4em;
        padding:0 0 0 1.2em;
        -webkit-background-size:auto 8px;
        -moz-background-size:auto 8px;
        background-size:auto 8px
    }
}

@media handheld,only screen and (max-width:400px){
    .logo h2,.logo h1{
        background:url(/images/blogo.png) no-repeat left center;
        background-size:240px 81px
    }
    .logo span{display: none;}
}

@media handheld,only screen and (max-width:1260px){
    #footer .copyright {background: #fff;}
}

.important {color: red;font-weight: bold;}
.img-center {text-align:center}
.nav-padding {padding-right:3px}
.article-body p.title-divider{line-height:5px}

.article-body p.tiy {
    display: inline-block;
    margin-top: 15px;
    margin-bottom: 10px;
    vertical-align: middle;
    color: rgb(255, 255, 255);
    background-color: rgb(233, 104, 107);
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 6px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    font-size: 14px;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    outline: 0px;
    padding: 8px 18px;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.2s ease-out 0s;
    border-radius: 2px;
    text-indent: 0;
    line-height: 1em;
}

.article-body p.tiy a {color:#fff;font-weight:600;text-decoration:none}
.article-body p.tiy a:hover{color:#e3efd9}
p.note span{font-weight: bold;}

h3.left-blank{margin-left: 5px}
.article-body p.return{text-indent:0em;line-height:3em}
em {font-weight: bold;font-style: normal}

#leftcolumn {max-height: 120em;overflow: scroll}