/* onderhond.com - css written and maintained by Niels Matthijs               */
/* Yahoo fonts.css integrated. (c) 2007, Yahoo! Inc. All rights reserved.     */

/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* 00. base styles                                                            */

/* general reset ************************************************************ */
* {margin:0; padding:0;}
html, body, form, img, fieldset, legend, table, tbody, thead, tfoot, tr, th, td {border:none;}
li {list-style:none;}

/* hide elements from screen but not from source **************************** */
.hidden {position:absolute; top:auto; left:-999em; right:auto; height:0; overflow:hidden;}
.hideText {letter-spacing:-999em; text-indent:-999em;}

/* html5 basics ************************************************************* */
nav, section, article, aside, header, footer {display:block;}

/* less functions *********************************************************** */
.gradient(@start, @color1, @color2) {background:-moz-linear-gradient((-1)*@start+90, @color1, @color2); background:-webkit-linear-gradient((-1)*@start+90, @color1, @color2); background:linear-gradient(@start, @color1, @color2);}
.gradient(@start, @color1, @stop, @color2) {background:-moz-linear-gradient((-1)*@start+90, @color1, @stop, @color2); background:-webkit-linear-gradient((-1)*@start+90, @color1, @stop, @color2); background:linear-gradient(@start, @color1, @stop, @color2);}

.trans (@prop, @time, @type){-webkit-transition:@prop @time @type; transition:@prop @time @type;}
.transAll(@time:1.5s) {.trans(all, @time, ease-out);}
.opacity {.trans(opacity, 0.2s, linear);}
.opacity (@timer){.trans(opacity, @timer, linear);}
.textshadow {.trans(text-shadow, 0.1s, linear);}
.color {.trans(color, 0.2s, linear);}
.background {.trans(background, 0.2s, linear);}
.translateX(@value) {-webkit-transform:translateX(@value); -ms-transform:translateX(@value); transform:translateX(@value); backface-visibility:hidden; perspective:1000;}
.translateY(@value) {-webkit-transform:translateY(@value); -ms-transform:translateY(@value); transform:translateY(@value); backface-visibility:hidden; perspective:1000;}
.rotate(@value) {-webkit-transform:rotate(@value); -ms-transform:rotate(@value); transform:rotate(@value);}
.box(@value) {-webkit-box-sizing:@value; -moz-box-sizing:@value; box-sizing:@value;}


.span {position:absolute; left:0; top:0; right:0; bottom:0;}

@sprite:32px;
.sprite(@x, @y) {background:url(img/sprite.png) @x*@sprite*(-1px) @y*@sprite*(-1px) no-repeat;}
.spriteBefore(@x, @y) {.sprite(@x, @y); position:absolute; content:"";}
.spritePos(@x, @y) {background-position:@x*@sprite*(-1px) @y*@sprite*(-1px);}


/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* 01. site frame styles                                                      */

