html{overflow-y:scroll;min-height:100%}
ins.adsbygoogle[data-ad-status="unfilled"] {
display: none !important;
}
body{position:relative;background: #F2F2F2 url(images/backgrounds/bg-stripe-light.jpg) repeat 0px 0px;}
a:hover,a:active{outline:0}
textarea{overflow:auto}
img::selection{background:transparent}
img::-moz-selection{background:transparent}
fieldset,img,iframe{border:0}
input[type='button'],input[type='submit'],input[type='checkbox'],input[type='image'],input[type='radio'],input[type='reset'],select,button,label{cursor:pointer}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}
body{margin:0}
p,hr,ul,ol,dl,blockquote,pre,figure{margin:15px 0}
h1,h2,h3,h4,h5,h6{margin:25px 0 15px 0}
dd{margin-left:40px}
h1,h2,h3,h4,h5,h6{font-weight:normal}
h1{font-size:36px;line-height:36px}
h2{font-size:24px;line-height:24px}
h3{font-size:18px;line-height:18px}
h4,h5,h6{font-size:16px;line-height:16px}
a,a:hover{text-decoration:none}
small{font-size:11px}
ins{text-decoration:none}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
dfn[title]{font-style:normal}
hr{display:block;height:1px;padding:0;border:0;border-top:1px solid}
q,blockquote{quotes:'\201C' '\201D' '\2018' '\2019';font-family:"Times New Roman",Times,serif;font-style:italic}
blockquote{padding:0 20px;font-size:16px;line-height:22px}
blockquote:before{content:'\201C'}
blockquote:after{content:'\201D'}
code,pre{font-family:"Courier New",Courier,monospace}
code{word-spacing:-2px}
pre{padding:10px;font-size:12px;line-height:18px;white-space:pre-wrap}
table{border-collapse:collapse;border-spacing:0}
th,td{padding:1px}
input,select{vertical-align:middle}
select,input,textarea,button{font:12px Arial,sans-serif}
form,textarea{margin:0}
legend,fieldset,input{padding:0}
textarea,input[type='text'],input[type='password'],select{padding:2px}
select{line-height:19px}
button,input[type='button'],input[type='submit']{padding:2px 3px}
body{font-family:Arial,Helvetica,sans-serif;color:#777}
h1{color:#666}
a{color:#48b}
em{color:#555}
code{padding:1px 2px;border:1px solid rgba(0,0,0,0.1);border-radius:2px;background:url(images/code.png) 0 0 repeat;color:#444}
hr{border-top-color:#d3d3d3}
pre{border:1px solid #d3d3d3;border-radius:5px;background:#fafafa}
::-moz-selection{background:#39f;color:#fff}
::selection{background:#39f;color:#fff}
.clearfix:before,.clearfix:after,.grid-block:before,.grid-block:after,.deepest:before,.deepest:after{content:"";display:table}
.clearfix:after,.grid-block:after,.deepest:after,.clearboth{clear:both}
.width16{width:16.666%}
.width20{width:20%}
.width25{width:25%}
.width33{width:33.333%}
.width40{width:40%}
.width50{width:50%}
.width60{width:60%}
.width66{width:66.666%}
.width75{width:75%}
.width80{width:80%}
.width100{width:100%}
.bfc-o{overflow:hidden}
.bfc-f{width:100%;float:left}
.float-left{float:left}
.float-right{float:right}
.grid-gutter.grid-block{margin:15px -15px 0 -15px}
.grid-gutter.grid-block:first-child{margin-top:0}
.grid-gutter>.grid-box>*{margin:0 15px}
.wrapper{margin:auto}
#header{position:relative}
#toolbar .float-left .module,#toolbar .float-left>time{margin:0 15px 0 0;float:left}
#toolbar .float-right .module{margin:0 0 0 15px;float:right}
#headerbar .module{max-width:300px;margin-right:0;float:right}
#banner{position:absolute;top:0;right:-200px}
#footer{position:relative}
.module{margin:5px 10px;}
#header{margin-bottom:10px}
#toolbar{margin-bottom:15px}
#headerbar{margin-bottom:30px}
#footer{color:#CCC;font-size:13px;background:#242424}
.wrapper{width:1100px;margin:0 auto}
#top-menu{width:100%;background:url(images/top-menu-bg.png) repeat-x 0 0}
.toolbar-block{width:630px}
#top-menu-shadow{width:100%;height:16px;background:url(images/top-menu-shadow.png) repeat-x 0 0}
#top-widget{float:left;width:70px;height:17px;margin:5px 10px 5px 10px;font-size:.7em;color:#FFF}
.top-social .rss{float:left;margin:0 7px 0 0;background:url(images/rss-small.png) no-repeat 0 0;width:16px;height:18px}
.top-social .facebook{float:left;margin:0 7px 0 0;background:url(images/facebook-small.png) no-repeat 0 0;width:16px;height:18px}
.top-social .twitter{float:left;margin:0;background:url(images/twitter-small.png) no-repeat 0 0;width:16px;height:18px}
/* The accent stripe and radius moved onto .form-wrapper itself, which now
draws the whole control - a 4px stripe outside a rounded field left a
square blue tab hanging off its left edge. */
#search{margin:70px 0 12px 0;}
#page-highlight{width:600px;margin:0 auto;height:180px;background:url(images/page-highlight.png) no-repeat -40px -70px;position:absolute}
#page-wrapper{width:1000px;margin:0 auto}
#logo-bar{padding:5px 20px 0 20px;}
#logo-wrapper{text-align: center;}
/* The header tagline. Was a flat keyword sentence ("...HD, 4K Ultra HD, 5K,
8K UHD monitor resolutions...") in a plain div - not a heading, identical
on every page, and display:none on mobile, so on the version Google
actually indexes it did not render at all. The same words now carry links
to the resolution pages, which is worth something (crawl paths, anchor
text) where repeated keywords no longer are. */
.subtitle{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
gap:7px;
padding:7px 20px 0;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
color:#8b949c;
text-align:center;
}
.subtitle a{
display:inline-block;
padding:3px 10px;
border:1px solid #d7dde2;
border-radius:20px;
background:rgba(255,255,255,.7);
color:#5b6470;
font-size:11px;
font-weight:700;
letter-spacing:.5px;
text-decoration:none;
transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.subtitle a:hover{background:#1D9DD2;border-color:#1D9DD2;color:#fff;text-decoration:none}
#ad-header{float:right;padding:15px 0 0 0}
#content-wrapper{width:1070px;background:#FFF;padding:10px 15px 0 15px;border-radius: 7px 7px 0 0;}
#cat-menu-wrapper{width:1070px;float:left;}
#cat-menu-top-left{background:#FFF;width:2px;height:2px;float:left}
#cat-menu-top-right{background:#FFF;width:2px;height:2px;float:right}
#cat-menu-bottom-left{background:#FFF;width:2px;height:2px;float:left}
#cat-menu-bottom-right{background:#FFF;width:2px;height:2px;float:right}
#cat-menu-inner{display:flex;}
#cat-menu-inner .left-cap{float:left;width:3px;height:43px;background:url(images/cat-menu-bg.png) repeat-x 0 0;-moz-border-radius-topleft:3px;border-top-left-radius:3px;-moz-border-radius-bottomleft:3px;border-bottom-left-radius:3px;position:relative;z-index:100}
#cat-menu-inner .right-cap{float:right;width:3px;height:43px;background:url(images/cat-menu-bg.png) repeat-x 0 0;-moz-border-radius-topright:3px;border-top-right-radius:3px;-moz-border-radius-bottomright:3px;border-bottom-right-radius:3px}
.cat-menu #random-article{float:right;padding:10px 10px 0 0}
.cat-menu{margin:0 auto;float:left;position:relative;z-index:30}
.cat-menu ul{float:left;list-style-type:none;margin:0;padding:0;position:relative;z-index:99}
.cat-menu #last-item{width:1px;height:43px;border-left:1px solid #515659;float:left}
.cat-menu div.menu{float:left}
.cat-menu ul li{float:left;padding:0;margin:0;position:relative;letter-spacing:1.5px;background-color: #3c3c3c;margin-left: 5px;border-radius: 5px 0;background: linear-gradient(90deg, #474b53, #343434);}
.cat-menu ul li a.home{border-left:4px solid #b365ad;}
.cat-menu ul li a.home:hover{background-color:#b365ad;}
.cat-menu ul li a.latest{border-left:4px solid #65b39e;}
.cat-menu ul li a.latest:hover{background-color:#65b39e;}
.cat-menu ul li a.sort{border-left:4px solid #6571b3;}
.cat-menu ul li a.sort:hover{background-color:#6571b3;}
.cat-menu ul li a.res{border-left:4px solid #74b365;}
.cat-menu ul li a.res:hover{background-color:#74b365;}
.cat-menu ul li a.random{border-left:4px solid #d04c4c;padding: 10px 18px;}
.cat-menu ul li a.random:hover{background-color:#d04c4c;}
.cat-menu ul li a.app{background-color:#78C257;}
.cat-menu ul li a.app:hover{background-color:#a4c639;}
.cat-menu ul li a{font-size:20px;display:block;padding:8px 18px;text-align:center;color:#fff;text-transform:uppercase;font-family:BebasNeueRegular,Arial,Sans-Serif;border-radius:5px 0;}
.cat-menu ul li a:hover,.cat-menu ul li.current-menu-item a,.cat-menu ul li.current_page_item a,.cat-menu ul li.current_page_ancestor a,.cat-menu ul li.current_page_parent a{background-color:#6571b3;color:#FFF;}
.cat-menu ul li:hover a,.cat-menu ul li.over a{background-color:#6571b3;color:#FFF;}
.cat-menu ul li:hover ul,.cat-menu ul li.over ul{display:block}
.cat-menu ul li ul li.current_page_item a,.cat-menu ul li ul li.current_page_ancestor a,.cat-menu ul li ul li.current_page_parent a{text-align:left}
.cat-menu ul li ul li.current_page_item a:hover{text-align:left}
.cat-menu ul li ul{display:none;position:absolute;padding:0;}
.cat-menu ul li ul li{float:none;padding:0;margin:0;}
.cat-menu ul li ul li a,.cat-menu ul li:hover ul li a,.cat-menu ul li.over ul li a{width:115px;padding:10px 20px 10px 18px;display:block;text-align:left;height:auto;background:0;border-top:1px solid #4f5359;border-bottom:1px solid #3a3e43;border-left:4px solid #6571b3;color:#FFF;border-right:0;font-size:12px;font-family:Arial,Helvetica,sans-serif}
.cat-menu ul li ul li a:hover{background-color:#6571b3;color:#FFF}
.cat-menu ul li ul li:hover a,.cat-menu ul li ul li.over a{background-color:#6571b3;color:#FFF}
.cat-menu ul li ul li ul{display:none;position:absolute;left:160px;top:-1px}
.cat-menu ul li ul li:hover ul,.cat-menu ul li ul li.sfHover ul{display:block;position:absolute;left:160px;top:0;background:#44484b}
.cat-menu ul li ul li ul li a:hover{text-align:left;background:#0175cb url(images/main-menu-highlight.png) repeat-x 0 0}
.cat-menu ul li ul li:hover ul li a,.cat-menu ul li ul li.over ul li a{background:0;color:#FFF}
.cat-menu ul li ul li ul li a:hover{background:#0175cb url(images/main-menu-highlight.png) repeat-x 0 0;color:#FFF}
.cat-menu a.sf-with-ul{padding-right:25px;min-width:1px}
.cat-menu .sf-sub-indicator{position:absolute;display:block;right:9px;top:10px;width:10px;height:10px;text-indent:-999em;overflow:hidden;background:url(images/arrows-000000.png) no-repeat -10px -100px}
.cat-menu a>.sf-sub-indicator{top:15px;background-position:0 -100px}
.cat-menu a:focus>.sf-sub-indicator,.cat-menu a:hover>.sf-sub-indicator,.cat-menu a:active>.sf-sub-indicator,.cat-menu li:hover>a>.sf-sub-indicator,.cat-menu li.over>a>.sf-sub-indicator{background-position:-10px -100px}
.cat-menu ul li ul .sf-sub-indicator{background-position:-10px 0;right:8px;top:13px}
.cat-menu ul li ul a>.sf-sub-indicator{background-position:0 0}
.cat-menu ul li ul a:focus>.sf-sub-indicator,.cat-menu ul li ul a:hover>.sf-sub-indicator,.cat-menu ul li ul a:active>.sf-sub-indicator,.cat-menu ul li ul li:hover>a>.sf-sub-indicator,.cat-menu ul li ul li.over>a>.sf-sub-indicator{background-position:-10px 0}
.cat-menu.tax{height:43px;overflow:hidden;position:relative;z-index:20}
.cat-menu.tax ul{padding-left:10px}
.cat-menu.tax ul li a{font-size:19px;height:19px;font-size:13px;padding:5px 13px 9px 13px;margin-top:10px;border:0;text-transform:none;font-family:Arial,Helvetica,sans-serif}
.cat-menu.tax ul li:hover a,.cat-menu.tax ul li.over a{background:0}
.cat-menu.tax ul li a:hover,.cat-menu.tax ul li.current_page_item a,.cat-menu.tax ul li.current_page_ancestor a,.cat-menu.tax ul li.current_page_parent a{background:#FFF;color:#333;-moz-border-radius-topleft:3px;border-top-left-radius:3px;-moz-border-radius-topright:3px;border-top-right-radius:3px}
#cat-menu-inner.tax .left-cap{-moz-border-radius-bottomleft:0;border-bottom-left-radius:0}
#cat-menu-inner.tax .right-cap{-moz-border-radius-bottomright:0;border-bottom-right-radius:0}
#cat-menu-inner.tax .left-cap.tax{-moz-border-radius-bottomleft:3px;border-bottom-left-radius:3px;-moz-border-radius-topleft:0;border-top-left-radius:0}
#cat-menu-inner.tax .right-cap.tax{-moz-border-radius-bottomright:3px;border-bottom-right-radius:3px;-moz-border-radius-topright:0;border-top-right-radius:0}
li.item a{cursor:pointer}
.mosaic-block{float:left;position:relative;overflow:hidden;width:240px;height:150px;background:#FFF url(images/progress.gif) no-repeat center;margin:0px 4px;}
.mosaic-backdrop{display:none;position:absolute;bottom:-65px;height:100px;background:#FFF}
.mosaic-overlay{display:none;z-index:5;position:absolute;width:100%;height:100%;background:#FFF}
.number{font-family:BebasNeueRegular,Arial,Sans-Serif;color:#FFF}
.number.color1{background:#ff3535}
.number.color2{background:#ff6317}
.number.color3{background:#c0b814}
.number.color4{background:#73b114}
.number.color5{background:#0aad4b}
.number.nocolor{background:#000}
.letter{font-family:ProcionoRegular,Georgia,Serif;color:#FFF}
.letter.color1{background-color:#ff3535}
.letter.color2{background-color:#ff6317}
.letter.color3{background-color:#c0b814}
.letter.color4{background-color:#73b114}
.letter.color5{background-color:#0aad4b}
.letter.nocolor{background-color:#000}
fieldset,img,iframe{border:0}
.admin_controls{bottom:327px;left:0;background:black;display:inline-block;width:160px;z-index:20000;padding:5px}
.admin_controls a{margin-left:5px;float:left;text-decoration:none}
#featured-wrapper .stars{background:#000;bottom:359px;padding:5px 3px 6px 6px}
#featured-wrapper .number{font-size:1.9em;bottom:353px;padding:5px 9px 3px 9px}
#featured-wrapper .letter{font-size:1.7em;bottom:353px;padding:5px 11px 3px 11px}
.bebas{font-family:BebasNeueRegular,Arial,Sans-Serif}
#content{float:left;width:100%}
.wallpapers_content{margin-left:-10px;display:inline-block;margin-top:10px}
#content article{float:left;margin-left:5px;margin-bottom:5px;position:relative}
#content article a.cswall{-webkit-box-shadow:0 1px 3px rgba(0,0,0,.2);-moz-box-shadow:0 1px 3px rgba(0,0,0,.2);box-shadow:0 1px 3px rgba(0,0,0,.2);border:1px solid white;background-color:#f5f5f5;background:-webkit-gradient(linear,left bottom,left top,from(#f2f2f2),to(#fff));background:-moz-linear-gradient(bottom,#f2f2f2,#fff);background:-o-linear-gradient(bottom,#f2f2f2,#fff);background:linear-gradient(bottom,#f2f2f2,#fff);display:inline-block;margin:2px;padding:6px}
#content article a.disabled{border:1px solid red}
#content article a.featured{border:1px solid green}
.checkbox{background:#e3e3e3;border:1px solid #bbb;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;-webkit-box-shadow:inset 0 0 1px 1px #f6f6f6;-moz-box-shadow:inset 0 0 1px 1px #f6f6f6;box-shadow:inset 0 0 1px 1px #f6f6f6;color:#333;font:bold 12px "helvetica neue",helvetica,arial,sans-serif;line-height:15px;padding:2px 3px;text-align:center;text-shadow:0 1px 0 #fff;width:130px}
.checkbox:hover{background:#d9d9d9;-webkit-box-shadow:inset 0 0 1px 1px #eaeaea;-moz-box-shadow:inset 0 0 1px 1px #eaeaea;box-shadow:inset 0 0 1px 1px #eaeaea;color:#222;cursor:pointer}
.selectbox{margin-top:10px}
#content article a.cswall:hover{-webkit-box-shadow:0 1px 3px rgba(0,0,0,.45);-moz-box-shadow:0 1px 3px rgba(0,0,0,.45);box-shadow:0 1px 3px rgba(0,0,0,.45)}
.checkbox_admin{position:absolute;bottom:12px;left:7px}
.starsposition{position:absolute;top:10px;right:10px;background:black;padding:3px}
.button4,.button,.selectbox select{background-color:#7fbf4d;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#7fbf4d),color-stop(100%,#63a62f));background-image:-webkit-linear-gradient(top,#7fbf4d,#63a62f);background-image:-moz-linear-gradient(top,#7fbf4d,#63a62f);background-image:-ms-linear-gradient(top,#7fbf4d,#63a62f);background-image:-o-linear-gradient(top,#7fbf4d,#63a62f);background-image:linear-gradient(top,#7fbf4d,#63a62f);border:1px solid #63a62f;border-bottom:1px solid #5b992b;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;-webkit-box-shadow:inset 0 1px 0 0 #96ca6d;-moz-box-shadow:inset 0 1px 0 0 #96ca6d;box-shadow:inset 0 1px 0 0 #96ca6d;color:#fff;font:bold 11px "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;line-height:18px;padding:2px 3px;text-align:center;text-shadow:0 -1px 0 #4c9021;width:100px}
button4:hover,button:hover,.selectbox select:hover{background-color:#76b347;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#76b347),color-stop(100%,#5e9e2e));background-image:-webkit-linear-gradient(top,#76b347,#5e9e2e);background-image:-moz-linear-gradient(top,#76b347,#5e9e2e);background-image:-ms-linear-gradient(top,#76b347,#5e9e2e);background-image:-o-linear-gradient(top,#76b347,#5e9e2e);background-image:linear-gradient(top,#76b347,#5e9e2e);-webkit-box-shadow:inset 0 1px 0 0 #8dbf67;-moz-box-shadow:inset 0 1px 0 0 #8dbf67;box-shadow:inset 0 1px 0 0 #8dbf67;cursor:pointer}
.mini-tags{position:absolute;left:12px;top:13px}
.mini-tags span{float:right;width:27px;height:10px;display:block;margin-right:5px}
.tag-author{background:url("images/tag-author.png") no-repeat 0 0}
.tag-hd{background:url("images/tag-hd.png") no-repeat 0 0}
.tag-wide{background:url("images/tag-wide.png") no-repeat 0 0}
.latest-slider ul{margin:0 0 10px 0;padding:0}
.tipsClass{padding:.3em;background-color:#f1f1f0;border:1px solid #ccc;z-index:19999;-moz-border-radius:5px}
.tool-text{font-size:11px;padding:0 4px 4px 4px;background:url("images/bubble.png") bottom right}
.tool-tip{color:#fff;width:139px;z-index:13000}
.tool-title{font-weight:bold;font-size:11px;margin:0!important;color:#9fd4ff;padding:4px 4px 0 4px;background:url("images/bubble.png") top left}
.section{background:#efefef url(images/section-bullet-2.png) no-repeat 6px 9px;padding:7px 10px 5px 28px;color:#666;text-transform:uppercase;font-size:19px;font-family:BebasNeueRegular,Arial,Sans-Serif;letter-spacing:1px;border-radius:3px;}
.section-wrapper a.more{float:right;background:#fafafa url(images/arrows-more.png) no-repeat 9px 12px;display:block}
.section-wrapper a.more:hover{background:#FFF url(images/arrows-more.png) no-repeat 9px 12px}
/* Modernised section heading. The flat #464646 bar with its bullet GIF read
as dated beside the new cards, and at 19px in a 31px bar it sat visually
lighter than the 331px tiles under it. Scoped to .dark so the light
variant and the sidebar widget headings are untouched.
line-height is stated because .page-content sets line-height:1.6em, which
computes against ITS 13px font and inherits down as a fixed ~21px - too
short to hold 26px text. */
.section-wrapper.dark .section{
background:#464646;
padding:10px 20px 10px 30px;
border-radius:10px;
color:#fff;
letter-spacing:.5px;
line-height:1.15;
position:relative;
box-shadow:0 2px 10px rgba(15,23,42,.12);
}
/* Accent bar in the theme blue, replacing section-bullet-2.png. */
.section-wrapper.dark .section:before{
content:"";
position:absolute;
left:16px;
top:50%;
margin-top:-8px;
width:3px;
height:16px;
border-radius:2px;
background:#1D9DD2;
}
.section-wrapper.dark .section h1{
font-size:21px!important;
letter-spacing:.5px;
line-height:1.15;
color:#fff;
}
.section-wrapper.dark a.more {background: #5e5e5e;font-size: 17px;padding: 8px;color: #bdbdbd;border-radius:8px;margin:4px 8px 0 0;}
.section-wrapper.dark a.more:hover{background:#717171; color:#ababab;}
.sidebar a{line-height:1.5em}
.sidebar{width:250px;float:right;font-size:.8em;color:#777}
.sidebar .widget-wrapper{background:#f7f7f7;border:1px solid #dfdfdf;margin:10px 0 10px 0;-moz-border-radius:3px;border-radius:3px}
.sidebar .widget{border:0 solid #FFF}
.sidebar .widget .section-wrapper{border-left:none;border-right:0;border-top:0}
.sidebar .widget .section{border-left:none;border-right:0;border-top:0}
.sidebar .widget .textwidget,.sidebar .widget .tagcloud{padding:15px 15px 15px 15px}
.sidebar .widget .tagcloud a,#tabs-tags a{line-height:1.2em}
.sidebar .widget .tagcloud{padding:10px 15px 10px 15px}
.sidebar .widget ul{margin:15px 15px 15px 30px}
.sidebar .widget ul li{padding:3px 0}
.sidebar .section-wrapper a.more{margin-top:-6px;margin-right:-10px}
.sidebar .complex-list ul{margin:0}
.sidebar .complex-list ul li{list-style-type:none;border-bottom:1px solid #dfdfdf;border-top:1px solid #FFF}
.sidebar .complex-list ul li.last{padding:0;border-bottom:0;border-top:0;margin-top:-1px;background:#f7f7f7;height:1px}
.sidebar .complex-list a.thumbnail{display:block;width:70px;margin-right:15px;float:left}
.sidebar .complex-list a.post-title{color:#666;width:145px;display:inline-block}
.sidebar .complex-list a.post-title.wide{color:#666;width:180px;display:inline-block}
.sidebar .complex-list a.post-title:hover{color:#999}
.sidebar .complex-list.small a.thumbnail{width:40px;margin-bottom:0}
.sidebar .complex-list.small a.thumbnail.wide{margin-bottom:0}
.sidebar .complex-list.small a.post-title{width:175px}
.sidebar .complex-list.small a.post-title.wide{width:210px}
.sidebar .complex-list .icon{float:right;width:25px;height:25px;display:inline-block;margin-top:5px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px}
.sidebar .complex-list .rating-wrapper{display:block;padding-top:5px}
.sidebar .complex-list .stars,.sidebar .complex-list .number,.sidebar .complex-list .letter{display:inline-block}
.sidebar .complex-list .stars{padding:0}
.sidebar .complex-list .number{font-size:1.1em;padding:3px 8px 1px 8px}
.sidebar .complex-list .letter{font-size:.9em;padding:3px 8px 1px 8px}
ul.tabnav{margin:0;padding:0;float:left;width:100%;border-bottom:1px solid #dfdfdf;background:#efefef}
ul.tabnav li{display:inline;list-style:none;padding:0!important;float:left;border-bottom:none!important;border-top:none!important}
ul.tabnav li a{display:block;outline:0;padding:5px 14px 5px 14px;color:#666;text-transform:uppercase;font-size:16px;font-family:BebasNeueRegular,Arial,Sans-Serif}
ul.tabnav li a:hover,ul.tabnav li a:active,ul.tabnav li.ui-tabs-selected a,.tabdiv li.more a:hover{color:#FFF!important;background:#444!important;-moz-border-radius-topleft:3px;border-top-left-radius:3px;-moz-border-radius-topright:3px;border-top-right-radius:3px}
.tabdiv ul{margin-bottom:0}
.tabdiv li{list-style-type:none;list-style-image:none!important}
.tabdiv li.more{padding:0!important}
.tabdiv li.more a{display:block;outline:0;padding:5px 14px 5px 14px!important;color:#666;text-transform:uppercase;font-size:16px;font-family:BebasNeueRegular,Arial,Sans-Serif;text-align:center}
.sidebar .simple-list .tabdiv ul li a:hover{background:#fcfcfc}
.sidebar .simple-list ul li.last{padding:0;border-bottom:0;border-top:0;margin-top:-1px;background:#f7f7f7;height:1px}
.ui-tabs-hide{display:none}
.tabdiv li li a{border-bottom:0;border-top:0;padding:7px 10px 7px 25px}
.tabdiv li li li a{padding:4px 10px 4px 40px;font-size:.9em}
.tabdiv li li a:hover{background:#f9f9f9}
.unwrapped{margin-bottom:15px}
.ad{margin:15px 0 0 15px;width:125px;overflow:hidden;float:left}
form.subscribe{text-align:left;padding:15px}
form.subscribe input{font-size:1.1em;padding:5px 10px;border:1px solid #DDD;background:#fcfcfc;width:245px}
form.subscribe input.btn{border:0;background:0;padding:0;width:85px}
.thegrid td{border-bottom:1px solid #ddd;padding:5px 0;width:3%}
.thegrid{margin-top:20px}
.data{width:610px}
.feedburner{display:block;float:right;margin-left:10px;margin-right:5px;width:24px;height:25px;position:relative;top:-3px;background:url(images/feedburner.png) no-repeat 0 0}
.ico{float:right}
.lgform{margin:0 30px;margin-top:20px;margin-bottom:20px}
.lgform input{background-color:#303030;-webkit-border-radius:.4em;-moz-border-radius:.4em;border-radius:.4em;-moz-box-shadow:0 -1px 0 0 #000;-webkit-box-shadow:0 -1px 0 0 #000;box-shadow:0 -1px 0 0 #000;border:0;width:230px;height:27px;margin:15px 0;color:#fff;padding:0 0 0 10px;font-family:Arial,Helvetica,sans-serif;font-size:1.2em}
#footer .inner{padding:40px 30px 25px 30px;border-bottom:1px solid black;display:inline-block}
#footer .copyright{text-align:center;position:relative;padding:12px 30px 12px 30px;background:#222;background:linear-gradient(45deg, #383838, #212121, #363636);border-top:1px solid #444;color:#AAA;font-size:1em;line-height:1.5em;}
.ad{margin:15px 0 0 15px;width:125px;overflow:hidden;float:left}
#tabs-categories ul{text-shadow:0 1px 0 rgba(255,255,255,0.6);padding:0}
#tabs-categories li{padding:7px 12px 7px 15px;transition: all 0.3s cubic-bezier(0, 0.93, 0.07, 1.24) 0s;}
#tabs-categories li:hover {background:#e9e9e9;}
#tabs-categories li.parent a{-webkit-transition:all 0.3s ease 0s;-moz-transition:all 0.3s ease 0s;-o-transition:all 0.3s ease 0s;-ms-transition:all 0.3s ease 0s;transition:all 0.3s ease 0s;color:#555;display:block;padding:5px 0;line-height:20px;background:url(images/categories_block.png) 100% 0 no-repeat}
#tabs-categories li.active a{background-position:100% -80px;}
#tabs-categories li.parent a:hover{background-position:100% -80px;padding-left:2px;}
#tabs-categories li.parent a:active {padding-left:10px;}
#tabs-categories li.level2:last-child{padding-bottom:10px}
#tabs-categories li.level2{padding:5px 12px 5px 15px;list-style:none;background: #EBEBEB;}
#tabs-categories li.level2 a{padding-left:16px;background:url(images/sub_categories_block.png) 0 -3px no-repeat;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;transition:color .2s ease-in-out;font-size:11px;line-height:17px;color:#777}
#tabs-categories li.level2 a:hover{background-position:0 -42px;color:#000}
#tabs-categories li.level2 a.active{background-position:0 -80px;color:#444;font-weight:bold}
#tabs-categories li.active a{color:#444;font-weight:bold}
#tabs-categories li.parent a span{color:#999;font-style:italic}
#tabs-resoloutions>:last-child{margin-bottom:0}
ul.line-icon{list-style:none;margin:0;padding:10px 0}
ul.line-icon>li:first-child{background:none,url(images/resoloution_block_first.png) 20px 0 no-repeat;padding-top:5px;margin-top:0}
ul.line-icon>li{padding-left:50px!important;border:none!important}
ul.line>li>a:first-child{display:block}
ul.line>li{margin-top:5px;padding-top:5px}
ul.line-icon>li:hover{background:#ddd url(images/resoloution_block_first.png) 20px 0 no-repeat}
ul.line-icon>li{background:url(images/resoloution_block_first.png) 20px 0 no-repeat}
ul.line-icon>li a{color:#777}
li.first{padding:15px 12px 15px 15px!important}
.gravatorcom img{display:block;width:40px;margin-bottom:0;margin-right:15px;float:left}
#tabs-recentcomment ul{padding:0}
.side-panel{padding:10px 20px 10px}
ul.side-panel li:last-child{border:0}
#tabs-recentcomment ul li a{width:175px;display:inline-block;color:#999}
#footer .panel{float:left;width:216px;margin-right:25px}
#footer .widget{padding:0 0 15px 0}
.all_reviews ul{padding-left:0;margin:0}
#footer h2{background:url(images/section-bullet-3.png) no-repeat 0 6px;margin:0;padding:2px 0 5px 22px;font-size:1.6em;text-transform:uppercase;font-family:BebasNeueRegular,Arial,Sans-Serif;color:white}
#footer .complex-list ul li{list-style-type:none;padding:15px 0 10px 0;border-bottom:1px solid #191919;border-top:1px solid #303030}
#footer .complex-list ul li{list-style-type:none}
.darken.small{background:black url(images/darken-bg-small.png) no-repeat center center}
.darken.prev{background:black url(images/prev.png) no-repeat center center}
.darken.next{background:black url(images/next.png) no-repeat center center}
#footer .complex-list a.thumbnail{display:block;width:70px;margin-right:15px;float:left}
#footer .complex-list.small a.thumbnail{width:40px}
#footer .complex-list a.post-title{color:#CCC;width:95px;font-size:13px;display:inline-block}
#footer .complex-list.small a.post-title{width:125px}
#footer .complex-list .number{font-size:13px;padding:3px 8px 1px 8px}
#footer .complex-list .stars,#footer .complex-list .number,#footer .complex-list .letter{display:inline-block}
.number.color1{background:#ff3535}
.number.color1{background:#ff3535}
.number.color2{background:#ff6317}
.number.color3{background:#c0b814}
.number.color4{background:#73b114}
.number.color5{background:#0aad4b}
.number{font-family:BebasNeueRegular,Arial,Sans-Serif;color:white}
#footer .complex-list ul li:first-child{border-top:0}
#footer .complex-list ul li:last-child{border-bottom:0}
#footer .complex-list .rating-wrapper{display:block;padding-top:5px}
#footer form.subscribe{text-align:left;padding:15px 0}
#footer form.subscribe input{font-size:1.1em;padding:10px 10px;border:1px solid #333;background:#191919;width:195px;color:#DDD}
#footer form.subscribe input.btn{border:0;background:0;padding:0;width:85px}
#footer form.subscribe p{padding-bottom:5px;margin:0}
#footer .complex-list ul{margin:0}
.tweet_list{list-style:none;margin:0;padding:0;overflow-y:hidden}
.tweet_list .tweet_avatar{padding-right:15px;float:left}
#footer .panel.right{margin-right:0}
.darken{background:black url(images/darken-bg.png) no-repeat center center;display:block;}
#footer .simple-list ul{margin:0;padding:0}
.stats ul li{display:block;padding:7px 12px 7px 15px;border-bottom:1px solid #191919;border-top:1px solid #303030;color:#CCC}
.stats ul li:first-child{border-top:0}
.stats ul li:last-child{border-bottom:0}
.page-content{padding:5px 0 4px 0;margin-top:5px;font-size:13px;line-height:1.6em;color:#666;display:inline-block;overflow:hidden}
/* Card grids paint a hover shadow outside the tile, and the overflow:hidden
above cuts it off in a hard straight line at the container edge. Lifted
only on pages that actually hold one of those grids, so every other page
keeps the original clipping behaviour untouched.
Safe for float containment: display:inline-block already establishes a
block formatting context, so the overflow:hidden was never what was
holding the theme's floats in. Browsers without :has() simply keep the
clip, and the grids' side margins still give the shadow room. */
.page-content:has(ul.collections-grid),
.page-content:has(ul.collection-wallpapers),
.page-content:has(ul.categoryList){overflow:visible}
/* .page-content is an inline-block, so it shrink-wraps: given a child capped
at 860px it became 860px itself and sat against the left edge of a ~1070px
column, leaving `margin:0 auto` on .legal nothing to centre inside. Block
here so .page-content fills the column and the measure can centre in it.
Scoped with :has() so every other page keeps the shrink-wrap. Browsers
without :has() get the old left-aligned column, which is legible, just
off-centre. */
.page-content:has(.legal),
.page-content:has(.formpage){display:block}
.page-content h1,.page-content h2,.page-content h3{font-family:ProcionoRegular,Georia,serif;color:#2c2c2c;margin:0 0 18px 0;line-height:1.3em;text-shadow:1px 1px 3px #c5c5c5;}
.page-content h1{font-size:1.3em}
.page-content h1.title{font-family:Armata,Arial,Helvetica,sans-serif;text-align:center;}
/* The meta line under a collection or wallpaper title (breadcrumb trail,
count, updated date). Same treatment as the dark heading - 10px radius,
the bullet GIF swapped for an accent bar - but deliberately quieter: it
is a secondary line, so it stays light and its accent is grey rather
than the theme blue. Italic dropped; it was the most dated part of it,
and italic runs of links read poorly. */
/* The box moves to the WRAPPER so it can be a flex row: crumbs on the left,
download count on the right, both vertically centred. It used to be a
block .section with the count floated over it, and a float cannot centre
against text that wraps - so on a narrow screen the crumbs ran under the
count and the accent bar drifted off the first line. */
.section-wrapper.review{
display:flex;
align-items:center;
gap:12px;
background:#f4f6f8;
border:1px solid #e6eaee;
border-radius:10px;
padding:9px 14px 9px 26px;
position:relative;
}
.section-wrapper.review:before{
content:"";
position:absolute;
left:13px;
top:50%;
margin-top:-7px;
width:3px;
height:14px;
border-radius:2px;
background:#c9d3db;
}
.section-wrapper.review .section{
flex:1 1 auto;
min-width:0;
background:none;
border:0;
padding:0;
border-radius:0;
color:#6b7280;
font-family:Arial,Helvetica,sans-serif;
font-size:13px;
font-style:normal;
text-transform:none;
letter-spacing:0;
line-height:1.5;
}
/* The count sits in the row rather than floating over it. order:2 because
the markup puts it before the crumbs. */
.section-wrapper.review .views-bubble,
.section-wrapper.review .downloads-bubble{
float:none;
order:2;
flex:0 0 auto;
margin:0;
}
/* Was #488aa3, which outranked .coll-crumbs a and so quietly overrode the
theme blue everywhere in this bar. */
.section-wrapper.review .section a{color:#1D9DD2;text-decoration:none}
.section-wrapper.review .section a:hover{text-decoration:underline}
#breadcrumbs {margin:5px 0px 5px 10px;}
.breadCrumbs a{padding-right:15px;margin-right:10px;text-decoration:none;outline:0;font:normal 14px/20px Arial,Helvetica,sans-serif;color:#717171;background:url(images/arrow_right.png) 100% 50% no-repeat}
.breadCrumbs a:last-child{background:0}
.overview{padding:12px 0;width:780px;margin:0 auto;}
img.wallpaper-thumb{float:left;margin-right:30px;margin-left:10px;border:1px solid #CCC;float:left;padding:5px;box-shadow:0 0 10px #b1b1b1;-moz-box-shadow:0 0 10px #b1b1b1;-webkit-box-shadow:0 0 10px #b1b1b1;}
span.prev_next{background:url(images/prev_next.png) 13px 0 no-repeat;width:148px;height:18px;display:block;float:left;margin:0 0 10px 25px;}
.navigation_thumb a:first-child{margin-bottom:15px;margin-top:20px}
.navigation_thumb a{float:left;overflow:hidden;height:125px}
/* Download/view count, floated over the right end of the meta bar. A pill
rather than the old full-height block with a white divider rule, so it
sits inside the rounded bar instead of butting against its edge. */
.section-wrapper .views-bubble, .section-wrapper .downloads-bubble {float:right;margin:6px 10px 0 0;position:relative;z-index:1}
.section-wrapper .views-bubble span, .section-wrapper .downloads-bubble span{
height:auto;
display:block;
padding:3px 12px;
border:1px solid #e0e6ea;
border-radius:20px;
background:#fff;
color:#5b6470;
font-size:12px;
line-height:1.5;
}
.comment-text p{margin:0}
.form-submit #submit,.form-submit #reset{padding:13px 0 13px 0;color:#FFF;text-transform:uppercase;font-family:BebasNeueRegular,Arial,Sans-Serif;font-size:1.5em;background:url(images/comment-button.png) no-repeat 0 0;width:122px;cursor:pointer}
#respond{padding-top:16px;border-top:1px dotted #CCC}
.prociono{font-family:ProcionoRegular,Georia,serif}
::selection{background:#85cce0;color:white}
form ul li{clear:both;margin:4px 0;list-style:none}
form ul{border:0;margin:0;padding:0}
.admin_function form label{width:249px;display:block;float:left;padding-right:20px;clear:left;text-align:right;text-transform:uppercase;letter-spacing:0;font-family:Arial,Helvetica,sans-serif}
.admin_function form input[type="text"]{width:320px;margin-bottom:5px}
.admin_function form textarea{width:320px;margin-bottom:5px;}
input-text,.input-textarea{color:#444;width:350px;padding:2px}
.admin_function form input[type="text"],.admin_function form textarea{background:#fff}
fieldset{padding:20px 0;width:760px;}
.admin_function{background:url(images/comment-input-bg.png) repeat 0 0;border:1px solid #beceda;-moz-border-radius:5px;border-radius:5px;margin-top:5px}
ul.holder{border:1px solid #999;overflow:hidden;height:auto!important;margin:0}
ul.holder li{float:left;clear:none!important;list-style-type:none;margin:4px}
ul.holder li.bit-box,ul.holder li.bit-input input{font:11px "Lucida Grande","Verdana"}
ul.holder li.bit-box{-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:1px solid #cad8f3;background:#dee7f8;padding:1px 5px 2px}
ul.holder li.bit-box-focus{background:#598bec;color:#fff;border-color:#598bec}
ul.holder li.bit-input input{float:left!important;display:inline!important;width:151px;border:0;outline:0;margin:0;padding:3px 0 2px}
ul.holder li.bit-input input.smallinput{width:20px}
form ol{font:11px "Lucida Grande","Verdana";margin:0;padding:0}
form ol li.input-text{margin-bottom:10px;list-style-type:none;border-bottom:1px dotted #999;padding-bottom:10px}
form ol li.input-text label{font-weight:700;cursor:pointer;display:block;font-size:13px;margin-bottom:10px}
form ol li.input-text input{width:500px;font:11px "Lucida Grande","Verdana";border:1px solid #999;padding:5px 5px 6px}
form ul.holder{width:326px}
ul.holder li.bit-hover{background:#bbcef1;border:1px solid #6d95e0}
ul.holder li.bit-box a.closebutton{position:absolute;right:4px;top:5px;display:block;width:7px;height:7px;font-size:1px;background:url('images/close.gif')}
ul.holder li.bit-box a.closebutton:hover{background-position:7px}
ul.holder li.bit-box-focus a.closebutton,ul.holder li.bit-box-focus a.closebutton:hover{background-position:bottom}
.author_details fieldset{border:1px solid #CCC;padding:5px 10px;margin-bottom:10px}
.label-author{display:inline!important;float:none!important}
*:first-child+html ul.holder,* html ul.holder{padding-bottom:2px}
#category-list ul.holder li.bit-box,#tags-list ul.holder li.bit-box{padding-right:15px;position:relative}
#category-auto,#tags-auto{display:none;position:absolute;width:412px;background:#eee;z-index:1000}
#category-auto .default,#tags-auto .default{border:1px solid #ccc;border-width:0 1px 1px;padding:5px 7px}
#category-auto ul,#tags-auto ul{display:none;margin:0;padding:0}
#category-auto ul li,#tags-auto ul li{list-style-type:none;border:1px solid #ccc;font:11px "Lucida Grande","Verdana";border-width:0 1px 1px;margin:0;padding:5px 12px}
#category-auto ul li em,#tags-auto ul li em{font-weight:700;font-style:normal;background:#ccc}
#category-auto ul li.auto-focus,#tags-auto ul li.auto-focus{color:#000}
#category-auto ul li.auto-focus em,#tags-auto ul li.auto-focus em{background:0}
#related{float:left;width:100%;overflow:hidden;border-radius:10px;box-shadow:0 2px 10px rgba(15,23,42,.08)}
.full-width #related{width:720px}
/* Matched to .section-wrapper.dark .section: same #464646, same 21px Bebas,
same blue accent bar in place of section-bullet-2.png. The pointed-tab
look is gone - it came from a darker #2b2b2b block on li.title plus an
arrow-related-right.png sprite on li.arrow, and read as the oldest thing
on the page next to the new cards. */
#related ul.tabnav{
float:none;
display:block;
width:100%;
box-sizing:border-box;
background:#464646;
border:0;
height:auto;
margin:0;
padding:10px 20px 10px 30px;
color:#BBB;
position:relative;
border-radius:10px 10px 0 0;
}
#related ul.tabnav:before{
content:"";
position:absolute;
left:16px;
top:50%;
margin-top:-8px;
width:3px;
height:16px;
border-radius:2px;
background:#1D9DD2;
}
#related ul.tabnav li.title{
height:auto;
float:none;
display:block;
padding:0!important;
background:none;
color:#fff;
text-transform:uppercase;
font-size:21px;
font-family:BebasNeueRegular,Arial,Sans-Serif;
letter-spacing:.5px;
line-height:1.15;
}
#related ul.tabnav li.arrow{display:none}
#related ul.tabnav li a{padding:9px 10px 9px 10px;height:27px;font-family:Arial,Helvetica,sans-serif;color:#AAA;font-size:11px;text-transform:uppercase}
#related ul.tabnav li a:hover,#related ul.tabnav li a:active,#related ul.tabnav li.ui-tabs-selected a,#related .tabdiv li.more a:hover{background:url(images/arrow-related-down.png) no-repeat center bottom!important}
/* No top border - the header bar sits directly on it - and the bottom
corners finish the card #related's radius starts. */
#related .tabdiv-wrapper{border:1px solid #dfdfdf;border-top:0;border-radius:0 0 10px 10px;background:#f7f7f7;}
.full-width #related .tabdiv-wrapper{padding:20px}
/* 4-per-row, same card language as the main collection grid (rounded,
soft shadow, gradient-scrim caption) - but the caption is hover-only.
This strip is skimmed past rather than browsed, so the photo leads and
the name only appears when someone is actually pointing at a tile.
Padding is even on all four sides, and sized like the grids' side
margins: the original 5px 0 0 12px left the tiles inset on the left but
flush against the right and bottom borders. It also has to clear the
hover shadow (0 8px 22px reaches ~11px sideways, ~19px down), because
#related is overflow:hidden and would otherwise slice it off. */
#related .tabdiv-wrapper{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px 16px;
padding:16px 16px 20px;
box-sizing:border-box;
}
#related .tabdiv-wrapper>.clearboth{display:none}
#related .panel{
float:none;
margin:0;
width:auto;
min-width:0;
position:relative;
overflow:hidden;
border-radius:12px;
background:#fff;
box-shadow:0 1px 4px rgba(15,23,42,.08);
transition:box-shadow .2s ease;
}
/* Raised on hover for the same reason as the grid tiles: the panels are
position:relative, so without it the next panel paints over this one's
shadow and cuts it in a straight line. */
#related .panel:hover{
box-shadow:0 8px 22px rgba(15,23,42,.14);
z-index:3;
}
#related .panel a{display:block;background:none}
/* 247px column (1036 content - 3x16 gap, / 4) at the 246x154 source
thumbnail's own ratio. */
#related .panel img{
width:100%;
height:154px;
object-fit:cover;
transition:transform .35s ease;
}
#related .panel:hover img{transform:scale(1.06)}
#related .panel span{
position:absolute;
left:0;right:0;bottom:0;
width:auto;
margin:0;
box-sizing:border-box;
padding:26px 10px 10px;
background:linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.4) 60%, rgba(0,0,0,0) 100%);
color:#fff;
font-size:13px;
font-weight:600;
text-align:left;
text-shadow:0 1px 3px rgba(0,0,0,.45);
opacity:0;
transition:opacity .25s ease;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
#related .panel:hover span{opacity:1}
.tags{padding:0 0 0 25px;background:url(images/tag.png) no-repeat 0 0;}
#related .panel .starsposition{top:0;right:0}
.wallpaper-resolutions{margin-bottom:10px;margin-left:auto;margin-right:auto;padding:10px;width:765px;line-height:2.2em;letter-spacing:0.4px;border-radius:4px;-moz-border-radius:4px;-khtml-border-radius:4px;-webkit-border-radius:4px;border:1px solid #DDD;background:#F9F9F9;box-shadow: inset 0 0 20px #e6e6e6;}
.overview h4{font-size:11px}
.overview h4 strong{color:#395177}
.wallpaper-resolutions a{-webkit-text-size-adjust:none;font-size:12px;font-family:Arial,Helvetica,sans-serif;margin-left:4px;text-decoration:none;color:#0079A7;padding: 2px 4px;}
.wallpaper-resolutions a:hover{background-color:#4b4b4b;color:#fff;border-radius: 5px;}
.wallpaper-resolutions span{font-weight:bold;clear:left;display:block;float:left;}
em.downloadem{float: left;display: block;overflow: hidden;margin-top: 6px;text-align: center;padding: 2px 4px 0 10px;color: #bbb;}
.wallpaper-ads-right{float:left;margin-right:10px;width:300px}
.wallinfo{width:780px;margin:0 auto;}
.stockwalldet{font-size:13px;border-bottom:1px solid #eef1f1;margin-bottom:5px;padding-bottom:5px;width:100%;line-height:2.2em;overflow-wrap:break-word;}
.author {float:right;line-height:2.2em;}
.walldet{background:url("images/walldet.png") no-repeat scroll 0 2px transparent}
.wallinfo_a{font-family:Tahoma,sans-serif;font-size:12px;padding-left:20px;line-height:2em;}
.caps h3{text-transform:uppercase}
.caps li,.modules li{list-style:none}
.modules li:hover{background:#ccc;color:#000}
ul.modules{padding:0}
.sort-handle{float:left;margin-right:5px}
#security_code{margin-left:0!important}
span.actions{float:right}
.friends .thegrid td{width:auto}
.absolute{position:absolute;top:100px;}
.fixed{position:fixed;top:0px;}
#sharebox-wrapper{position:absolute;left:0;}
#sharebox{width:80px;background:#F3F3F3 url(images/sharebox-bg.png) repeat-y right 0px;border:1px solid #CFCFCF;border-right:0px;-moz-border-radius-topleft:3px;border-top-left-radius:3px;-moz-border-radius-bottomleft:3px;border-bottom-left-radius:3px;}
#sharebox .inner{padding:0px 11px 0px 8px;text-align:center;}
#sharebox .inner .panel{margin:15px 0px;}
#sharebox .share-email{margin-left:7px;width:48px;height:64px;display:block;background:url(images/email-button.png) no-repeat 0px 0px;}
@font-face{font-family:'BebasNeueRegular';src:url('fonts/BebasNeue-webfont.eot');src:url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/BebasNeue-webfont.woff') format('woff'),url('fonts/BebasNeue-webfont.ttf') format('truetype'),url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');font-weight:normal;font-style:normal;font-display: swap;}
@font-face{font-family:'ProcionoRegular';src:url('fonts/Prociono-Regular-webfont.eot');src:url('fonts/Prociono-Regular-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/Prociono-Regular-webfont.woff') format('woff'),url('fonts/Prociono-Regular-webfont.ttf') format('truetype'),url('fonts/Prociono-Regular-webfont.svg#ProcionoRegular') format('svg');font-weight:normal;font-style:normal;font-display: swap;}
@font-face{font-family:'Armata';src:url('fonts/Armata.otf');font-display: swap;}
ul.wallpapers{clear:both;float:left;margin:0px 0pt 10px -40px;}
ul.wallpapers li.wall{margin:0px;display:block;float:left;}
li.wall{font-size:12px;font-weight:normal;}
li.wall h2{float:left;width:auto;font-size:12px;font-weight:normal;}
.thumb_img{width:246px;margin:-12px 0pt 0pt 18px;border:1px solid #CCC;float:left;padding:2px;-moz-box-shadow:1px 1px 5px #eee;-webkit-box-shadow:1px 1px 5px #e;box-shadow:1px 1px 5px #eee;transition: all 0.2s ease;border-radius:3px;}
.thumb_img:hover{box-shadow:0 0 10px rgba(0,0,0,0.5);-moz-box-shadow:0 0 10px rgba(0,0,0,0.5);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.5);}
.views{float:left;width:16px;height:16px;}
.thumb em1{color:#fff;font-size:13px;letter-spacing:1px;position:absolute;top:110px;left:21px;display:none;padding:4px 12px;width:222px;text-align:center;transition: all 0.3s ease;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;}
.thumb a em1{display:block;opacity:0;}
.thumb a:hover em1{background:#222;display:block;opacity:0.6;}
.views{float:left;width:16px;height:16px;}
.thumb{margin:25px 0pt 0pt -5px;}
.thumb a{display:block;margin-bottom:2px;position:relative;z-index:1;}
.fbFeedbackContent {min-height:0px!important}
ul.pagination{margin:5px 0 10px 15px;height:100%;overflow:hidden;font:12px 'Tahoma';list-style-type:none;padding:0px}
ul.pagination li:first-child{margin-left:0}
ul.pagination li{padding-bottom:1px;float:left;margin:0;padding:0;margin-left:5px}
ul.pagination li a{color:#333;text-shadow:0 1px #f6f6f6;padding:6px 9px 6px 9px;border:solid 1px #b6b6b6;box-shadow:0 1px #efefef;-moz-box-shadow:0 1px #efefef;-webkit-box-shadow:0 1px #efefef;background:#e6e6e6;background:-moz-linear-gradient(top,#fff 1px,#f3f3f3 1px,#e6e6e6);background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#fff),color-stop(0.02,#f3f3f3),color-stop(1,#e6e6e6));display:block;text-decoration:none}
ul.pagination li a:hover,ul.pagination li a.current{text-shadow:0 1px #7b8389;border-color:#5a6065;background:#33373a;background:-moz-linear-gradient(top,#7b8389 1px,#5a6065 1px,#33373a);background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#7b8389),color-stop(0.02,#5a6065),color-stop(1,#33373a));color:white;box-shadow:0 1px #e7e7e7;-moz-box-shadow:0 1px #e7e7e7;-webkit-box-shadow:0 1px #e7e7e7}
ul.pagination li a.disabled{opacity:0.5;}
/* Pagination, matched to the cards and the search bar: even pills with a
light border, the current page in the theme blue.
The old rules leaned on `-moz-linear-gradient` and the obsolete
`-webkit-gradient(linear, 0 0, 0 100%, color-stop(...))` syntax, neither
of which any current browser parses - so every control had silently
fallen back to its flat `#e6e6e6` / `#33373a` colour anyway.
Flex rather than inline-block: the markup puts a bare "..." text node
between page links, and as a flex item it lines up on the same baseline
as the pills instead of sitting on the text baseline between them. */
.pagination{
font-family:Arial,Helvetica,sans-serif;
font-size:15px;
clear:both;
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
gap:8px;
margin:0 auto;
padding:20px 0 26px;
background:transparent;
color:#5b6470;
}
.pagination a,
.pagination span.selected,
.pagination span.disabled{
display:inline-flex;
align-items:center;
justify-content:center;
/* Spaces the fa-angle icon from the "Prev"/"Next" label. The markup does
put a space there, but a flex container discards whitespace between
its items, so it needs an explicit gap. */
gap:7px;
min-width:44px;
height:44px;
padding:0 16px;
margin:0;
box-sizing:border-box;
border:1px solid #e0e6ea;
border-radius:10px;
background:#fff;
color:#4a5560;
font-weight:600;
text-decoration:none;
transition:background .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.pagination a:hover,.pagination a:active{
background:#f0f8fc;
border-color:#1D9DD2;
color:#1478a3;
box-shadow:0 2px 8px rgba(29,157,210,.18);
transform:translateY(-1px);
}
.pagination span.selected{
background:#1D9DD2;
border-color:#1D9DD2;
color:#fff;
box-shadow:0 2px 8px rgba(29,157,210,.30);
}
.pagination span.disabled{
background:#f7f9fa;
border-color:#eceff2;
color:#aab2ba;
}
.wallpaper-resolutions p{margin:0px 0px 5px 0px;border-bottom: 1px dotted #7D7D7D;}
.mprev, .mnext {display:none;font-size:12px;}
.submenu {margin: 0;padding: 0;display: none;background: #333;font-size: 14px;}
.submenu li { border-bottom: 0px !important; }
.submenu a {display: block;text-decoration: none;text-align:center;color: #d9d9d9;padding: 8px 0 !important;-webkit-transition: all 0.25s ease;-o-transition: all 0.25s ease;transition: all 0.25s ease;}
.submenu a:hover {background: #4388bb !important;color: #FFF;}
ul.submenu li{border-top:1px solid #525252 !important;}
/* Sub-category index (e.g. /cars-desktop-wallpapers): cards with a cover,
sized and inset exactly like the collection grid so the two read as one
system. 4 x 246 + 3 x 16 gap = 1034, inside the 18px side margin that
keeps a hover shadow clear of .page-content's clip - see the collection
grid block for why those numbers. 246x154 is also the stored thumbnail's
own size, so covers render 1:1. */
ul.categoryList{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px 16px;
width:1034px;
max-width:100%;
margin:15px 18px 30px;
padding:0;
list-style:none;
box-sizing:border-box;
}
ul.categoryList li.wall{
display:block;
float:none;
width:auto;
min-width:0;
padding:0;
margin:0;
}
.cat-card{
display:block;
background:#fff;
border-radius:12px;
overflow:hidden;
box-shadow:0 2px 10px rgba(15,23,42,.10);
text-decoration:none;
transition:box-shadow .25s ease, transform .25s ease;
}
.cat-card:hover{
box-shadow:0 14px 26px rgba(15,23,42,.20);
transform:translateY(-4px);
text-decoration:none;
}
.cat-thumb{
display:block;
width:100%;
height:154px;
object-fit:cover;
border:0;
padding:0;
margin:0;
border-radius:0;
box-shadow:none;
background:#eceff2;
transition:transform .4s ease;
}
.cat-card:hover .cat-thumb{transform:scale(1.06)}
/* Holds the card's shape for a category with no wallpaper to show. */
.cat-thumb-empty{background:#eceff2}
.cat-meta{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
padding:10px 12px;
}
.cat-name{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:13px;
font-weight:600;
color:#333;
}
/* The count is the same pill as the collection covers' badge. */
.cat-count{
flex:0 0 auto;
background:#1D9DD2;
color:#fff;
font-size:11px;
font-weight:700;
line-height:1;
padding:4px 8px;
border-radius:20px;
}
#cat-menu li.hide{display:none;}
/* Footer brand directory. The links are kept - 54 sitewide routes into the
brand category pages is real crawl value and real browsing utility - but
they are a directory now, not a tag cloud.
Alphabetical columns rather than a wrapped run: the list IS alphabetical,
and that only helps if the eye can travel down it. In a wrapped layout
the order is there but unusable, which is what made the old cloud
something to scan rather than read.
The old mixed sizing is gone with it. It came from two places that fought
each other - nine hand-picked marques at an inline 25px, and
`.catcloud a:nth-of-type(3n+1)` blowing up every third link to 22px and
tinting it blue regardless of which link it landed on. The arbitrary tier
drowned out the deliberate one, so the emphasis read as noise. Every
brand is weighted equally here. */
.catcloud{
padding:30px 26px 32px;
text-align:left;
background-color:#252525;
}
.catcloud-title{
font-family:BebasNeueRegular,Arial,Sans-Serif;
font-size:18px;
letter-spacing:1px;
text-transform:uppercase;
color:#dfe5e9;
margin:0 0 16px;
padding:0 0 10px 12px;
border-bottom:1px solid #363636;
position:relative;
}
/* Same accent bar as the section headings, so the footer belongs to the
same system as the rest of the page. */
.catcloud-title:before{
content:"";
position:absolute;
left:0;
top:2px;
width:3px;
height:15px;
border-radius:2px;
background:#1D9DD2;
}
/* Text only. A thumbnail per brand was tried here and pulled back out: the
footer renders on every page, so it meant 53 extra image requests site-
wide to decorate a link list. The pictures live on the category listing
page instead, where they are the content rather than ornament. */
.catcloud-list{
columns:5;
column-gap:26px;
}
.catcloud-list a{
display:block;
padding:5px 0;
font-size:13px;
line-height:1.35;
color:#98a2aa;
text-decoration:none;
/* Stops a row being split across the foot of one column and the head
of the next. */
break-inside:avoid;
-webkit-column-break-inside:avoid;
transition:color .18s ease;
}
.catcloud-list a:hover{color:#1D9DD2;text-decoration:none}
@media screen and (max-width:1010px){
.catcloud-list{columns:3}
}
@media screen and (max-width:560px){
.catcloud{padding:24px 16px 26px}
.catcloud-list{columns:2;column-gap:18px}
}
.section h1 {
font-size: 19px !important;
font-family: BebasNeueRegular,Arial,Sans-Serif;
letter-spacing: 1px;
line-height: inherit;
text-shadow: none;
color: #EEE;
display: inline;
}
span.android img {
width: 80%;
height:auto;
padding-top: 5px;
padding-bottom:15px;
display: none;
margin-left: auto;
margin-right: auto;
}
span.original {
padding: 3px 5px;
float:none;
}
span.original a{
text-align: center;
display: block;
background: #2376b4;
border-radius: 5px;
color: #fff;
transition: all 0.2s ease 0s;
font-size:14px;
}
span.original a:hover{
background: #6571b3;
}
.license a{
background: #f9f9f9;
color: #464646;
padding: 4px 8px;
border-radius: 5px;
border: #d6d6d6 solid 1px;
box-shadow: 0 1px 2px rgba(0,0,0,0.14);
margin-right: 3px;
transition: all 0.2s ease 0s;
text-transform: capitalize;
}
.license a:hover{
background: #e8e8e8;
color: #616161;
}
span.author-tag a{
background: #6596bb;
color: #fff;
box-shadow: 0 1px 1px rgb(66, 135, 187);
}
span.author-tag a:hover{
background: #f9f9f9;
color: #464646;
}
.colorgraph {
height: 3px;
border-top: 0;
background: #252525;
background-image: linear-gradient(to right,#c4e17f,#c4e17f 12.5%,#f7fdca 12.5%,#f7fdca 25%,#fecf71 25%,#fecf71 37.5%,#f0776c 37.5%,#f0776c 50%,#db9dbe 50%,#db9dbe 62.5%,#c49cde 62.5%,#c49cde 75%,#669ae1 75%,#669ae1 87.5%,#62c2e4 87.5%,#62c2e4);
}
.errorh {
font-size: 20px;
color: #b94a48;
background: #f2dede;
border: 1px solid #eed3d7;
padding: 8px 10px;
border-radius: 4px;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
box-shadow: 0 1px 4px rgba(0,0,0,0.14);
margin: 0 0 10px 0;
text-align: center;
font-family: BebasNeueRegular,Arial,sans-serif;
letter-spacing: 2px;
}
.errors{
font-size: 20px;
color: #b94a48;
background: #f2dede;
border: 1px solid #eed3d7;
padding: 8px 10px;
border-radius: 4px;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
box-shadow: 0 1px 4px rgba(0,0,0,0.14);
margin: 7px 0 10px 0;
text-align: center;
font-family: BebasNeueRegular,Arial,sans-serif;
letter-spacing: 2px;
display: block;
}
.gs-snippet, .gcsc-find-more-on-google, .gcsc-branding-img-noclear {
display: none !important;
}
.gs-web-image-box .gs-image, .gs-promotion-image-box .gs-promotion-image {
max-width: 250px !important;
max-height: unset !important;
}
.gs-web-image-box-portrait img.gs-image, .gs-web-image-box-landscape img.gs-image {
max-width: 250px !important;
max-height: unset !important;
width: 250px !important;
height: unset !important;
}
.gsc-results .gsc-cursor-box .gsc-cursor-current-page {
background-color: #666 !important;
}
.gsc-results .gsc-cursor-box .gsc-cursor-page {
font-size: 14px !important;
padding: 10px !important;
background-color: #ddd !important;
}
.gs-imageResult .gs-size {
color: aliceblue;
}
#buttons {margin-top:7px;position:relative;}
#buttons a.button2{display:block;float:left;background-color:#E5ECF4;font-weight:bold;color:#4287bb;cursor:pointer;width:48%;margin-left:7px;padding:2px 0;text-align:center;border-radius: 2px;}
#buttons a.button2:hover{color:#FFFFFF;background-color:#4388bb;transition:all 0.2s ease;background: linear-gradient(to right, #085078, #4487bb);}
#buttons a.button2.selected{color: #FFFFFF;background-color: #4388bb;background: linear-gradient(to right, #085078, #4487bb);}
/*----------Search form-----------*/
.cf:before, .cf:after{
content:"";
display:table;
}
.cf:after{
clear:both;
}
.cf{
zoom:1;
}
/* Flex rather than the original float pair: the input can then flex to
fill whatever is left, so no calc() tied to a fixed button width. */
.form-wrapper {
display: flex;
align-items: center;
background: #fff;
border: 1px solid #dfe3e8;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(15,23,42,.06);
overflow: hidden;
transition: border-color .2s ease, box-shadow .2s ease;
}
.form-wrapper:hover {
border-color: #c6cdd4;
box-shadow: 0 2px 8px rgba(15,23,42,.10);
}
/* The accent ring goes on the wrapper, not the input, so the border and
the focus state read as one control. */
.form-wrapper:focus-within {
border-color: #1D9DD2;
box-shadow: 0 0 0 3px rgba(29,157,210,.15);
}
.form-wrapper input {
flex: 1 1 auto;
width: auto;
min-width: 0;
height: 44px;
padding: 0 8px 0 18px;
float: none;
border: 0;
background: transparent;
text-align: left;
font-size: 14px;
color: #333;
}
.form-wrapper input:focus {
outline: 0;
background: transparent;
box-shadow: none;
}
/* One standard rule. The original grouped ::-webkit-input-placeholder
with :-moz-placeholder and :-ms-input-placeholder, and a single
unrecognised selector voids the whole group - so it never applied. */
.form-wrapper input::placeholder {
color: #9aa3ab;
font-weight: normal;
font-style: normal;
opacity: 1;
}
.form-wrapper button {
position: relative;
flex: 0 0 auto;
float: none;
border: 0;
margin: 5px;
padding: 0;
cursor: pointer;
height: 34px;
width: 46px;
background: #1D9DD2;
font-size: 15px;
color: #fff;
border-radius: 8px;
transition: background .2s ease;
}
.form-wrapper button:hover {
background: #157fac;
}
/* Kills the old CSS-triangle notch that pointed into the button. */
.form-wrapper button:before {
content: none;
}
.form-wrapper button::-moz-focus-inner {
border: 0;
padding: 0;
}
.toggle-nav {
display: block !important;
}
@media screen and (min-width: 768px) {
.footer-nav {
float: left;
display: none;
}
}
#block-main #block-content #content-wrapper form[name="contactForm"] li:nth-of-type(5) div {
padding-left: 268px !important;
}
@media screen and (max-width: 767px) {
#cat-menu li:nth-of-type(2) {
display: block !important;
}
.hidden-xs {
display: none;
}
.visible-xs {
display: block;
margin-top:10px;
}
.resp{display:none;}
}
/* Start of tablet landscape design */
@media screen and (min-width: 980px) and (max-width: 1100px) {
body {
overflow-x: hidden;
}
#block-main #block-header .wrapper,
#block-main #block-content .wrapper,
#block-footer .wrapper {
width: 1024px;
}
#block-main #block-content #content-wrapper-top,
#block-main #block-content #content-wrapper {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#block-main #block-content #content-wrapper #cat-menu-wrapper {
width: 995px;
}
#block-main #block-content #content-wrapper #content,
#block-main #block-content #content-wrapper .page-content,
#block-main #block-content #content-wrapper .page-content .item,
#block-main #block-content #content-wrapper .page-content .wall-info,
#block-main #block-content #content-wrapper .page-content .fb-info,
#block-main #block-content #content-wrapper .page-content #related,
#block-main #block-content #content-wrapper .page-content .fb_ltr,
#block-main #block-content #content-wrapper ul.wallpapers {
width:100%;
}
#block-main #block-content #content-wrapper .page-content .wallpaper-resolutions {
width:720px;
}
.section-wrapper.review {
width:99%;
}
#block-main #block-content #content-wrapper ul.wallpapers .thumb_img {
width: 225px;
height: auto;
}
#block-main #block-content #content-wrapper ul.wallpapers .thumb em1{
width:225px;
top:100px;
}
#block-main #block-content #content-wrapper .wallpaper-thumb img {
width: 467px !important;
height: auto !important;
}
#logo {float:none;width:unset;text-align:center;}
#logo-wrapper,#logo,#logo>img,#menu {float:none;}
}
/* End of tablet landscape design */
/* Start of tablet portrait design */
@media screen and (min-width: 768px) and (max-width: 992px) {
body {
overflow-x: hidden;
}
.wallpaper-resolutions span {
width:auto;
}
.wallpaper-resolutions p {
display:none;
}
.navigation_thumb {
margin-left:24px;
}
.mprev {
font-weight:bold;
display:block;
color:#648398;
position:absolute;
}
.mnext {
font-weight:bold;
display:block;
color:#648398;
position:absolute;
margin-left:155px;
}
.thumb em1 {
top:95px;
width:202px;
}
#content article {
margin:0;
}
#block-main #block-header .wrapper,
#block-main #block-content .wrapper,
#block-footer .wrapper {
width: 768px;
}
#block-main #block-content #content-wrapper-top,
#block-main #block-content #content-wrapper {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#block-main #block-content #content-wrapper #cat-menu-wrapper {
width: 740px;
}
#block-main #block-content #content-wrapper #cat-menu-wrapper .cat-menu li:first-of-type a {
display: block;
}
#block-main #block-content #content-wrapper #content,
#block-main #block-content #content-wrapper .page-content,
#block-main #block-content #content-wrapper .page-content .item,
#block-main #block-content #content-wrapper .page-content .overview,
#block-main #block-content #content-wrapper .page-content .wall-info,
#block-main #block-content #content-wrapper .page-content .fb-info,
#block-main #block-content #content-wrapper .page-content .fb_ltr,
#block-main #block-content #content-wrapper .page-content .wallinfo,
#block-main #block-content #content-wrapper ul.wallpapers {
width:100%
}
#block-main #block-content #content-wrapper .page-content .overview{
padding-left:20px;
}
ul.wallpapers{
margin-left:-45px;
}
#block-main #block-content #content-wrapper .page-content #related {
max-width: 100%;
}
#block-main #block-content #content-wrapper .page-content .wallpaper-resolutions,
#block-main #block-content #content-wrapper .page-content .fb_iframe_widget,
.section-wrapper.review {
width: 720px !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#block-main #block-content #content-wrapper .page-content .navigation_thumb .darken {
margin: 2px 0 15px !important;
}
#block-main #block-content #content-wrapper .page-content .navigation_thumb img {
}
#block-main #block-content #content-wrapper .page-content span.prev_next {
display:none;
}
#block-main #block-content #content-wrapper ul.wallpapers .thumb_img {
width: 226px;
height: auto;
}
#block-main #block-content #content-wrapper .wallpaper-thumb img {
width: 427px !important;
height: auto !important;
}
#related .tabdiv-wrapper {
padding:12px 12px 16px;
}
#block-main #block-content #content-wrapper .page-content form[name="contactForm"] input,
#block-main #block-content #content-wrapper .page-content form[name="contactForm"] textarea {
width: 310px;
}
#block-main #block-content #content-wrapper .page-content form[name="contactForm"] label {
width: 120px;
}
#block-main #block-content #content-wrapper .page-content form[name="contactForm"] li:nth-of-type(4) div {
width: 291px !important;
}
#block-main #block-content #content-wrapper .page-content form[name="contactForm"] li:last-of-type div {
padding-left: 140px !important;
}
.cat-menu ul li a {
letter-spacing: 1px;
}
ul.categoryList{grid-template-columns:repeat(3,1fr)}
ul.categoryList li.wall{width:auto}
.license {
float: left;
}
.author {
margin-bottom: 10px;
line-height: 1.6em;
}
#buttons a.button2 {margin-left:4px;}
#logo {float:none;width:unset;text-align:center;}
#logo-wrapper {float:none;}
#logo,#logo>img,#menu{float:none;}
}
/* End of tablet portrait design */
/* Start of mobile design */
.btn-toggle {
display: block;
@media screen and (min-width: 768px) {
display: none;
}
}
@media screen and (min-width: 768px) {
#block-main #block-content #cat-menu-wrapper {
display:block !important;
margin-top: 10px;
}
}
@media screen and (max-device-width: 767px) and (orientation: portrait) {
#related .panel {
float: unset;
}
span.android img {
display:block;
}
.cat-menu ul li a.app{
color:#a4c639;
}
.cat-menu ul li a.app:hover{
background:linear-gradient(90deg, #474b53, #343434);
}
#related {
max-width:100%;
}
.form-wrapper {
width:auto;
}
#search {
margin-top:12px;
}
.prevnext {
display:none;
}
.wallpaper-resolutions span {
width:auto;
}
.wallpaper-resolutions p {
display:none;
}
#cat-menu-inner {
padding: 0;
}
.mprev {
font-weight:bold;
float:left;
display:block;
}
.mnext {
font-weight:bold;
float:right;
display:block;
}
#tabs-categories li {
padding:3px 12px 3px 15px;
}
.pagination span[class="disabled"]{
display: none;
}
#page-highlight {
width: 100%;
}
.bar1, .bar2, .bar3 {
width: 30px;
height: 4px;
background-color: #676767;
margin: 7px 0;
transition: 0.4s;
}
/* Rotate first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* Fade out the second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}
.btn-toggle {
position: absolute;
top: 22px;
right: 15px;
}
#block-main #block-content #content-wrapper {
padding: 0;
}
#block-main #block-content #content-wrapper #cat-menu-top-left,
#block-main #block-content #content-wrapper #cat-menu-top-right,
#block-main #block-content #content-wrapper #cat-menu-bottom-left,
#block-main #block-content #content-wrapper #cat-menu-bottom-right {
display: none;
}
#block-main #block-content #content-wrapper #content {
padding: 0 5px;
box-sizing: border-box;
}
#block-main #block-header .wrapper,
#block-main #block-content .wrapper {
width: 100%;
}
#block-main #block-header .wrapper #logo-bar {
padding: 0;
}
#block-main #block-header .wrapper #logo-bar #site-logo {
width: 275px !important;
height: auto !important;
}
/* Shown on mobile now, where it used to be display:none. Google indexes
mobile-first, so links hidden here are worth little - and these are
the reason the line exists. Only the lead sentence is dropped, to
keep the chips on one row. */
/* 14px top, not the desktop 7px: #logo-bar drops to padding:0 at this
breakpoint, so this padding is the only thing separating the chips
from the logo. */
#block-main #block-header .wrapper .subtitle {
display: flex;
gap: 6px;
padding: 14px 10px 10px;
}
#block-main #block-header .wrapper .subtitle span {
display: none;
}
#block-main #block-content #cat-menu-wrapper {
display: none;
position: relative;
background: transparent;
position: absolute;
left: 0;
top: 85px;
background: #333;
z-index: 1001;
}
#block-main #block-content #cat-menu-wrapper .cat-menu {
// display: none;
height: auto;
background: transparent;
}
#block-main #block-content #cat-menu-wrapper .left-cap,
#block-main #block-content #cat-menu-wrapper .right-cap {
display: none;
}
#block-main #block-content #cat-menu-wrapper .cat-menu li {
display: block;
float: none;
border-bottom:1px solid #4c4c4c;
margin:0;
}
#block-main #block-content #cat-menu-wrapper .cat-menu li a {
float: none;
padding: 16px 0px;
width:100%
}
#block-main #block-content #cat-menu-wrapper .cat-menu #last-item,
#block-main #block-content #cat-menu-wrapper .cat-menu #random-article {
display: none;
}
#block-main #block-content #content-wrapper-top,
#block-main #block-content #content-wrapper,
#block-main #block-content #content-wrapper .page-content,
#block-main #block-content #content-wrapper .page-content {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#block-main #block-content #content-wrapper #cat-menu-wrapper,
#block-main #block-content #content,
#block-main #block-content #content-wrapper ul.wallpapers {
width: 100% !important;
}
#block-main #block-content #content-wrapper ul.wallpapers {
margin: -15px 0 20px 0;
padding: 0;
}
#block-main #block-content #content-wrapper ul.wallpapers li {
width: 50%;
}
#block-main #block-content #content-wrapper ul.wallpapers li:nth-of-type(even) {
margin-right: 5px;
}
#block-main #block-content #content-wrapper ul.wallpapers li .thumb {
margin-left: 0;
}
#block-main #block-content #content-wrapper ul.wallpapers li img {
margin: 0;
height: auto;
}
#block-main #block-content #content-wrapper .cat-menu {
width: 100%;
}
#block-main #block-content #content-wrapper ul.wallpapers .wall {
width: 100%;
margin-bottom:-20px;
}
#block-main #block-content #content-wrapper ul.wallpapers .wall img {
width: 100% !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#block-main #block-content #content-wrapper .page-content,
#block-main #block-content #content-wrapper .page-content .item,
#block-main #block-content #content-wrapper .page-content .overview,
#block-main #block-content #content-wrapper .page-content .wall-info,
#block-main #block-content #content-wrapper .page-content .fb-info,
#block-main #block-content #content-wrapper .page-content .fb_ltr,
#block-main #block-content #content-wrapper .page-content .wallinfo {
width: 100%;
box-sizing: border-box;
}
#related .tabdiv-wrapper {
padding:10px 10px 14px;
}
#block-main #block-content #content-wrapper .page-content .item {
margin-left: 0;
}
#block-main #block-content #content-wrapper .page-content .navigation_thumb a {
height: auto;
width: 40%;
}
.navigation_thumb a:first-child {
margin:0;;
}
.darken.prev {
background:none;
float:left;
margin-top:5px !important;
}
.darken.next {
background:none;
float:right;
margin-top:5px !important;
}
#block-main #block-content #content-wrapper .page-content .overview {
padding: 15px 0 5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#block-main #block-content #content-wrapper .page-content .overview img {
width: 100%;
height: auto;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#block-main #block-content #content-wrapper .page-content .wallpaper-resolutions,
.section-wrapper.review {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#block-main #block-content #content-wrapper .page-content .fb-comments,
#block-main #block-content #content-wrapper .page-content .fb-comments span,
#block-main #block-content #content-wrapper .page-content .fb-comments iframe {
width: 100% !important;
}
span.prev_next {
display:none;
}
.sidebar {
width: 100%;
padding: 0 10px;
box-sizing: border-box;
}
.sidebar iframe {
display: block;
margin: 0 auto;
}
/* No background here: .form-wrapper paints the field now, and a grey
fill behind it showed as corners poking out of the rounded control. */
.sidebar #search {
width: 100%;
}
.sidebar .search_wrapper {
width: 100% !important;
}
.wrapper {
width: 100%;
}
#block-main #block-content #content-wrapper .page-content form[name="contactForm"] input,
#block-main #block-content #content-wrapper .page-content form[name="contactForm"] textarea {
width: 100%;
}
#block-main #block-content #content-wrapper .page-content form[name="contactForm"] input {
height: 35px;
padding-top: 0;
padding-bottom: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#block-main #block-content #content-wrapper .page-content form[name="contactForm"] textarea {
resize: none;
}
#block-main #block-content #content-wrapper .page-content form[name="contactForm"] label {
width: 100%;
text-align: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#block-main #block-content #content-wrapper .page-content form[name="contactForm"] li:nth-of-type(4) div {
width: 100% !important;
}
#block-main #block-content #content-wrapper .page-content form[name="contactForm"] li:last-of-type div {
padding-left: 0 !important;
}
#footer .floatleft {
width: 100%;
float: none;
display: inline-block;
padding: 0 20px;
text-align: center;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
#footer .floatleft a {
padding-left: 5px;
margin-right: 5px;
line-height: 40px;
}
#footer .floatleft a:last-of-type {
margin-right: 0;
}
ul.categoryList{grid-template-columns:repeat(2,1fr)}
ul.categoryList li.wall{width:auto}
#cat-menu li.hide {
display:block;
}
.thumb em1 {
color: #181818;
position: relative;
display: block;
padding: 3px 0px;
width: 246px;
margin: auto;
top: auto;
left: auto;
padding: 0;
width: 80%;
}
.thumb a:hover em1 {
background: none;
}
.thumb a em1 {
display: block;
opacity: 1;
font-family: 'Armata',sans-serif;
font-size: 12px;
letter-spacing: normal;
}
.thumb a {
margin-bottom:5px;
}
.page-content h1 {
font-size: 1.2em;
margin: 5px 0 10px 0;
}
.cat-menu ul {
width:100%
}
#tabs-categories li.parent a {
font-size: 14px;
}
/* The flex gap spaces these now; the old margins would double up on it.
Kept slightly smaller so more page numbers fit a phone row. */
.pagination{gap:6px;padding:16px 0 20px;font-size:14px}
.pagination a, .pagination span.selected, .pagination span.disabled {
min-width:38px;
height:38px;
padding:0 12px;
margin:0;
}
.license {
float: left;
}
.author {
margin-bottom: 10px;
line-height: 1.6em;
}
#buttons a.button2 {margin-left:4px;}
.cat-menu ul li ul {margin:0;}
.cat-menu ul li ul li a {text-align:center !important;}
}
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation: landscape) {
#block-main #block-content #content-wrapper ul.wallpapers .wall {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 48% !important;
float: left;
}
#block-main #block-content #content-wrapper ul.wallpapers .wall:nth-of-type(odd) {
margin-right: 2%;
}
}
@media only screen and (min-width: 600px) and (max-width: 767px) {
#block-main #block-content #content-wrapper ul.wallpapers .wall {
width: 48%;
}
#block-main #block-content #content-wrapper ul.wallpapers .wall:nth-of-type(odd) {
margin-right: 2%;
}
}
/* End of mobile design */
@media all and (orientation:landscape) {
#logo {float:none;width:unset;text-align:center;}
#logo-wrapper,#logo,#logo>img,#menu {float:none;}
}
@media all and (orientation:portrait) {
span.resp {
display:none;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.wallinfo {
width:100%;
}
}
/* ==================================================================
COLLECTIONS
================================================================== */
/* ---- Collection grid: 3 per row -------------------------------------
Collection covers are the main content on the home, category, latest,
random, popular and search pages. Scoped to .collections-grid so the
wallpaper grid inside a collection page keeps its own sizing.
Sizing is 1034px wide inside an 18px side margin, which together fill
the 1070px content box of #content-wrapper. Two things ride on that
split:
1. .page-content is display:inline-block and so shrink-to-fit, and it
takes its width from this grid's MARGIN box - the full 1070px. The
dark section heading is a block child of .page-content with no margin
of its own, so it runs the full width and lines up with the search
bar, while the tiles sit inside it.
2. .page-content also has overflow:hidden, so it CLIPS anything painted
outside it - including a tile's hover shadow. The margin is 18px, not
an arbitrary few pixels, because that shadow is 0 18px 32px: a 32px
blur reaches about 16px to either side, so an edge tile needs ~16px
of room or its shadow is sliced off in a hard vertical line. The
bottom margin is 30px for the same reason (18px offset + 16px blur,
less the 4px .page-content already has below).
The width has to be stated rather than left auto: 1fr tracks inside a
shrink-to-fit parent are circular and can collapse. With a definite
width the three columns divide the row exactly, leaving no remainder.
------------------------------------------------------------------ */
ul.wallpapers.collections-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px 20px;
width:1034px;
max-width:100%;
float:none;
clear:both;
margin:15px 18px 30px;
padding:0;
list-style:none;
box-sizing:border-box;
}
ul.wallpapers.collections-grid li.wall{
float:none;
display:block;
margin:0;
width:auto;
min-width:0;
position:relative;
background:#fff;
border-radius:14px;
overflow:hidden;
box-shadow:0 2px 10px rgba(15,23,42,.10);
transition:box-shadow .25s ease, transform .25s ease;
}
/* z-index because every tile is position:relative, so siblings paint in DOM
order: without it the next tile's white card is painted OVER the hovered
tile's shadow and slices it off in a straight line. The shadow is also
kept inside the 18px side margin (26px blur reaches ~13px) so the
clipping ancestor cannot cut it either. */
ul.wallpapers.collections-grid li.wall:hover{
box-shadow:0 14px 26px rgba(15,23,42,.20);
transform:translateY(-4px);
z-index:3;
}
ul.wallpapers.collections-grid .thumb{margin:0;position:relative}
ul.wallpapers.collections-grid .thumb a{display:block;margin:0}
/* 331px column (1034 - 2x20 gap, / 3) at the 246x154 thumbnail's own 1.6
ratio = 207px, so covers are not cropped tighter than the source. */
ul.wallpapers.collections-grid .thumb_img{
width:100%;
height:207px;
object-fit:cover;
margin:0;
float:none;
display:block;
box-sizing:border-box;
border:none;
padding:0;
border-radius:0;
box-shadow:none;
transition:transform .4s ease;
}
ul.wallpapers.collections-grid li.wall:hover .thumb_img{
transform:scale(1.06);
box-shadow:none;
}
/* Gradient scrim instead of a flat caption bar, so the title sits on the
photo rather than behind a hard-edged box. Always on (no hover needed) -
these are cover tiles people click straight through, never sit and hover. */
ul.wallpapers.collections-grid .thumb em1{
position:absolute;
top:auto;
bottom:0;
left:0;
right:0;
width:auto;
display:block;
opacity:1;
box-sizing:border-box;
padding:34px 14px 12px;
background:linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.42) 60%, rgba(0,0,0,0) 100%);
color:#fff;
font-size:15px;
font-weight:600;
letter-spacing:normal;
text-align:left;
text-shadow:0 1px 3px rgba(0,0,0,.45);
}
ul.wallpapers.collections-grid .collection-admin{
position:absolute;
top:10px;
left:10px;
z-index:2;
background:rgba(255,255,255,.9);
border-radius:8px;
padding:3px 4px;
line-height:0;
box-shadow:0 2px 6px rgba(0,0,0,.15);
}
/* ---- Inside a collection: 3 wallpapers per row ----------------------
Sized exactly like .collections-grid above - 1034px inside an 18px side
margin, together filling the 1070px content box - so a collection page
and the pages that link to it line up on the same edges. See that block
for why the width is stated rather than auto, why the margin is 18px
(hover-shadow clearance against .page-content's clip) and how the margin
box keeps the breadcrumb heading at full width.
------------------------------------------------------------------ */
ul.wallpapers.collection-wallpapers{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:26px 20px;
width:1034px;
max-width:100%;
float:none;
clear:both;
margin:15px 18px 30px;
padding:0;
list-style:none;
box-sizing:border-box;
}
/* ---- Sparse collections ----------------------------------------------
Half the collections hold a single wallpaper and a fifth hold two, so the
3-column grid stranded one or two cards against a column of empty space.
One wallpaper now becomes a centred hero and two split the row that three
normally share; three and up are untouched.
Only collection.tpl sets these classes. The resolution browse pages reuse
this grid and their last page can legitimately end on one or two tiles -
those have to keep the column width of the pages before them.
The wider tiles switch to the 520px thumbnail (see wallpaper_tile.tpl).
That is the largest file the site holds - t1/t2/t3 are 246, 520 and 400
wide and there is no t4 - so the hero track is 520px exactly: any wider
and the browser upscales a thumbnail it cannot improve on. min() rather
than a plain length: a browser without it drops the declaration and falls
back to the 3-column rule above, which is exactly the old behaviour. */
ul.wallpapers.collection-wallpapers.is-single{
grid-template-columns:min(520px,100%);
justify-content:center;
}
ul.wallpapers.collection-wallpapers.is-pair{
grid-template-columns:repeat(2,1fr);
}
/* The base rule pins the photo to 207px, the height a 331px column wants.
These columns are wider, so state the ratio and let the height follow -
the same thing the responsive rules further down do. */
ul.wallpapers.collection-wallpapers.is-single .thumb_img,
ul.wallpapers.collection-wallpapers.is-pair .thumb_img{
height:auto;
aspect-ratio:1.6;
}
/* Hero proportions: a 13px caption and a 640px-wide solid button under a
photo that size read as a stretched tile rather than a feature. */
ul.wallpapers.collection-wallpapers.is-single li.wall{padding:0 18px 18px}
ul.wallpapers.collection-wallpapers.is-single .thumb{margin:0 -18px 14px}
ul.wallpapers.collection-wallpapers.is-single .wall-name{
font-size:16px;
max-height:44px;
margin-bottom:12px;
}
/* A definite width, not auto: the card is a flex column, and the auto side
margins that centre the button also switch off the default stretch, so
`width:auto` collapsed it to fit-content - a ~96px button whose 6px side
padding (fine when it spanned the card) left the label wedged against the
edges. Carries the #block-main prefix so it also outranks the responsive
`.wall-download{width:100%}` rules, which are written at that depth. */
#block-main #block-content #content-wrapper ul.wallpapers.collection-wallpapers.is-single .wall-download{
width:min(320px,100%);
margin:auto auto 0;
padding:12px 20px;
font-size:13px;
}
/* Deliberately calmer than .collections-grid: these are action cards (the
Download button is the point), not browse cards, so no overlay caption
and no dramatic hover lift - a thin card with the photo on top and the
name/button inset below it. */
ul.wallpapers.collection-wallpapers li.wall{
float:none;
display:flex;
flex-direction:column;
width:auto;
min-width:0;
box-sizing:border-box;
margin:0;
position:relative;
text-align:center;
background:#fff;
border-radius:12px;
padding:0 14px 14px;
box-shadow:0 1px 4px rgba(15,23,42,.08);
overflow:hidden;
transition:box-shadow .2s ease;
}
ul.wallpapers.collection-wallpapers li.wall:hover{
box-shadow:0 8px 22px rgba(15,23,42,.14);
z-index:3;
}
/* Negative side margins cancel the card's own padding so the photo still
bleeds to the card edge; overflow:hidden on the card clips it to the
top corners' radius. */
ul.wallpapers.collection-wallpapers .thumb{margin:0 -14px 12px;position:relative}
ul.wallpapers.collection-wallpapers .thumb a{display:block;margin:0}
/* 331px column (1034 - 2x20 gap, / 3) at the 246x154 thumbnail's own 1.6
ratio = 207px, matching the covers on the pages that link here. */
ul.wallpapers.collection-wallpapers .thumb_img{
width:100%;
height:207px;
object-fit:cover;
margin:0;
float:none;
display:block;
box-sizing:border-box;
border:none;
padding:0;
border-radius:0;
box-shadow:none;
transition:transform .35s ease;
}
ul.wallpapers.collection-wallpapers li.wall:hover .thumb_img{
transform:scale(1.03);
}
/* Admin-only remove control, pinned to the tile corner so it does not
take a row of its own between the thumbnail and the name. */
ul.wallpapers.collection-wallpapers .collection-admin{
position:absolute;
top:10px;
left:10px;
z-index:2;
background:rgba(255,255,255,.9);
border-radius:8px;
padding:3px 4px;
line-height:0;
box-shadow:0 2px 6px rgba(0,0,0,.15);
}
/* Wallpaper name above its Download button. */
.wall-name{
width:100%;
margin:0 0 8px 0;
font-size:13px;
line-height:1.35;
/* Capped at two lines (13px x 1.35 x 2 = 35.1) rather than reserving that
height outright - a one-line title should not leave dead space above
the button. Row alignment instead comes from the card being a flex
column with the button pinned to the bottom (margin-top:auto below),
so it lines up with its neighbours regardless of title length. */
max-height:36px;
color:#333;
font-weight:500;
text-align:center;
overflow:hidden;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
word-wrap:break-word;
}
.wall-download{
display:block;
width:100%;
box-sizing:border-box;
margin:auto 0 0 0;
padding:10px 6px;
background:#1D9DD2;
color:#fff !important;
font-size:12px;
font-weight:bold;
letter-spacing:.5px;
text-align:center;
text-decoration:none;
border-radius:9px;
box-shadow:0 2px 8px rgba(29,157,210,.35);
transition:background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.wall-download:hover{
background:#157fac;
text-decoration:none;
color:#fff !important;
box-shadow:0 6px 16px rgba(21,127,172,.4);
transform:translateY(-2px);
}
.wall-download .res{
display:block;
font-weight:normal;
font-size:11px;
letter-spacing:0;
opacity:.85;
margin-top:2px;
}
/* Wallpapers past the first batch. Present in the markup - see the note in
collection.tpl - just not shown until "Load more" is pressed. Being
display:none they are never near the viewport, so their lazy images are
not fetched either. */
/* Selector shape matches the base tile rule above plus .is-folded. The
shorter `.collection-wallpapers li.wall.is-folded` lost to it: both carry
three classes, but the base rule also has two element names to this one's
one, so its display:flex won and nothing was ever hidden. */
ul.wallpapers.collection-wallpapers li.wall.is-folded{display:none}
.coll-more{text-align:center;margin:4px 0 26px}
.coll-more-btn{
display:inline-flex;
align-items:center;
gap:7px;
padding:0 26px;
height:44px;
box-sizing:border-box;
background:#fff;
border:1px solid #e0e6ea;
border-radius:10px;
color:#4a5560;
font-family:Arial,Helvetica,sans-serif;
font-size:14px;
font-weight:700;
cursor:pointer;
transition:background .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.coll-more-btn:hover{
background:#f0f8fc;
border-color:#1D9DD2;
color:#1478a3;
box-shadow:0 4px 12px rgba(29,157,210,.18);
transform:translateY(-1px);
}
.coll-more-left{font-weight:400;opacity:.75}
.collection-description{margin:10px 0;font-size:13px;line-height:1.6em}
/* The generated blurb under a collection's wallpapers. It was a bare div
with an inline margin and no styling at all, so it read as loose body
text sitting between two styled blocks. Given the same card treatment as
everything else, with the theme blue as a left rule to mark it as a note
rather than page copy. */
.coll-blurb{
margin:18px 0 20px;
padding:14px 18px;
background:#f7f9fa;
border:1px solid #e6eaee;
border-left:3px solid #1D9DD2;
border-radius:10px;
font-size:13px;
line-height:1.7;
color:#5b6470;
}
.coll-blurb b{color:#3a444f}
.coll-blurb .coll-blurb-name{text-transform:capitalize;color:#3a444f}
.collection-admin-bar{margin:15px 0;padding:10px}
.no-results{padding:20px 0;color:#888;font-size:14px}
/* The generic responsive rule pins .thumb_img to 225px; collection tiles
have their own sizes, so re-assert them per breakpoint. */
@media screen and (max-width:1100px){
/* Below the fixed 1070px layout the wrapper goes fluid, so the grids do
too. width:auto rather than 100% so the side margins come out of the
row instead of pushing the grid past its right edge; the parent has a
definite width here, so auto still resolves for 1fr. */
ul.wallpapers.collections-grid,
ul.wallpapers.collection-wallpapers{grid-template-columns:repeat(3,1fr);width:auto}
#block-main #block-content #content-wrapper ul.wallpapers.collections-grid li.wall,
#block-main #block-content #content-wrapper ul.wallpapers.collection-wallpapers li.wall{width:auto!important}
#block-main #block-content #content-wrapper ul.wallpapers.collections-grid .thumb_img,
#block-main #block-content #content-wrapper ul.wallpapers.collection-wallpapers .thumb_img{width:100%;height:auto;aspect-ratio:1.6}
#block-main #block-content #content-wrapper ul.wallpapers.collections-grid .thumb em1{width:auto;top:auto;bottom:0}
#block-main #block-content #content-wrapper .wall-download{width:100%}
#block-main #block-content #content-wrapper .wall-name{width:100%}
#related .tabdiv-wrapper{grid-template-columns:repeat(4,1fr)}
#related .panel{width:auto}
#related .panel img{height:auto;aspect-ratio:1.6}
}
@media screen and (max-width:1010px){
ul.wallpapers.collections-grid,
ul.wallpapers.collection-wallpapers{grid-template-columns:repeat(2,1fr);justify-content:stretch;gap:18px 14px;width:auto}
#block-main #block-content #content-wrapper ul.wallpapers.collections-grid li.wall,
#block-main #block-content #content-wrapper ul.wallpapers.collection-wallpapers li.wall{width:auto!important}
#block-main #block-content #content-wrapper ul.wallpapers.collections-grid .thumb_img,
#block-main #block-content #content-wrapper ul.wallpapers.collection-wallpapers .thumb_img{width:100%;height:auto}
/* Fluid tiles at this width, so the name and button follow the column. */
#block-main #block-content #content-wrapper .wall-download,
#block-main #block-content #content-wrapper .wall-name{width:100%}
/* 18px a side is a lot of a phone's width. The hover shadow is a
pointer effect anyway, so on touch widths trade the clearance back
for tile width. !important only to outrank the hardening rule. */
#block-main #block-content #content-wrapper ul.wallpapers.collections-grid,
#block-main #block-content #content-wrapper ul.wallpapers.collection-wallpapers{
margin:15px 8px 20px!important;
/* width too, and at this specificity, because the theme's phone
block carries `#block-main #block-content #content-wrapper
ul.wallpapers{width:100%!important}`. That outranked the plain
`width:auto` above, so the grid measured a full 100% and then the
side margins pushed it 16px past the right edge of the screen. */
width:auto!important;
}
#related .tabdiv-wrapper{grid-template-columns:repeat(2,1fr);gap:18px 14px}
#related .panel{width:auto}
#related .panel img{height:auto;aspect-ratio:1.6}
}
@media screen and (max-width:560px){
ul.wallpapers.collections-grid,
ul.wallpapers.collection-wallpapers{grid-template-columns:1fr;gap:14px}
/* The sparse-collection rules sit at a higher specificity than the line
above, so the two-up pair would otherwise stay two-up on a phone. */
ul.wallpapers.collection-wallpapers.is-pair{grid-template-columns:1fr}
ul.wallpapers.collection-wallpapers.is-single .wall-name{font-size:14px;max-height:38px}
#related .tabdiv-wrapper{grid-template-columns:1fr}
.section-wrapper.dark .section{padding:9px 14px 9px 26px}
.section-wrapper.dark .section:before{left:13px;height:14px;margin-top:-7px}
.section-wrapper.dark .section h1{font-size:18px!important}
}
/* ---- Harden against the original theme's device/orientation responsive
rules --------------------------------------------------------------
Those rules target bare ul.wallpapers/li/.wall/.thumb selectors at high
specificity (some !important) because items.tpl's older wallpaper grid
still relies on them. Our grids reuse those same class names, so on an
actual phone (which matches max-device-width and orientation queries
regardless of our own max-width breakpoints above) they would otherwise
win: forcing e.g. li{width:50%}, .wall{margin-bottom:-20px}, or
.wall{width:23%/48%} onto our cards. Re-assert our own values at equal-
or-greater specificity so nothing but the rules above controls sizing. */
/* The side and bottom margin keeps an edge tile's hover shadow clear of
.page-content's clip; both grids are inset identically. */
#block-main #block-content #content-wrapper ul.wallpapers.collections-grid,
#block-main #block-content #content-wrapper ul.wallpapers.collection-wallpapers{
margin:15px 18px 30px!important;
padding:0!important;
}
#block-main #block-content #content-wrapper ul.wallpapers.collections-grid li.wall,
#block-main #block-content #content-wrapper ul.wallpapers.collection-wallpapers li.wall{
margin-right:0!important;
margin-bottom:0!important;
}
#block-main #block-content #content-wrapper ul.wallpapers.collection-wallpapers li.wall .thumb{
margin:0 -14px 12px!important;
}
/* Collection breadcrumb line: Category > Collection (N wallpapers) . updated */
.coll-crumbs a{color:#1D9DD2;text-decoration:none}
.coll-crumbs a:hover{text-decoration:underline}
.coll-crumbs .crumb-sep{margin:0 5px;color:#aaa}
.coll-crumbs .crumb-here{color:#444}
.coll-crumbs .crumb-count{color:#666}
.coll-crumbs .crumb-upd{color:#888}
/* Link to the collection a wallpaper belongs to, shown beside its title on the
resolution browse pages so those pages still lead into the pages meant to
rank. An icon rather than a repeated name - the name is in the tooltip. */
.wall-coll-link{color:#b0b0b0;text-decoration:none;font-size:11px;vertical-align:baseline}
.wall-coll-link:hover{color:#1D9DD2}
/* Admin/site feedback messages. init.php has always assigned these, but no
template rendered them - so every "saved", "moved" or "cannot do that"
message was computed and silently thrown away. */
.site-msg{padding:10px 14px;margin:0 0 14px 0;border-radius:4px;font-size:13px;line-height:1.5}
.site-msg div{display:none}
.site-msg.error{background:#fdecea;border:1px solid #f5aca6;color:#a3271b}
.site-msg.success{background:#eaf7ea;border:1px solid #a6d7a6;color:#1e6b1e}
.site-msg.notice{background:#fdf6e3;border:1px solid #e5d98a;color:#7a5c12}
/* ---- Legal pages (privacy) -------------------------------------------
The old privacy page was headings separated by
pairs, which
gave a wall of text with no scannable structure. Real headings and a
cookie table need styling of their own: .page-content sets no h2/h3/table
rules, and the theme's global table styles are built for the admin grids. */
.legal{max-width:860px;margin:0 auto;padding:6px 4px 24px;font-size:14px;line-height:1.7;color:#4a545f}
.legal-updated{color:#8a939c;font-size:12.5px;margin:0 0 24px}
/* .page-content h1,h2,h3 (line 422) hands every heading in here the theme's
Prociono serif and a text-shadow, and it does it at the same specificity
these rules carry - so the properties this block does not name are the ones
that leak through. It named neither, which is why the headings came out as
shadowed serif over a sans body. Inherit rather than restate a stack: these
headings should track whatever the page's body font is. */
.legal h2,.legal h3{
font-family:inherit;
text-shadow:none;
color:#28313b;
}
.legal h2{
font-size:20px;
line-height:1.3;
font-weight:700;
margin:38px 0 12px;
padding:2px 0 2px 12px;
border-left:4px solid #1D9DD2;
}
/* Tracks up rather than sizing up: at 15px bold it read as an emphasised
paragraph rather than a heading, because the body text is bold-capable too. */
.legal h3{
font-size:13px;
font-weight:700;
letter-spacing:.06em;
text-transform:uppercase;
color:#5b6470;
margin:26px 0 6px;
}
.legal p{margin:0 0 12px}
.legal ul{margin:0 0 14px;padding-left:22px;list-style:disc}
.legal li{margin:0 0 6px}
.legal a{color:#1D9DD2}
.legal a:hover{text-decoration:underline}
/* Wide-ish for a phone even at three columns, so it scrolls in its own box
rather than pushing the page sideways. */
.legal-table{
display:block;
overflow-x:auto;
width:100%;
border-collapse:collapse;
margin:6px 0 16px;
font-size:13px;
}
.legal-table th,.legal-table td{
border:1px solid #e6eaee;
padding:9px 12px;
text-align:left;
vertical-align:top;
}
.legal-table th{background:#f7f9fa;color:#3a444f;font-weight:600;white-space:nowrap}
.legal-table td:first-child{font-family:Consolas,Monaco,monospace;font-size:12px;color:#3a444f}
@media screen and (max-width:560px){
.legal{font-size:13.5px}
.legal h2{font-size:17px;margin-top:30px}
.legal h3{margin-top:22px}
}
/* ---- Form pages (contact) --------------------------------------------
The contact form was a inside .admin_function - the admin panel's own
wrapper, patterned background and all - with its column alignment done by
inline padding-left:270px on the rows that needed to clear the floated,
right-aligned, uppercase labels that rule applies. Stacked labels need none
of that, and none of those rules reach here any more. */
.formpage{max-width:620px;margin:0 auto;padding:6px 4px 30px}
/* Lead paragraph inside the card, divided from the fields. */
.formcard-intro{
margin:0 0 22px;
padding:0 0 18px;
border-bottom:1px solid #eef1f4;
font-size:14px;
line-height:1.7;
color:#5b6470;
}
.formcard{
background:#fff;
border:1px solid #e6eaee;
border-radius:12px;
padding:24px 24px 26px;
box-shadow:0 1px 4px rgba(15,23,42,.06);
}
.formcard .field{margin:0 0 18px}
.formcard label{
display:block;
float:none;
width:auto;
margin:0 0 6px;
padding:0;
text-align:left;
text-transform:none;
font-size:13px;
font-weight:600;
color:#2c3742;
letter-spacing:0;
}
.formcard input[type="text"],
.formcard input[type="email"],
.formcard textarea{
display:block;
width:100%;
box-sizing:border-box;
margin:0;
padding:11px 13px;
font-family:inherit;
font-size:14px;
line-height:1.5;
color:#2c3742;
background:#fff;
border:1px solid #d6dde4;
border-radius:8px;
transition:border-color .15s ease, box-shadow .15s ease;
}
.formcard textarea{resize:vertical;min-height:150px}
.formcard input:focus,
.formcard textarea:focus{
outline:none;
border-color:#1D9DD2;
box-shadow:0 0 0 3px rgba(29,157,210,.15);
}
.formcard input::placeholder,
.formcard textarea::placeholder{color:#a8b1ba}
.field-hint{display:block;margin-top:6px;font-size:12px;line-height:1.5;color:#8a939c}
/* Honeypot. Off-screen rather than display:none, which is the first thing a
form-filling bot checks for. Nothing reachable by keyboard or screen reader
points at it - see the tabindex and aria-hidden in contact.tpl. */
.field-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.field-captcha{margin-top:20px}
/* The widget is a fixed 304px iframe; let it scroll rather than overflow on a
narrow phone. */
.field-captcha .g-recaptcha{overflow-x:auto;max-width:100%}
.field-actions{margin-top:22px}
.formbtn{
display:inline-block;
width:auto;
min-width:180px;
padding:12px 26px;
font-family:inherit;
font-size:14px;
font-weight:600;
letter-spacing:.3px;
color:#fff;
background:#1D9DD2;
border:none;
border-radius:9px;
box-shadow:0 2px 8px rgba(29,157,210,.35);
cursor:pointer;
transition:background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.formbtn:hover:not(:disabled){background:#157fac;box-shadow:0 6px 16px rgba(21,127,172,.4);transform:translateY(-1px)}
.formbtn:disabled{background:#c3cad1;box-shadow:none;cursor:not-allowed}
.formbtn i{margin-right:7px}
/* Confirmation page */
.formcard-done{text-align:center;padding:34px 24px 30px;color:#5b6470;font-size:14px;line-height:1.7}
.formdone-icon{font-size:44px;color:#57b894;display:block;margin-bottom:14px}
.formdone-lead{margin:0 0 8px;font-size:17px;font-weight:600;color:#2c3742}
.formdone-back{margin:20px 0 0}
.formdone-back a{color:#1D9DD2;font-weight:600}
@media screen and (max-width:560px){
.formcard{padding:18px 16px 20px;border-radius:10px}
.formbtn{width:100%;min-width:0}
}