/* 

    ArleyM.com CSS! 
    Don't try this at home. I break some of my own rules on my own site in the name of innovation, breaking the mould, and having fun.

    This is right-brained code. Hey, whatever floats your div.

    You can read more about this front page here: http://arleym.com/arleym-com-redesign-chapter-x

*/

::selection {background:#A5CF51;color:#fff} ::-moz-selection {background:#A5CF51;color:#fff}

/* Big thanks to Paul Charszewski for his help on the HTML multiple backgrounds (Cicada principle!) Please don't borrow these images as they took ages to work out. To make your own check out this article: http://designfestival.com/the-cicada-principle-and-why-it-matters-to-web-designers and this gallery of other examples: http://designfestival.com/cicada/; */
html {/*background:url(../images/wall.png); original 2MB Wall image */background: url(../images/wall_4.png), url(../images/wall_3.png), url(../images/wall_2.png), url(../images/wall_1.png);background-attachment:fixed;overflow-x:hidden;}

/* the amazing CSS3 gradiant background is at the bottom of this stylesheet */
body {font:400 14px/22px "Helvetica Neue",Helvetica,Arial,sans-serif;margin:0;padding:0;text-shadow: 1px 1px 1px #000;filter: dropshadow(color=#000, offx=1, offy=1);overflow-x:hidden;}
a:link, a:visited {color:#fff;} a:hover {text-decoration:none;color:#8dba33;}
#chewycenter {max-width:900px;margin:0 auto;position:relative;}
    .parallaxArley {position:relative;z-index:2;left:50% !important;margin-left:-250px}
    .hiddenlink {display:none;}
.texty {float:left;position:relative;margin-left:20px;width:100%;}
    .texty hgroup {width:292px;}
	h1, h2 {color:#FFF;font: 111px/121px 'BebasNeueRegular', sans-serif;text-shadow: 1px 1px 4px #333;}
	.texty h1 {position:absolute;z-index:3; padding:10px 20px;right:0;}
	.texty h2.mcblain {position:absolute;z-index:1;  top:70px;padding:10px 20px;}
    .texty a:link, .texty a:visited {color:#8dba33;text-decoration:none;} .texty a:hover {text-decoration:underline;color:#fff;}
    
    /* SUP tags are surprisingly inconsistent. I decided to stick with it though. I also wouldn't do this on a client's site. You can be a hacky snake too: http://css-tricks.com/snippets/css/browser-specific-hacks/ */
    .texty h2.mcblain sup {vertical-align:text-top;font-size:91px;display:inline-block;}
    /* A blasted webkit hack. Another first for me. I'm a fiend. */
    @media screen and (-webkit-min-device-pixel-ratio:0) { .texty h2.mcblain sup {text-decoration:none;margin-top:0;} }
    /* Firefox hack...Never done that before! Seriously, SUPs are fickle. I love how FF treats the fat underline of the Sup. Webkit was a wimp there. */
    @-moz-document url-prefix() {.texty h2.mcblain sup {text-decoration:underline;margin-top:5px;} }

	.contenty {position:relative;float:left;z-index:800;top:290px;width:300px; margin:0 20px 0 0; background:rgba(0,0,0,0.66);color:#fff;padding:25px;-moz-border-radius-bottomright: 20px;-webkit-border-radius: 0px 0px 20px 0px;border-radius: 0px 0px 20px 0px;}
	#footy {background:rgba(0,0,0,0.66);color:#fff;position:relative;width:100%;padding:1px 0;z-index:5;}
        #footy p {margin:20px}
        .footcopy {float:left;}
        .footblog {float:right;}
.row {position:relative;width:100%;}	
    .social {top:3px;position:relative;font-family:'LarkIconographiqueRegular';font-size:25px;margin:0 15px;}
            .social a:link {color:#fff;text-decoration:none;}
            .social a:visited {color:#ddd;}
            .social a:hover {color:#A5CF51;}
            .social a:active {color:#8dba33;}
.h600 {height:600px;}
.w333 {width:333px;}
.h300 {height:300px;}
    .h300 h2 {margin:10px auto -20px;position:relative;z-index:4;}
    .h300 h2 span:after {margin:40px 0  0;padding-top:30px;content:'Incredible.';}
        /*.h300 h2 span:hover {color:#000;} - JUST A TEST. Some Browsers can't hover CSS content - let alone highlight it as actual live text! Neat. */
    .h300 p {color:#fff;text-align:center;font-size:40px;}
    .baserow {background:rgba(0,0,0,0.44);}        
#karl {position:absolute;bottom:130px;z-index:1000;right:-45px;color:#fff;font-size:10px; 
-moz-transform: rotate(270deg);-webkit-transform: rotate(270deg);-o-transform: rotate(270deg);-ms-transform: rotate(270deg);transform: rotate(270deg);}        
.arrow {font-family:sans-serif;position:relative;z-index:5;}
.hidden {color:rgba(255,255,255,0);text-shadow:none;}
.hidden::selection, span.e::selection {background:deeppink;color:#fff;font-weight:bold;}
span.e::-moz-selection, .hidden::-moz-selection {background:deeppink;color:#fff;font-weight:bold;}

/* T'anks Font Squirrel (http://www.fontsquirrel.com) */
@font-face {font-family: 'BebasNeueRegular';src: url('../font/BebasNeue-webfont.eot');src: url('../font/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),  url('../font/BebasNeue-webfont.woff') format('woff'),url('../font/BebasNeue-webfont.ttf') format('truetype'),url('../font/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');font-weight: normal;font-style: normal;}

/* The custom font I made! If you want to use it please let me know. arley at mcblain dotty commers! */
@font-face {font-family: 'LarkIconographiqueRegular';src: url('../font/lark-iconographique-webfont.eot');src: url('../font/lark-iconographique-webfont.eot?#iefix') format('embedded-opentype'),url('../font/lark-iconographique-webfont.woff') format('woff'),url('../font/lark-iconographique-webfont.ttf') format('truetype'),url('../font/lark-iconographique-webfont.svg#LarkIconographiqueRegular') format('svg');font-weight: normal;font-style: normal;}

/* boring utility */	
.clearfix:after {content: ".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}
.clearfix {display:block;}
html[xmlns] .clearfix {display:block;}
* html .clearfix {height:1%;}
.clear {clear:both;}
.right {float:right;}
.left {float:left;}
.third {width:33%;}
.txtcenter {text-align:center;}

body {
/* CSS3 responsive gradient on the body element! You can see it more clearly without the brick wall here: http://rle.me/misc/static7/nowall.php

Fear not Duckies, you can make your own CSS3 background gradient easier using this tool: http://www.colorzilla.com/gradient-editor - I did remove a lot of the conditional versions as I feel that the first one resizes the nicely. Others got too intense when up close and personal. */;    
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSI1NCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSI5NyUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC45MSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuOTEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 54%, rgba(0,0,0,0.91) 97%, rgba(0,0,0,0.91) 100%); /* FF3.6+ */
background-position:top;
background-repeat: none;
background-attachment:fixed !important;
}