/* base frame ............................................................... */
@widthWelcome:230px;
@widthFooter:275px;
@break3:1250px;
/* base styling */
html, body {height:100%; background:#222;}
body {font:13px/1 arial,trebuchet MS,tahoma,helvetica,clean,sans-serif; position:relative;}
#welcome {background:#000;}
#page {color:#fff; overflow:hidden; background:#565656;}
#main > * {margin:1em 0;}
#footer {position:fixed; bottom:0; left:-@widthFooter; z-index:10; background:#444; box-shadow:inset 0 0 3px rgba(16,16,16,0.85); overflow-x:hidden; -webkit-transition:-webkit-transform 0.25s ease-out; -ms-transition:-ms-transform 0.25s ease-out; -moz-transition:transform 0.25s ease-out; transition:transform 0.25s ease-out;}
body.footer #footer {left:0;}
#footer > * {margin:1em;}
#footer > .search, #footer > .list, #footer > .paging, #footer > .lnkArchive, #footer > .lnkRSS {margin:0;}
#site {position:fixed; bottom:0; -webkit-transition:-webkit-transform 0.25s ease-out; -ms-transition:-ms-transform 0.25s ease-out; -moz-transition:transform 0.25s ease-out; transition:transform 0.25s ease-out;}
#site > footer {position:absolute; bottom:0.75em; left:0.75em; right:0.75em;}
@media all and (min-width:600px) and (max-width:754px) {
	#main > * {max-width:600px; margin-left:auto; margin-right:auto; .box(border-box);}
}
@media all and (max-width:754px) {
	#welcome {right:0; height:45px; box-shadow:0 0 5px rgba(0,0,0,0.75); overflow:hidden;}
	#main {top:0; z-index:11; background:#565656; padding:0 6px;}
	#site {left:100%; top:45px; width:17em; background:rgba(128,128,128,0.95); z-index:40;}
	body.site #site {.translateX(-17em); box-shadow:0 0 150px rgba(0,0,0,0.95);}
	#footer {position:fixed; left:0; right:0; top:100%; -webkit-overflow-scrolling:touch; .trans(top,0.5s,ease-out); z-index:30;}
	body.footer #footer {top:25px;}
}
@media all and (min-width:755px) {
	#welcome {bottom:0; width:@widthWelcome; position:fixed; left:0; top:0; z-index:20;}
	#page {margin-left:@widthWelcome; padding-left:25px;}
	#main {padding:0 5px; margin:2.5em auto; max-width:600px;}
	#main:after {height:0;}
	#footer {top:0; left:@widthWelcome - @widthFooter; width:@widthFooter;}
	body.footer #footer {left:@widthWelcome;}
	#site {left:0; top:100px; width:@widthWelcome - 2px; z-index:25;}
}
@media all and (min-width:1200px){
	#page {margin-right:@widthFooter + 1px; margin-left:@widthWelcome; padding:0; min-height:100%;}
	#footer {right:0; left:auto; overflow:visible;}
	#welcome:after {.gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,1) 15%, rgba(255,255,255,0)); content:""; right:0; top:-100px; bottom:0; width:2px; position:absolute; z-index:100;}
	#blog #welcome:after {.gradient(180deg, rgba(0,224,224,0), rgba(0,224,224,1) 15%, rgba(0,224,224,0));}
	#gallery #welcome:after {.gradient(180deg, rgba(255,0,144,0), rgba(255,0,144,1) 15%, rgba(255,0,144,0));}
	#movies #welcome:after {.gradient(180deg, rgba(16,160,255,0), rgba(16,160,255,1) 15%, rgba(16,160,255,0));}
	#tools #welcome:after {.gradient(180deg, rgba(208,100,34,0), rgba(208,100,34,1) 15%, rgba(208,100,34,0));}
	#features #welcome:after {.gradient(180deg, rgba(192,224,0,0), rgba(192,224,0,1) 15%, rgba(192,224,0,0));}
}
@media all and (min-width:1270px){
	body {width:@break3; margin:0 auto;}
	#welcome, #site {left:50%; margin-left:(-0.5)*@break3;}
	#footer {left:50%; margin-left:0.5*@break3 - @widthFooter; right:auto;}
	#footer:after, #welcome:before {.gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,1) 15%, rgba(255,255,255,0)); content:""; right:-2px; top:-100px; bottom:0; width:2px; position:absolute;}
	#welcome:before {right:auto; left:-2px;}
	#blog #footer:after, #blog #welcome:before {.gradient(180deg, rgba(0,224,224,0), rgba(0,224,224,1) 15%, rgba(0,224,224,0));}
	#gallery #footer:after, #gallery #welcome:before {.gradient(180deg, rgba(255,0,144,0), rgba(255,0,144,1) 15%, rgba(255,0,144,0));}
	#movies #footer:after, #movies #welcome:before {.gradient(180deg, rgba(16,160,255,0), rgba(16,160,255,1) 15%, rgba(16,160,255,0));}
	#tools #footer:after, #tools #welcome:before {.gradient(180deg, rgba(208,100,34,0), rgba(208,100,34,1) 15%, rgba(208,100,34,0));}
	#features #footer:after, #features #welcome:before {.gradient(180deg, rgba(192,224,0,0), rgba(192,224,0,1) 15%, rgba(192,224,0,0));}
}

/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* 02. headings                                                               */

/* general heading declaration (backwards compatibility) .................... */
h1.heading span {font-size:174%;}
h2.heading span {font-size:131%;}
h3.heading span {font-size:131%;}

/* general heading declaration .............................................. */
h1, h2, .heading {font-size:100%; text-transform:uppercase; font-family:Calibri, Helvetica Neue, Arial;}
/* columns  */
#main > h1 span {font-size:197%;}
#footer h1 {text-transform:none;}
/* sections */
#blog #main .heading {color:#0dd;}
#tools #main .heading {color:#d06422;}

/* split heading ............................................................ */
h1 .split {outline:none;}
h1 .split span {font-size:100%;}
h1 .split .sep {font-family:"Courier New",Courier,monospace;}
h1 .split .secondary {font-size:85%; text-transform:lowercase;}
/* site sections */
#blog #main h1 .split, .focus.blog article a h1 {color:#0dd;}
#blog a:hover h1 .split, .focus.blog article a:hover h1 .split {text-shadow:0 0 5px #0dd;}
.focus.features article a h1 {color:#9c0;}
.focus.features article a:hover h1 .split {text-shadow:0 0 5px #9c0;}
#movies h1 {color:#1af; text-shadow:1px 1px 0 #333;}
#features #main h1 .split {color:#9c0; font-size:131.1%;}


/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* 03. links and buttons                                                      */

/* basic link ............................................................... */
a {color:#fff; text-decoration:none; cursor:pointer;}
/* sections */
#blog #main a:hover {color:#0dd;}
#movies #main a:hover {color:#1af;}
#gallery #main a:hover {color:#f09;}
#tools .tool a:hover {color:#d06422;}
#features .tool a:hover {color:#9c0;}

/* contact link ************************************************************* */
/* css verified - 2013 02 07 ................................................ */
.lnkContact {position:absolute; right:0; bottom:1.5em;}
.lnkContact a {color:#222; text-shadow:1px 1px rgba(224, 224, 224, 0.25); font-size:93%; font-weight:700;}
.lnkContact a:hover {text-decoration:underline;}
@media all and (min-width:755px) {
  .lnkContact a {color:#ececec;}
}


/* archive link ************************************************************* */
.lnkArchive {height:2.75em; line-height:2.75em; box-shadow:0 0 8px rgba(0,0,0,0.5); z-index:2;}
.lnkArchive a {display:block; text-align:center; height:100%; font-size:123.1%; text-shadow:1px 1px rgba(0,0,0,0.75); font-weight:700;}
/* sections */
#blog .lnkArchive a {background:rgba(0,224,224,0.4);}
#blog .lnkArchive a:hover {background:rgba(0,224,224,0.25);}
#features .lnkArchive a {background:rgba(192,224,0,0.4);}
#features .lnkArchive a:hover {background:rgba(192,224,0,0.25);}

/* rss link ................................................................. */
.lnkRSS a {font-size:116%; .hideText; .span;}
.lnkRSS a:before {height:16px; width:16px; left:50%; top:50%; margin-left:-7px; margin-top:-9px;}
/*sections */
#blog .lnkRSS a {background:rgba(0,224,224,0.4);}
#blog .lnkRSS a:hover {background:rgba(0,224,224,0.25);}
#blog .lnkRSS a:before {.spriteBefore(0,1);}
#features .lnkRSS a {background:rgba(192,224,0,0.4);}
#features .lnkRSS a:hover {background:rgba(192,224,0,0.25);}
#features .lnkRSS a:before {.spriteBefore(0,2);}

/* advance & retuns links ................................................... */
.more, .next, .back, .prev {font-weight:700;}
.more a, .next a, .back a, .prev a {.color;}
.more span, .next span, .back span, .prev span {color:#aaa;}
.more > *:after, .next > *:after {content:">"; font-family: "MS Sans Serif", sans-serif;}
.back > *:before, .prev > *:before {content:"<"; font-family:"MS Sans Serif", sans-serif; margin-right:0.25em;}

.lnkMore > *:after {content:">"; font-family: "MS Sans Serif", sans-serif;}

/* submit button ............................................................ */
input[type="submit"] {background:#ccc; border:none; font-weight:700; padding:0.1em 0.25em; font-size:100%; color:#000;}
/* sections */
#blog input[type="submit"] {background:#0dd;}
#gallery input[type="submit"] {background:#f09;}

/* start top 100 ************************************************************ */
/* css verified - 2013 02 08 ................................................ */
.ctaMovies a {text-align:center; padding:0 0.5em; height:144px; position:relative; display:block;}
.ctaMovies a:after {content:" "; .span; background:url(img/100-2012.jpg) left top no-repeat; z-index:1;}
.ctaMovies a span {margin-top:45px; position:relative; z-index:2; display:inline-block; padding:0.85em 0.5em; font-size:146.5%; .gradient(180deg, rgba(42,42,42,0.85), rgba(42,42,42,0.95)); border-radius:12px; border:1px solid #666; box-shadow:0 0 6px #101010; color:#ddd; .color;}
.ctaMovies a span:after {content:">>"; font-size:85%; margin-left:0.25em; font-family:Courier; font-weight:700; .color;}
.ctaMovies a:hover span {color:#1af;}


/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* 04. navigation                                                             */

/* main navigation ********************************************************** */
/* css verified - 2013 02 07 ................................................ */
nav.main h1 {.hidden;}
nav.main li {padding:0.35em 1em; position:relative;}
nav.main li:before {.gradient(90deg, #000, #999 15%, #000); height:1px; left:5px; right:0; position:absolute; content:""; bottom:0; z-index:2;}
nav.main li .page {color:#666; outline:none; display:block; height:30px; position:relative; padding:0.3em 0 0 45px; line-height:1.5em; font-size:116%;}
nav.main li .page:before {.spriteBefore(5,4); left:0; top:1px; bottom:0; right:0; height:30px; width:32px; overflow:hidden;}
nav.main li .page:after {.spriteBefore(5,3); left:0; top:1px; bottom:0; right:0; .opacity; height:30px; width:32px; overflow:hidden;}
nav.main li a:hover:after, nav.main li a:focus:after {opacity:0;}
nav.main li.blog a:hover, nav.main li.blog a:focus, #blog nav.main li.blog .page {color:#0dd;}
nav.main li.gallery .page:before {.spritePos(2,1);}
nav.main li.gallery .page:after {.spritePos(2,0);}
nav.main li.gallery a:hover, nav.main li.gallery a:focus, #gallery nav.main li.gallery .page {color:#f09;}
nav.main li.tools .page:before {.spritePos(3,1);}
nav.main li.tools .page:after {.spritePos(3,0);}
nav.main li.tools a:hover, nav.main li.tools a:focus, #tools nav.main li.tools .page {color:#f06422;}
nav.main li.movies .page:before {.spritePos(3,2);}
nav.main li.movies .page:after {.spritePos(2,2);}
nav.main li.movies a:hover, nav.main li.movies a:focus, #movies nav.main li.movies .page {color:#09f;}
nav.main li.features .page:before {.spritePos(6,4);}
nav.main li.features .page:after {.spritePos(6,3);}
nav.main li.features a:hover, nav.main li.features a:focus, #features nav.main li.features .page {color:#9c0;}
/* site sections */
#gallery nav.main li.gallery .page:after, #tools nav.main li.tools .page:after, #movies nav.main li.movies .page:after,
#blog nav.main li.blog .page:after, #features nav.main li.features .page:after {opacity:0;}
@media all and (max-width:754px) {
	nav.main {margin:0.75em; padding-top:0.25em; border-radius:6px; background:#000;}
	nav.main li:last-child:before {background:none;}
}
@media all and (min-width:755px) {
  nav.main ul:before {left:0.5em; .gradient(90deg, #000, #999 15%, #000); height:1px; right:0; position:absolute; content:""; top:0; z-index:2;}
	nav.main li {padding:0.75em; padding-left:1.5em;}
}


/* skip navigation ********************************************************** */
/* css verified - 2013 02 07 ................................................ */
.skip .content {.hidden;}
.skip .context a {position:fixed; z-index:30; .hideText;}
.skip .context a:after {height:47px; width:15px; .spriteBefore(3,3); left:2px; top:50%; margin-top:-24px;}
@media all and (max-width:754px) {
  .skip .site a {width:30px; height:30px; position:absolute; right:8px; top:8px; .sprite(6,0); z-index:20; .hideText;}
  .skip .site a:hover {.spritePos(6,1);}
	body.site .skip .site a {.spritePos(6,2);}
	.skip .context a {right:0; left:0; height:25px; top:100%; margin-top:-25px; .gradient(0deg, #ddd, #999); .trans(top,0.5s,ease-out);}
	.skip .context a:after {.rotate(90deg); left:50%;}
	body.footer .skip .context a {top:25px;}
	/* site sections */
	#blog .skip .context a {.gradient(180deg, #0dd, #077);}
	#gallery .skip .context a {.gradient(180deg, #f09, #910057);}
	#movies .skip .context a {.gradient(180deg, #1af, #0a6799);}
	#tools .skip .context a {.gradient(180deg, #d06422, #7f3c15);}
	#features .skip .context a {.gradient(180deg, #9c0, #5f7f00);}
}
@media all and (min-width:755px) {
  .skip .site {.hidden;}
	.skip .context a {left:230px; top:0; bottom:0; width:20px; .gradient(90deg, rgba(255,255,255,0.9), rgba(255,255,255,0.3));}
	body.footer .skip .context a {left:@widthFooter + @widthWelcome;}
	/* site sections */
	#blog .skip .context a {.gradient(-90deg, #0dd, #077);}
	#gallery .skip .context a {.gradient(-90deg, #f09, #910057);}
	#movies .skip .context a {.gradient(-90deg, #1af, #0a6799);}
	#tools .skip .context a {.gradient(-90deg, #d06422, #7f3c15);}
	#features .skip .context a {.gradient(-90deg, #9c0, #5f7f00);}
}
@media all and (min-width:1200px) {
  .skip .context a {.hidden;}
}


/* credits ****************************************************************** */
/* css verified - 2013 02 07 ................................................ */
nav.credits {margin:1em 0;}
nav.credits h1 {.hidden;}
nav.credits li {margin:0.5em 0; color:#444; text-shadow:1px 1px rgba(224, 224, 224, 0.25); font-weight:700;}
nav.credits li a {color:#222;}
nav.credits li a:hover {text-decoration:underline;}
@media all and (min-width:755px) {
	nav.credits li {color:#888;}
	nav.credits li a {color:#ececec;}
}


/* social navigation ******************************************************** */
/* css verified - 2013 02 07 ................................................ */
nav.social h1 {.hidden;}
nav.social li {display:inline-block;}
nav.social li a {height:32px; width:32px; .hideText; display:block; .sprite(5,0);}
nav.social li.twitter a {.spritePos(5,1);}
nav.social li.google a {.spritePos(5,2);}


/* share actions ************************************************************ */
.share h1 {.hidden;}
.share ul li {float:left;}
.share ul li a {display:block; width:32px; height:32px; .sprite(0,0); outline:none; .hideText; position:relative;}
.share ul li.facebook a {.spritePos(1,0);}
/* section specific */
#blog .share ul li a:hover:before {position:absolute; right:1px; bottom:1px; top:2px; left:1px; background:rgba(0,244,244,0.15); content:""; border-radius:3px;}

/* paging ******************************************************************* */
.paging {text-align:center; padding:0.75em 0; padding-top:2em; overflow:hidden; position:relative; }
.paging * {display:inline-block;}
.paging .prev {margin-right:0.5em; position:absolute; left:0; top:0.75em;}
.paging .next {margin-left:0.5em; position:absolute; right:0; top:0.75em;}
.paging span.prev, .paging span.next {color:#aaa;}
.paging ul li .page {text-align:center; font-weight:700; border:1px solid #aaa; height:2em; width:2em; line-height:2em; .gradient(-90deg, rgba(64,64,64,0.15),rgba(64,64,64,0.75));}
.paging ul li .page:hover, .paging ul li .page:focus {.gradient(-90deg, rgba(64,64,64,0.3),rgba(64,64,64,0.9));}
.paging ul li.active .page {.gradient(-90deg, rgba(64,64,64,0.4),rgba(64,64,64,1));}
/* site section */
#blog .paging ul li.active .page {color:#0dd;}
#features .paging ul li.active .page {color:#9c0;}
@media all and (min-width:480px) {
		.paging {padding-top:0.75em;}
    .paging .prev, .paging .next {position:static;}
}


/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* 05. simple content                                                         */

/* paragraph ................................................................ */
p {line-height:1.5em; color:#e8e8e8;}
p em {font-weight:700; color:#fff;}

/* textblock ................................................................ */
.textblock>* {margin:1em 0;}
.textblock span.publishIntro {font-style:italic;}
.textblock .img {margin:1.5em 0em;}
.textblock h2.heading, .textblock h1 {margin-top:1.5em; margin-bottom:-0.5em;}
.textblock a {text-decoration:underline;}
.textblock li {line-height:1.35em; color:#e8e8e8; padding-left:16px; position:relative;}
.textblock > ul > li:before {content:""; position:absolute; left:4px; top:7px; height:4px; width:4px; overflow:hidden; .sprite(0,3);}
.textblock ol li {background:none;}
.textblock ol li .nr {font-weight:700; margin-left:-16px;}
.textblock p.question{font-weight:700; font-style:italic; color:#fff;}
/* more link in article */
.article .textblock .more a, .article .textblock a.more {text-decoration:none;}

/* image .................................................................... */
.img img {display:block; max-height:100%; width:100%; box-shadow:0 0 3px rgba(32,32,32,0.75);}
.img .caption {text-align:right; font-style:italic; margin:0.5em 0em; font-size:93%;}


/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* 06. components                                                             */

/* site label *************************************************************** */
.siteLabel {width:45px; margin:0.25em 1em; overflow:hidden;}
.siteLabel a {background:url(img/logo-standard.png) no-repeat; background-size:100%; width:120px; display:block;}
.siteLabel a img {.opacity(0.25s); width:100%;}
.siteLabel a:hover img, .siteLabel a:focus img {opacity:0;}
.siteLabel .welcome {.hidden;}
/* site sections */
#blog .siteLabel a {background-image:url(img/logo-onderhond.png);}
#gallery .siteLabel a {background-image:url(img/logo-gallery.png);}
#features .siteLabel a {background-image:url(img/logo-features.png);}
@media all and (min-width:755px) {
  .siteLabel {margin:10px; position:absolute; z-index:3; width:auto;}
	.siteLabel a {width:175px;}
}


/* article notice *********************************************************** */
/* css verified - 2013 02 11 ................................................ */
.notice {padding:0.5em 0; border:1px dotted #e59c1c; border-left-width:0; border-right-width:0;}
.notice p {color:#e59c1c;}


/* quote ******************************************************************** */
/* css verified - 2013 02 11 ................................................ */
.quote {margin:1.5em 0; padding:0.5em 0; .gradient(-45deg, rgba(32,32,32,0.65), rgba(64,64,64,0.25));}
.quote blockquote {margin:0 0.75em; font-style:italic; font-weight:700; text-shadow:1px 1px #000;}
.quote .source {text-align:right; font-size:85%; margin:0.5em; margin-bottom:0;}
.quote .source a {color:#ccc;}


/* code block ............................................................... */
code.block {margin:1.5em 0; padding:0.5em 0; display:block; .gradient(-45deg, rgba(32,32,32,0.65), rgba(64,64,64,0.25));}
code.block span {display:block; margin:0 0.75em; line-height:1.5em; text-shadow:1px 1px #000;}
code.block span.javascript {display:inline; color:#09f; margin:0;}
/* sections */
#blog code.block .comment {color:#0dd;}
#features code.block .comment {color:#9c0;}

/* data sheet (show) ........................................................ */
.dataSheet.show .spec {margin:0.75em 0em;}
.dataSheet.show .spec .label {float:left; color:#eee; width:7.5em; line-height:1em;}
.dataSheet.show .spec .value {text-align:right; margin-left:7.5em; display:block;}
.dataSheet.show .spec .value a {color:#fff; font-weight:700;}
.dataSheet.show .sub {margin-top:0.5em; padding-top:0.5em;}
.dataSheet.show .sub .spec {margin-left:1em}
.dataSheet.show .sub .spec.last {padding-bottom:0;}

/* content focus ************************************************************ */
/* css verified - 2013 02 07 ................................................ */
#main > .focus {margin:2.5em auto; position:relative;}
#main > .focus > header h1 {margin:1em 0;}
#main > .focus > header h1 span {font-size:146.5%; text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.35); color:#222;}
#main > .focus > footer {position:absolute; right:0; top:0.35em;}
#main > .focus > footer .lnkMore a {color:#ccc; text-shadow:1px 1px rgba(32, 32, 32, 0.75); font-weight:700;}
#main > .focus > footer .lnkMore a:hover {text-decoration:underline;}
/* component variations */
#main > .focus:first-child {margin-top:0;}

/* archive list ............................................................. */
body.archive .list.articles > header, body.archive .list.articles > footer {margin:1em 0; border:1px solid #0dd; border-left-width:0; border-right-width:0;}
body.archive .list.articles > header nav.paging {margin-top:0;}
/* archive */
.archive .article.vsView a > .main {.hidden;}


/* article detail ........................................................... */
#main > .article {margin-top:1em;}
#main > .article > header {margin-bottom:0.75em;}
#main > .article > header * {text-shadow:1px 1px 0 rgba(32,32,32,0.75);}
#main > .article > header h1 {font-size:197%; margin-right:67px;}
#main > .article > header .meta * {display:inline;}
#main > .article > header .meta .spec:first-child:after {content:" - ";}
#main > .article > header .meta .spec .label {.hidden}
#main > .article > header .meta .spec .value {font-size:108%; font-weight:700; color:#ccc;}
#main > .article > .main .dataSheet {overflow:hidden; padding:0 1em; .gradient(-45deg, rgba(32,32,32,0.75), rgba(64,64,64,0.15)); margin:1em 0; position:relative; min-height:6em;}
#main > .article > .main .dataSheet .spec {overflow:hidden;}
#main > .article > .main .dataSheet .spec * {text-shadow:1px 1px 0 rgba(32,32,32,0.75); color:#aaa; line-height:1.2em; display:inline; float:none;}
#main > .article > .main .dataSheet .value {text-align:left; margin-left:0;}
#main > .article > .main .dataSheet .value a:hover {color:#fff; .color;}
#main > .article > .main .dataSheet .trailer .label {.hidden;}
#main > .article > .main .dataSheet .rating {width:230px; margin:0.25em 0;}
#main > .article > .main .dataSheet .rating .label {.hidden}
#main > .article > .main .dataSheet .rating .value {font-size:450%; color:rgba(128,128,128,0.5); text-shadow:1px 1px 0 rgba(64,64,64,0.5); font-weight:700; margin:0; line-height:1.1em;}
#main > .article > .main .dataSheet .top {margin-top:-0.5em;}
#main > .article > .main .dataSheet .top .label {.hidden}
#main > .article > .main .dataSheet .top .value .count {color:#0dd;}
#main > .article > .main .textblock h1, #blog #main > .article > .main .textblock .heading {text-shadow:1px 1px 0 rgba(32,32,32,0.5);}
#main > .article > .main .textblock h1 span, #blog #main > .article > .main .textblock .heading span {font-size:131%;}
#main > .article > .main .textblock .textblock h1 {color:#0dd;}
#main > .article > .main .textblock .textblock .textblock h1, #blog #main > article .textblock h3 {color:#0bb;}
#main > .article > footer {position:absolute; right:7px; top:47px;}
/* unpublished */
#main > .article.unpublished {.gradient(135deg, rgba(128,0,0,0.75), rgba(128,128,128,0.5));}
@media all and (min-width:560px) {
    #main > .article > .main .dataSheet .spec {margin-right:240px;}
    #main > .article > .main .dataSheet .rating {float:right; margin:0;}
		#main > .article > .main .dataSheet .top {margin-top:0;}
		#main > .article > .main .dataSheet .top .value {position:absolute; right:3.25em; bottom:0.75em;}
}
@media all and (max-width:754px) {
		#main > .article > .main .dataSheet .rating .value {font-size:400%;}
		#main > .article > header h1 {font-size:146.5%;}
		#main > .article > header h1 > span {text-align:center; overflow:hidden; text-overflow:ellipsis; display:block; position:absolute; left:70px; right:45px; top:14px; white-space:nowrap;}
		#main > .article > header h1 span.sep, #main > .article > header h1 span.secondary {.hidden;}
}
@media all and (min-width:755px) {
		#main > .article {position:relative;}
		#main > .article > header {margin-bottom:1.5em;}
		#main > .article > header .meta {border-top:1px solid #999; margin-top:0.25em; padding-top:0.5em;}
		#main > .article > footer {right:-1px; top:-3px;}
}


/* page footer elements ***************************************************** */
#footer > .list {position:absolute; top:0; bottom:0; left:0; right:0; z-index:1; -webkit-overflow-scrolling:touch; overflow-y:scroll;}
#footer .lnkRSS {position:absolute; bottom:0; left:0; height:2.75em; width:2.75em; z-index:10;}
#footer .lnkArchive {position:absolute; bottom:0; left:2.75em; right:0; z-index:2;}
/* blog */
#blog #footer .list, #features #footer .list {top:3.25em; bottom:2.75em;}
#features #footer .list {bottom:0;}

/* article meta ............................................................. */
.articleMeta {padding:0.75em; margin:1em 0; position:relative; overflow:hidden; background:rgba(0,224,224, 0.1);}
.articleMeta h1 span {color:#0dd; font-size:123.1%;}
.articleMeta .focus .dataSheet .spec .value {text-align:left;}
@media all and (min-width:520px) {
	.articleMeta .focus {width:45%; float:left; margin-right:4.9%;}
	.articleMeta .focus:nth-child(2n) {margin-right:0;}
	.articleMeta .focus:nth-child(2n+1) {clear:left;}
}

/* feature article detail *************************************************** */
#features #main > .intro {padding-top:140px; position:relative;}
#features #main > .intro h1 {background:rgba(192,224,0,0.5); padding:0.5em; margin:0; text-align:center; position:absolute; left:0; right:0; top:0; z-index:2}
#features #main > .intro h1 span {color:#fff; font-size:161.6%; text-shadow:2px 2px 1px rgba(32,32,32,0.5);}
#features #main > .intro p {font-style:italic; margin-top:1em;}
#features #main > .intro .img {position:absolute; top:0; left:0; right:0; z-index:1; height:140px; overflow:hidden; margin:0;}
#features #main > .intro .img img {width:auto; position:relative; top:-20px; max-height:none;}
#features .article.detail {margin:4em 0; position:relative;}
#features .article.detail:before {.gradient(90deg, rgba(192,224,0,0), rgba(192,224,0,1) 15%, rgba(192,224,0,0)); height:1px; left:-10px; right:0; bottom:-2em; position:absolute; content:""; z-index:2;}
#features .article.detail:first-child {margin-top:3em;}
#features .article.detail:last-child:before {height:0;}
#features .article.detail.highlight:after {position:absolute; left:-20px; content:""; width:10px; background:#fff; top:0; bottom:-2em; .gradient(90deg, rgba(255,255,255,0.15), rgba(255,255,255,0.5));}
#features .article.detail > header h1 {padding-right:6.75em;}
#features .article.detail > aside {.hidden;}
#features .article.detail > .main .img {margin:1em 0;}
#features .article.detail > .main .img img {float:left; width:auto; margin:0 1em 0.5em 0; position:relative; top:0.5em;}
#features .article.detail > footer .meta {overflow:hidden; color:#bbb; text-shadow:1px 1px rgba(32,32,32,0.75); position:absolute; right:0; top:0.25em;}
#features .article.detail > footer .meta .label {.hidden;}
#features .article.detail > footer .meta .spec {float:left;}
#features .article.detail > footer .meta .spec.comments {float:right;}
#features .features > footer {border:1px solid #9c0; border-left-width:0; border-right-width:0;}
@media all and (max-width:520px) {
	#features #main > .intro {padding-top:100px;}
	#features #main > .intro h1 span {font-size:131%;}
	#features #main > .intro .img {height:100px;}
	#features #main > .intro .img img {top:-40px;}
}

/* filter nav ............................................................... */
.list > header {overflow:hidden; position:relative;}

/* music list ............................................................... */
.textblock .musicList li {overflow:hidden; padding:0; margin-bottom:1em; min-height:7.5em;}
.textblock .musicList li .heading {border-bottom:1px dotted #ccc; padding-bottom:0.25em; margin-bottom:0.5em; padding-right:8.75em;}
.textblock .musicList li .img {float:left; border:1px solid #fff; margin:0.25em 0.75em 0.5em 0;}
.textblock .musicList li .img img {margin:4px; width:50px;}
.textblock .musicList li .meta {font-size:95%; position:absolute; top:0; right:0;}
.textblock .musicList li .meta a {font-weight:700; text-decoration:none;}

/* slide .................................................................... */
.textblock .slide {padding-bottom:0.5em; position:relative;}
.textblock .slide .heading {margin-bottom:0.5em;}
.textblock .slide .slideNav {position:absolute; right:0; top:0; cursor:pointer;}
.textblock .slide .slideNav:hover {text-decoration:underline;}
.textblock .slide .slideContent {overflow:visible; overflow-x:auto; padding:0.5em;}
.textblock .slide .slideContent {box-shadow:0 3px 5px rgba(32,32,32,0.5), inset 0 -2px 5px rgba(160, 160, 160, 0.2);}
.textblock .slide.closed .slideContent {position:relative; height:70px; overflow-x:auto; overflow-y:hidden;}
/* table */
.textblock .slide .slideContent table {width:100%; border-collapse:collapse;}
.textblock .slide .slideContent table tr th {padding:0.35em 0.5em; border:1px solid rgba(32,32,32, 0.25); color:#ccc;}
.textblock .slide .slideContent table tr .sep {border-right-width:3px;}
.textblock .slide .slideContent table tr td {padding:0.35em 0.5em; text-align:left; border:1px solid rgba(32,32,32, 0.25); color:#e8e8e8; text-align:center;}
.textblock .slide .slideContent table tr td+td {text-align:right;}
.textblock .slide .slideContent table tr td.positive {background:#4C6F4C;}
.textblock .slide .slideContent table tr td.negative {background:#6F4545;}
.textblock .slide .slideContent table tfoot th, .slide .slideContent table tfoot td {font-weight:700;}
/* blog */
#blog .textblock .slide .slideContent table {border:1px solid rgba(32,32,32, 0.25);}
/* sections */
#movies .textblock p {text-shadow:1px 1px rgba(32, 32, 32, 0.15);  color: #fff;}
#blog .slideNav {color:#0dd;}

/* translations ............................................................. */
.translations {padding:0.75em 1em; margin:1em 0; .gradient(-45deg, rgba(32, 32, 32, 0.75), rgba(64, 64, 64, 0.15));}
.translations * {display:inline; color:#bbb;}
.translations p {padding-left:22px; position:relative;}
.translations p:before {left:0; top:0; .spriteBefore(2,3); height:32px; width:32px;}
.translations a {text-decoration:underline;}

/* images ................................................................... */
.images {text-align:justify;}
.images.full {text-align:left;}
.images .image.vView {display:inline-block; margin-bottom:0.65em;}
.images > .main:after {width:100%; display:inline-block; content:"";}
/* aside */
.images.thumbs {margin:0;}
.images.thumbs > header {.hidden;}

/* gallery detail list ...................................................... */
article.gallery.detail > header h1 span {font-size:197%; color:#f09; text-shadow: 1px 1px 1px #333;}
article.gallery.detail > .main {position:relative;}
article.gallery.detail .images {overflow:visible; margin:1.25em 0;}
article.gallery.detail .images.thumbs {position:absolute; left:0; right:0; top:2em; background:#222; padding:0 1em; z-index:5;}
article.gallery.detail .images.thumbs > .main {white-space:nowrap; overflow:hidden; overflow-x:scroll; -webkit-overflow-scrolling:touch; padding:0.65em 0; padding-bottom:0;}
article.gallery.detail .images.thumbs > .main .wrap {margin-bottom:-1em; position:relative; .trans(left, 0.25s, ease-out); left:0;}
article.gallery.detail .images.thumbs .pager div a {position:absolute; top:10px; display:block; .hideText; width:26px; outline:none; z-index:10; height:40px;}
article.gallery.detail .images.thumbs .pager div a:after {content:">"; font-family:"Consolas"; text-shadow:-2px 2px 6px rgba(0,0,0,0.75); font-size:400%; font-weight:700; color:#999; opacity:0.5; .span; z-index:1; letter-spacing:normal; text-indent:0;}
article.gallery.detail .images.thumbs .pager div a:hover:after, article.gallery.detail .images.thumbs .pager div a:focus:after {color:#ccc;}
article.gallery.detail .images.thumbs .pager .lnkPrev a {left:8px}
article.gallery.detail .images.thumbs .pager .lnkNext a {right:8px;}
article.gallery.detail .images.thumbs .pager div.lnkPrev a:after {content:"<"; text-shadow:2px 2px 6px rgba(0,0,0,0.75);}
article.gallery.detail .images.full {position:relative;}
article.gallery.detail .images.full .pager {.hidden;}
/* no touch */
.noTouch article.gallery.detail .images.thumbs {padding:0 40px;}
.noTouch article.gallery.detail .images.thumbs > .main {overflow:hidden;}
@media all and (max-width:754px) {
	article.gallery.detail > header h1 span {text-align:center; font-size:146.5%; overflow:hidden; text-overflow:ellipsis; display:block; position:absolute; left:70px; right:45px; top:14px; white-space:nowrap;}
}
@media all and (min-width:940px) {
	article.gallery.detail .images.full .pager {position:static;}
	article.gallery.detail .images.full .pager div a {position:absolute; top:180px; width:37px; height:40px; padding-top:0; .hideText;}
	article.gallery.detail .images.full .pager div a:after {content:">"; font-family:"Consolas"; text-shadow:-2px 2px 6px rgba(0,0,0,0.75); font-size:600%; font-weight:700; color:#999; opacity:0.5; .span; z-index:1; letter-spacing:normal; text-indent:0;}
	article.gallery.detail .images.full .pager div a:hover:after, article.gallery.detail .images.full .pager div a:focus:after {color:#ccc;}
	article.gallery.detail .images.full .pager div.lnkPrev a:after {content:"<"; text-shadow:2px 2px 6px rgba(0,0,0,0.75);}
	article.gallery.detail .images.full .pager .lnkPrev a {left:-42px; right:auto; bottom:auto;}
	article.gallery.detail .images.full .pager .lnkNext a {right:-37px; left:auto; bottom:auto;}
}

/* gallery image detail ..................................................... */
article.image.dView {background:rgba(64,64,64,0.5); overflow:hidden; border:none; margin:0; .hidden;}
article.image.dView.current {position:static; height:auto;}
article.image.dView:after {border:none; background:none;}
article.image.dView > header {position:relative; margin:1em 0.75em;}
article.image.dView > header h1 {margin-right:8em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
article.image.dView > header h1 span {font-size:131.1%;}
article.image.dView > header .meta {position:absolute; right:0; top:0.25em;}
article.image.dView > header .meta .label {.hidden;}
article.image.dView > header .meta .value {color:#ddd; font-style:italic;}
article.image.dView > .main .image {background:#333; padding:1.15em 1em; margin-top:90px; text-align:center;}
article.image.dView > .main .image img {width:100%;}
article.image.dView.type2 > .main {margin-top:90px;}
article.image.dView.type2 > .main .image img {width:100%; max-width:322px;}
@media all and (min-width:550px) {
    article.image.dView > .main .textblock {margin:1em;}
}
@media all and (min-width:992px) {
    article.image.dView.type2 > .main .image {float:left; margin-top:0;}
    article.image.dView.type2 > .main .textblock {margin-left:360px; margin-right:1em; padding-top:0.25em;}
}

/* galleries ................................................................ */
.galleries .cluster {overflow:hidden;}
.galleries .cluster > header {background:rgba(255,0,192,0.3); padding:0.75em 1em; text-align:center;}
.galleries .cluster > header h1 span {font-size:116%;}
.galleries > .main {overflow:hidden;}
.galleries > .main .gallery.list a {display:block; background:#f09; padding-bottom:2px; outline:none; position:relative; height:105px; overflow:hidden;}
.galleries > .main .gallery.list a img {opacity:0.9; .opacity; display:block; width:100%;}
.galleries > .main .gallery.list a:hover img, .galleries > .main .gallery.list a:focus img {opacity:0.7;}
.galleries > .main .gallery.list a.active img {opacity:0.5;}
.galleries > .main .gallery.list header h1 {text-transform:uppercase; text-align:center; padding:0.35em 0.5em; position:absolute; background:rgba(32,32,32,0.95); left:0; right:0; top:0; z-index:5}
.galleries > .main .gallery.list .image {margin-top:-20px;}
@media all and (min-width:545px) and (max-width:754px) {
	.galleries > .main .gallery.list {width:50%; float:left;}
}

/* comment list ************************************************************* */
.comments > header {overflow:visible;}
.comments > header > h1 {margin:1em 0; margin-top:2em;}
.comments > header > h1 span {font-size:131%;}

/* comment ****************************************************************** */
.comment {margin:2em 0; position:relative;}
.comment > header {position:relative;}
.comment > header:before {.gradient(90deg, rgba(224,224,224,0), rgba(224,224,224,1) 15%, rgba(224,224,224,0)); height:1px; left:-15px; right:-20px; bottom:-6px; position:absolute; content:""; z-index:2;}
.comment > header h1 span {font-size:123.1%; text-transform:none;}
.comment > header .meta {position:absolute; right:0; top:0;}
.comment > header .meta * {display:inline;}
.comment > header .meta .label {.hidden}
.comment > header .meta .value {color:#aaa;}
.comment > header .meta .value a {font-weight:700;}
.comment > header .meta .spec:first-child:after {content:" |"; margin:0em 0.15em; color:#aaa;}
.comment > header .delete a {position:absolute; right:0; top:-1.25em; .sprite(1,1); text-indent:-999em; overflow:hidden; display:block; height:14px; width:14px;}
.comment > header .delete a:hover {background-color:#900;}
.comment > .main .textblock > * {margin:0.75em 2.5em;}
.comment > .main .textblock p, .comment > .main .textblock ul, .comment > .main .textblock ol {margin:0.75em 0; display:block;}
.comment > .main .textblock blockquote p, .comment > .main .textblock code {display:block; border-left:3px solid #aaa; color:#ddd; padding:0 0.5em; margin:0.5em 1em; font-weight:700; font-style:italic;}
/* marked */
.comment.marked > header:before {.gradient(90deg, rgba(239,151,0,0), rgba(239,151,0,1) 15%, rgba(239,151,0,0));}
.comment.marked > .main .confirm {position:relative; padding:0.5em 0em; padding-top:0.75em; text-align:center;}
.comment.marked > .main .confirm:before {.gradient(90deg, rgba(239,151,0,0), rgba(239,151,0,1) 15%, rgba(239,151,0,0)); height:1px; left:-15px; right:-20px; bottom:0; position:absolute; content:""; z-index:2;}
.comment.marked > .main .confirm a {color:#EF9700;}
.comment.marked > .main .confirm a:hover {text-decoration:underline;}
/* sections */
#blog .comment.owned {background:rgba(0,224,224,0.1); padding:0.5em 0.75em;}
#blog .comment.owned > header:before {.gradient(90deg, rgba(0,224,224,0), rgba(0,224,224,1) 15%, rgba(0,224,224,0));}
#gallery .comment.owned {background:rgba(255,0,192,0.1); padding:0.5em 0.75em;}
#gallery .comment.owned > header:before {.gradient(90deg, rgba(255,0,192,0), rgba(255,0,192,1) 15%, rgba(255,0,192,0));}

/* context block ............................................................ */
#footer .focus > * {text-shadow:1px 1px 1px #333;}
#footer .focus a {color:#d2d2d2; text-decoration:none; font-weight:700;}
#footer .focus a:hover {color:#fff;}
#footer .focus > header h1 {border-bottom:1px dotted #b8b8b8; line-height:1.5em; margin-bottom:0.75em;}
#footer .focus > header h1 span {font-size:131%; text-transform:lowercase; font-weight:400; color:#b8b8b8;}
#footer .focus .main .textblock p, #footer .focus .textblock ul {margin:0.75em 0; line-height:1.35em; color:#b8b8b8;}
#footer .focus .main .textblock li {color:#b8b8b8;}
#footer .focus .main .graphic {border:none; margin:0;}
#footer .focus .main .dataSheet.show .spec .label {color:#b8b8b8;}
#footer .focus .main .dataSheet.show .spec .value {color:#c8c8c8;}
#page > ooter .focus footer .more { margin:0.35em 0;}
/* site sections */
#blog #footer .focus a:hover, #movies #footer .focus .more a:hover, #gallery #footer .focus a:hover {text-shadow:none;}
#blog #footer .focus .main .textblock li:hover:after {background-position:-4px top;}
#blog #footer .focus a:hover {color:#0dd;}

/* focus browser upgrade .................................................... */
.browsers li {margin:0.15em 0em; margin-left:-2px; line-height:1.45em;}
.browsers li:before {display:inline-block; content:""; height:16px; width:20px; position:relative; .sprite(0,4); top:5px;}
.browsers li.firefox:before {.spritePos(1,4);}
.browsers li.safari:before {.spritePos(2,4);}
.browsers li.opera:before {left:2px; .spritePos(4,4);}
.browsers li a {padding:0; font-weight:300;}

/* filter block ............................................................. */
#footer .filters {position:absolute; top:3.25em; bottom:0; left:0; right:0; overflow-y:auto; margin:0;}
#footer .filter {margin:1em;}
#footer .filter > * {text-shadow:1px 1px 1px #333;}
#footer .filter a {color:#eee;}
#footer .filter a:hover {color:#fff; text-shadow:0 0 2px rgba(255,255,255,0.5);}
#footer .filter header h1 {border-bottom:1px dotted #eee; line-height:1.5em;}
#footer .filter header h1 span {font-size:131%; text-transform:lowercase; font-weight:400;}
#footer .filter header h1.active span {color:#0dd;}
#footer .filter .main ul.primary li {margin:0.75em 0;}
#footer .filter .main ul.primary li .page {display:block; font-weight:700;}
#footer .filter .main ul.primary li .page .count {float:right; font-weight:400;}
#footer .filter .main ul.sub {background:rgba(255,255,255,0.05); clear:both; padding:0.15em 0.5em; margin:0.5em -0.5em;}
#footer .filter .main ul.sub li {padding-left:0.5em; margin:0.5em 0;}
#footer .filter .main ul.sub li {padding-left:0.5em; margin:0.5em 0;}
/* sections */
#blog #footer .filter .main ul.primary li.active > .page {color:#0dd;}


/* filter results *********************************************************** */
/* css verified - 2013 02 09 ................................................ */
.filterResults {border-bottom:1px dotted #888;}
.filterResults > * {margin:1em 0;}
.filterResults header h1 span {font-size:116%;}
.filterResults .main {overflow:hidden; margin-bottom:0;}
.filterResults .main .spec {float:left; background:#505050; box-shadow:2px 2px 6px rgba(0,0,0,0.25); padding:0.75em 1em; padding-right:2.25em; margin:0 1em 1em 0; position:relative; font-weight:700;}
.filterResults .main .spec .label {display:inline; color:#ccc;}
.filterResults .main .spec .value {display:inline;}
.filterResults .main .spec .delete a {.span; overflow:hidden; .hideText; font-size:0;}
.filterResults .main .spec .delete a:hover {background:rgba(192,0,0,0.5);}
.filterResults .main .spec .delete a:hover:before {right:6px; top:11px; height:12px; width:12px; .spriteBefore(1,1);}


/* search block ************************************************************* */
/* css verified - 2013 02 09 ................................................ */
#footer .search {overflow:hidden; box-shadow:0 0 3px rgba(0,0,0,0.5); background:rgba(192,192,192,0.4);}
#footer .search .inputWrap, #footer .search .submitWrap {border:1px solid #ccc; padding:0.25em 0.5em;}
#footer .search .inputWrap {margin:0.7em 4.5em 0.7em 1em; background:rgba(32,32,32,0.5);}
#footer .search .inputWrap label {.hidden;}
#footer .search .inputWrap input {width:100%;}
#footer .search .submitWrap {position:absolute; right:1em; top:0.7em; background:rgba(224,224,224,0.75);}
#footer .search .submitWrap:before {.spriteBefore(1,2); height:32px; width:32px; left:50%; top:50%; margin-top:-7px; margin-left:-7px;}
#footer .search .submitWrap input {opacity:0; width:1.25em;}
#footer .search input {height:1.25em; line-height:1.25em; font-size:100%; border:0; padding:0; text-transform:lowercase; background:none; color:#ccc;}
/* contextual variations */
#blog #footer .search {background:rgba(0,224,224,0.4);}
#blog #footer .search .inputWrap {border-color:#0dd;}
#blog #footer .search .submitWrap {border-color:#0dd; background-color:rgba(0,224,224,0.75);}
#features #footer .search {background:rgba(192,224,0,0.4);}
#features #footer .search .inputWrap {border-color:#9c0;}
#features #footer .search .submitWrap {border-color:#9c0; background-color:rgba(192,224,0,0.75);}


/* movie shortlist .......................................................... */
.movie.short > a {display:block; background:rgba(0,224,255,0.25); height:106px; padding-left:90px; padding-right:35px; position:relative; overflow:hidden; border-top:1px solid #fff;}
.movie.short > a:hover {background:rgba(0,224,255,0.4);}
.movie.short > a.active {background:rgba(0,224,255,0.65);}
.movie.short:first-child > a {border-top-width:0;}
.movie.short.notReviewed {opacity:0.5;}
.movie.short header {color:#fff; font-weight:700; text-shadow:1px 1px rgba(32,32,32,0.5);}
.movie.short header h1 {margin:0.5em 0;}
.movie.short header h1 span {color:#fff; font-size:131%;}
.movie.short header .meta {margin-top:1em; color:rgba(255,255,255,0.75); line-height:1.35em;}
.movie.short header .meta .spec .label {.hidden;}
.movie.short header .meta .spec.ranking .value {position:absolute; right:0; bottom:-5px; font-size:400%; z-index:2; line-height:0.9em; opacity:0.15;}
.movie.short > a > .main {position:absolute; left:0; top:0;}
.movie.short > a > .main img {display:block;}
#movies #footer .list {overflow-y:scroll; .span;}

/* movie detail ............................................................. */
.movie.review {margin-bottom:2em;}
.movie.review > header {margin-left:115px; min-height:120px;}
.movie.review > header h1 span {font-size:197%;}
.movie.review > header .meta .ranking .label {.hidden;}
.movie.review > header .meta .ranking .value {z-index:2; line-height:0.9em; opacity:0.25; margin:0.25em 0; text-align:left; font-size:450%; font-weight:700; font-style:italic; color:#999; text-shadow: 10px 10px 10px #333;}
.movie.review .main > .related {margin-top:2em; overflow:hidden;}
.movie.review .main > .related .dataSheet.show .spec {border-bottom:1px dotted #888; padding:0.5em 0; margin:0;}
.movie.review .main > .related .dataSheet.show .spec:first-child {border-top:1px dotted #888;}
.movie.review .main > .related .dataSheet.show .spec .label {width:6em;}
.movie.review .main > .related .dataSheet.show .spec .value {margin-left:7em; text-align:left;}
.movie.review .main > .related .dataSheet.show .spec .value a {font-weight:700;}
.movie.review .main > .related .dataSheet.show .spec .value li {margin: 0.25em 0;}
.movie.review .main > .related .img {position:absolute; width:100px; top:0; left:0;}
.movie.review .main > .related iframe {width:100%; max-width:300px; margin:1em 0; display:block;}
.movie.review .main > .related .spec.salesList ul {margin-left:0; min-height:0; margin-top:-0.25em;}
.movie.review .main > .related .spec.salesList ul li {line-height:1.5em;}
@media all and (min-width:600px) {
	.movie.review > header {margin-left:0; min-height:0;}
	.movie.review > header .meta .ranking .value {position:absolute; right:0; top:-0.35em; font-size:300%;}
	.movie.review .main > .related {margin-bottom:1em;}
	.movie.review .main > .related .img {float:left; margin:0; width:170px; position:static;}
	.movie.review .main > .related .wrap {margin-left:185px;}
	.movie.review .main > .related .dataSheet.show, #movies .movie.review .main > .related iframe {width:auto;}
	.movie.review .main > .related iframe {margin-top:0;}
}
@media all and (max-width:754px) {
	.movie.review > header h1 span {text-align:center; font-size:146.5%; overflow:hidden; text-overflow:ellipsis; display:block; position:absolute; left:70px; right:45px; top:14px; white-space:nowrap;}
	.movie.review .main > .related .img {top:60px; left:6px;}
}
@media all and (min-width:755px) {
	.movie.review {position:relative;}
}
@media all and (min-width:900px) {
	.movie.review .main > .related .img {width:300px;}
	.movie.review .main > .related .wrap {margin-left:320px;}
}

/* product .................................................................. */
.product {margin:0.75em 0; border-top:1px dotted #eee; position:relative;}
.product:first-child {border-top:none; padding-top:0;}
.product header h1 {margin:0; margin:0.75em 0;}
.product header h1 span {font-size:123.1%; text-shadow:1px 1px 0 #222;}
.product .main {display:inline-block; display:block; overflow:hidden;}
.product .main .image {float:left; width:80px;}
.product .main .image img {box-shadow:0 0 8px #333);}
.product .main .affiliates {margin-left:85px; margin-top:-4px;}
.product .main .affiliates li {margin-bottom:0.35em;}
.product .main .affiliates li a {display:inline-block; height:16px; .textshadow;}
.product .main .affiliates li a:before {.sprite(4,2); content:""; width:22px; height:16px; display:inline-block; overflow:hidden; position:relative; top:4px;}
.product .main .affiliates li a:hover {text-shadow:0 0 2px #fff;}
.product .main .affiliates li.yesasia a:before {top:3px; left:1px; .spritePos(4,0);}
.product .main .affiliates li.amazon a:before {left:1px; .spritePos(4,1);}
.product .main .affiliates li.play a:before {.spritePos(4,3);}

/* ad ....................................................................... */
.ad {min-height:605px; margin:2em 0; padding:0.75em 1em; box-shadow:0 0 3px rgba(48, 48, 48, 0.65); background:#595959;}
.ad > h1 {border-bottom:1px dotted #eee; line-height:1.5em; margin:0.5em;}
.ad > h1 span {font-size:123.1%; color:#d9d9d9; text-shadow:1px 1px 5px #222; text-transform:lowercase;}
/* google ad */
.ad.google {text-align:center;}
/* tool page */
#tools .ad {border:0.5em solid #333; margin:2em 0; margin-bottom:1em; padding:0.5em 1em; min-height:0; background:#3c3c3c; overflow:hidden;}
/* movie review */
#main > .ad {width:auto; min-height:0; overflow:hidden; padding:0;}
#main > .ad .sales {display:inline-block; display:block; margin:0.5em 0.75em;}
#main > .ad .sales:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
/* blog specific */
#blog .ad .sales .product h1 a {color:#0dd;}
#movies .ad .sales .product h1 a {color:#1af;}
@media all and (min-width:500px) {
	#main > .ad .sales .product {float:left; width:47.5%; border:none; margin-top:0;}
	#main > .ad .sales .product:nth-child(2n+1) {clear:left;}
	#main > .ad .sales .product:nth-child(2n) {float:right;}
	#main > .ad .sales .product:nth-child(n+3) {border-top:1px dotted #eee;}
}

/* notification ............................................................. */
.notification.alert {border:2px solid #555; padding:8px; position:relative; background:rgba(0, 200, 255, 0.15); font-size:116%; text-shadow:1px 1px 1px rgba(64,64,64,0.5); font-weight:700; padding-left:38px;}
.notification.alert:before {.spriteBefore(1,3); left:10px; top:10px; height:32px; width:32px;}
.notification.alert p {line-height:1.35em;}

/* copyright notice ********************************************************* */
/* css verified - 2013 02 07 ................................................ */
.legal {font-size:93%; position:absolute; right:0; bottom:0; color:#444; text-shadow:1px 1px rgba(224,224,224,0.25); font-weight:700;}
@media all and (min-width:755px){
	.legal {color:#888;}
}


/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* 07. content types                                                          */

/* article vView ************************************************************ */
/* css verified - 2013 02 11 ................................................ */
.article.vView {border-top:1px solid #fff; height:87px; overflow:hidden;}
.article.vView:first-child {border:none;}
.article.vView a {display:block; position:relative;}
.article.vView h1 {position:absolute; top:0.75em; left:0.75em; right:0.75em; z-index:2; font-size:123.1%;}
.article.vView h1 .sep {.hidden;}
.article.vView h1 .secondary {display:block; margin-top:0.5em;}
.article.vView a.active h1 {opacity:0.5;}
.article.vView img {width:100%; display:block; opacity:0.25;}
/* contextual variations */
#blog .article.vView .image {background:rgba(0,64,64,0.25);}
#blog .article.vView a:hover .image {background:rgba(0,64,64,0.45);}
#blog .article.vView a.active .image {background:rgba(0,64,64,0.65);}
#features .article.vView .image {background:rgba(192,224,0,0.25);}
#features .article.vView a:hover .image {background:rgba(192,224,0,0.4);}
#features .article.vView a.active .image {background:rgba(192,224,0,0.5);}
@media all and (min-width:545px) and (max-width:754px){
	.article.vView {float:left; width:50%;}
	.article.vView:nth-child(2) {border-top:none;}
	.article.vView:nth-child(2n) a {border-left:1px solid #fff;}
}

/* article vsView *********************************************************** */
/* css verified - 2013 02 08 ................................................ */
.article.vsView {margin:0.5em 0; background:rgba(32,32,32,0.4);}
.article.vsView a {display:block; padding-bottom:2.25em; position:relative; overflow:hidden;}
.article.vsView header, .article.vsView .main .textblock {position:relative; z-index:2; margin:0.75em;}
.article.vsView header h1 .split {font-size:131%;}
.article.vsView .main .textblock > * {margin:0.5em 0;}
.article.vsView .main .image {display:none; visibility:hidden;}
.article.vsView footer {position:absolute; left:0; right:0; bottom:0; margin:0; padding:0.7em 1em; background:rgba(0,224,224,0.05); border-top:1px solid rgba(0,224,224,0.2);}
.article.vsView footer .spec {display:inline-block; margin-right:0.15em;}
.article.vsView footer .spec:before {content:" | "; color:#aaa;}
.article.vsView footer .spec:first-child:before {content:"";}
.article.vsView footer .spec:last-child {margin-right:0;}
.article.vsView footer .spec .label {.hidden;}
.article.vsView footer .spec .value {display:inline;}
/* variants */
.article.feature.vsView footer {background:rgba(192,224,0,0.05); border-top:1px solid rgba(192,224,0,0.2);}
@media all and (min-width:900px) {
	.article.vsView {background:rgba(32,32,32,0.8);}
	.article.vsView header, .article.vsView .main .textblock {margin:1em;}
	.article.vsView header h1 .split {font-size:146.5%;}
	.article.vsView .main .image {.span; z-index:1; display:block; visibility:visible;}
	.article.vsView .main .image img {width:100%; opacity:0.1;}
}


/* image vView ************************************************************** */
/* css verified - 2013 02 08 ................................................ */
.image.vView {border:1px solid #999; position:relative;}
.image.vView:after {content:" "; .span; background:rgba(0,0,0,0.25);}
.image.vView:hover {box-shadow:0 0 5px rgba(255,255,255,0.25);}
.image.vView:hover:after {display:none;}
.image.vView a {display:block; padding:3px;}
.image.vView a header {.hidden;}
.image.vView a .main .image {height:60px; width:60px; overflow:hidden;}
.image.vView a .main img {display:block; position:relative;}



/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* 08. form basics                                                            */

/* form box ................................................................. */
.formbox > header .required {.hidden;}
.formbox form > .main .extra {margin:0.5em 0em;}
.formbox form > footer .buttongroup {margin:2em; margin-top:0; margin-left:11em;}
/* contact */
.formbox.contact {.gradient(-45deg, rgba(32, 32, 32, 0.75), rgba(64, 64, 64, 0.15)); overflow:hidden;}
.formbox.contact > header > h1 {margin:1em 2em;}
.formbox.contact > header > h1 span {font-size:131.3%;}
/* comment form ............................................................. */
.comments .formbox {.gradient(-45deg, rgba(32, 32, 32, 0.75), rgba(64, 64, 64, 0.15));}
.comments .formbox fieldset.meta > * {margin-left:2.5em;}

/* form element ............................................................. */
.formrow {margin:0.75em 2em;}
.formrow label {font-weight:700; color:#ccc; line-height:1.5em; margin-bottom:0.5em;}
.formrow .value label {width:auto; float:none; margin:0em 0.25em;}
/* small */
.formrow.small label {display:block; float:none; margin-bottom:0.25em; color:#ccc; width:auto; text-align:left;}
.formrow.small .value {margin:0;}
/* error */
.formrow.error label, .formrow.error label .required {color:#d90900;}
/* subordinate */
.formrow .value .subordinate {display:inline;}
.formrow .value div.subordinate {display:block; margin-top:0.25em;}
.formrow .value.small .subordinate {display:block; padding-left:0; background:none; margin-top:0.5em;}
@media all and (min-width:480px) {
    .formrow label {width:8em; float:left; text-align:right;}
    .formrow .value {margin-left:9em;}
}

/* error summary ............................................................ */
.notification.error {margin:1em 0; .gradient(135deg, rgba(32,32,32,0.5), rgba(128,128,128,0.5)); overflow:hidden;}
.notification.error > * {margin:0.75em 1em;}
.notification.error h1 span {color:#d90900; font-size:138.5%;}

/* comment form ............................................................. */
.commentForm {position:relative; padding:1em 0; padding-bottom:3em;}
.commentForm form > .main fieldset {border:none;}
.commentForm form > .main fieldset legend {.hidden;}
.commentForm form > .main .meta .formrow.free input {width:95%;}
.commentForm form > .main .formrow {margin:0.25em 0.75em;}
.commentForm form > .main .formrow .fieldhint {font-size:93%; color:#aaa;}
.commentForm form > .main .formrow .fieldhint a {font-weight:700;}
.commentForm form > footer {position:absolute; right:1.65em; bottom:1.25em; z-index:1;}
.commentForm form > footer .buttonGroup * {float:right; margin-left:1em;}
/* sections */
#blog .commentForm .required {color:#0dd;}
#gallery .commentForm .required {color:#f09;}
@media all and (min-width:450px) {
	.commentForm form > .main .formrow {margin:0.75em 1em;}
	.commentForm form > .main .formrow label {float:left; width:8em; text-align:right; position:relative;}
	.commentForm form > .main .formrow label .required {position:absolute; right:-0.65em; top:0;}
	.commentForm form > .main .formrow .value {margin-left:9em;}
}

/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* 09. specific input elements                                                */

/* standard input styling ................................................... */
.free input {outline:none; background:#ccc; border:1px solid #ccc; color:#222; font-weight:700; width:100%; max-width:17.5em; padding:0.1em 0.5em; font-family:Arial;}
.error .free input, .error textarea {border:1px solid #d90900;}

textarea {height:12.5em; background:#ccc; border:1px solid #ccc; color:#222; width:95%; padding:0.1em 0.5em; font-family:Arial; font-size:100%;}


/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* 10. site sections                                                          */

/* tool ..................................................................... */
.tool > .toolIntro {overflow:hidden; .gradient(135deg, rgba(32,32,32,0.8), rgba(128,128,128,0.8)); box-shadow:0 0 5px rgba(32, 32, 32, 0.5); padding-bottom:1em;}
.tool > .toolIntro > h1 {margin:1em; color:#d06422;}
.tool > .toolIntro > h1 span {font-size:151.8%;}
.tool .textblock.intro {margin:0 1em;}
.tool .textblock.intro p {font-size:108%; line-height:1.4em;}
.tool .textblock.intro p a {text-decoration:underline;}

#tools .release h1 {border:none; color:#ccc;}
#tools .release h1 span {font-size:100%; border-bottom:1px dotted #aaa;}

.tool .formbox {overflow:hidden; .gradient(135deg, rgba(32,32,32,0.5), rgba(128,128,128,0.5)); box-shadow:0 0 5px rgba(32, 32, 32, 0.5);}
.tool .formbox form > .main {overflow:hidden; position:relative;}
.tool .formbox form > footer input {background:transparent; border:1px solid #d06422; color:#fff; font-size:116%; padding:0.15em 0.25em; font-weight:300;}
.tool .formbox form > footer .buttongroup {margin:1em;}
.tool .formbox form > footer .buttongroup a {float:left; border:1px solid #d06422; font-size:116%; padding:0.25em 0.5em; color:#fff; font-weight:300;}
.tool .formbox form > footer .buttongroup a.back:before {content:""; margin:0;}
.tool .formbox hr {margin:1em; height:1px; border:none; background:#888; box-shadow:0 0 5px rgba(255, 255, 255, 0.5); clear:both;}
.tool .formbox .formrow input {position:relative; top:0.1em; background:#666;}
.tool .formbox .options {float:left; width:100%;}
.tool .formbox .stylesheet .value {line-height:1.85em;}
.tool .formbox .stylesheet.ie6 textarea {height:25em;}
.tool .formbox .stylesheet .subordinate {margin-left:1.25em;}
.tool .formbox h1 {color:#d06422; margin:1em; text-transform:uppercase;}
.tool .formbox h1 span {font-size:131%;}
.tool .formbox .formrow {margin:0.15em 1em; position:relative;}
.tool .formbox .formrow.checkbox {padding-left:18px;}
.tool .formbox .formrow.checkbox input {position:absolute; left:0; top:0.5em;}
.tool .formbox .formrow .value {margin-left:0; padding-bottom:0.75em;}
.tool .formbox .formrow .value label {margin:0}
.tool .formbox .formrow p {font-size:85%; color:#999;}
.tool .formbox .formrow textarea {background:#666;}
/* col size */
@toolCol:21em;
@media all and (min-width:550px) {
    .tool .formbox form > .main {padding-right:@toolCol;}
    .tool .formbox .output {float:right; width:@toolCol; margin-right:@toolCol*(-1);}
    .tool .formbox .stylesheet { margin-right:@toolCol*(-1);}
    .tool .formbox hr {margin-right:-20em;}
}
@media all and (max-width:754px) {
		.tool > .toolIntro > h1 span {text-align:center; font-size:146.5%; overflow:hidden; text-overflow:ellipsis; display:block; position:absolute; left:70px; right:45px; top:14px; white-space:nowrap;}
}
@media all and (min-width:992px) {
		.tool {background:url("img/tool-ie6-bg.png") right -20px no-repeat;}
		.tool > .toolIntro > h1 {margin:2em;}
		.tool > .toolIntro > h1 span {font-size:197%;}
		.tool .textblock.intro {margin:0 2em;}
}

/* 404 page ..................................................................*/
#four0four .layout {position:fixed; top:0; bottom:0; right:0; left:500px;}
#four0four .layout.single .group1 {position:absolute; top:50%; width:600px; margin:0 auto; margin-top:-5em; }
#four0four #main > h1 {font-size:250%; text-align:center; text-shadow:1px 1px 2px rgba(255,255,255,0.4); color:#444; font-weight:700;}
#four0four #main > .textblock p {text-align:center; text-shadow:1px 1px 2px rgba(255,255,255,0.5); color:#393939; font-weight:700; font-size:123.1%;}

/* contact confirmation ..................................................... */
#contact.confirmationpage #main {.gradient(135deg, rgba(32,32,32,0.5), rgba(128,128,128,0.5)); box-shadow:0 0 5px rgba(32, 32, 32, 0.5); margin:0 0 2em 0;  width:auto;}
#contact.confirmationpage #main > * {margin:1em 2em;}
@media all and (min-width:630px) {
    #contact.confirmationpage #main {margin:0 2em 2em 0;}
}