/* aaronjamesyoung.com new design */
/* if in doubt about an overflow:hidden in here, it's probably to eliminate paragraph orphans under
 * floating elements */
/* don't tell me to be using shorthand for border & background properties. The background-color and
 * border-color of some elements are set outside of this stylesheet */

/* Imports */
@import url("reset.css");

@font-face {
    font-family:'Mr Jones';
    /* font-family: 'MrJonesBook'; */
    src: url(//:) format('no404'),
    url('mrjonesbook-webfont.woff') format('woff'),
    url('mrjonesbook-webfont.ttf') format('truetype'),
    url('mrjonesbook-webfont.svg#webfont2Tw2dTvN') format('svg');
    font-variant: normal;
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family:'Sovereign-Regular';
    /* font-family: 'SovereignRegular'; */
    src: url(//:) format('no404'),
    url('soverg__-webfont.woff') format('woff'),
    url('soverg__-webfont.ttf') format('truetype'),
    url('soverg__-webfont.svg#webfontPcpoOd6o') format('svg');
    font-variant: normal;
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'widepixelcoding';
	/* font-family: 'widepixelcodingRegular'; */
	src: url(//:) format('no404'),
	url('widepixelcoding-webfont.woff') format('woff'),
    url('widepixelcoding-webfont.ttf') format('truetype'),
    url('widepixelcoding-webfont.svg#webfontE5RsweId') format('svg');
    font-variant: normal;
    font-weight: normal;
    font-style: normal;
}

/* body and general styles */
body { background-image: url('../graphics/bg-light.png'); background-position: center top;
	background-repeat: repeat; color: #474747; font-family: 'Mr Jones', Lucida Grande,
		'Trebuchet MS', 'Liberation Sans', sans-serif; font-size: 16px;
	border-bottom-style: solid; border-bottom-width: 5px; }
.body { width: 960px; margin: 0 auto; }
h1 { padding-top: 23px; font-family: 'Sovereign-Regular', 'Liberation Serif', Georgia, serif; }
h2 { font-family: 'Sovereign-Regular', 'Liberation Serif', Georgia, serif;  }
h3 { font-family: 'Sovereign-Regular', 'Liberation Serif', Georgia, serif; }
code { font-family: 'widepixelcoding', monospace; font-size: 16px; white-space: pre-line; }
pre { padding: 5px; background: #222222; color: #dddddd; font-family: 'widepixelcoding', monospace;
	font-size: 16px; white-space: pre-line; line-height: 1.2em;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px; }
/* link styles */
a { text-decoration: none; }
section.body a { color: #474747; background: #dddddd; padding: 2px 3px; white-space:nowrap;
    -moz-border-radius: 3px;
    border-radius: 3px; }
footer.body a { color: #dddddd; background: #474747; padding: 2px 3px; white-space:nowrap;
    -moz-border-radius: 3px;
    border-radius: 3px; }
section.body a:hover:before, footer.body a:hover:before { /*visited doesn't work? */
    content:  "\2799\00A0";
}
section.body a:active, footer.body a:active { position: relative; top: 1px; }
/*use jquery to add this class to a's containing images, especially floating images */
section.body a.noarrow, footer.body a.noarrow { background: none; }
section.body a.noarrow:hover:before, footer.body a.noarrow:hover:before {
    content: "";
    display: none;
}

/* comment form */
label { display: block; }
fieldset { border: none; padding: 0; margin: 0; }
input, textarea { width: 490px; padding: 5px; font-size: 20px; background: #444444; color: #dddddd;
	border: none; margin-bottom: 10px; font-family: 'Mr Jones', 'Lucida Grande', 'Trebuchet MS',
	'Liberation Sans', sans-serif;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0 -1px 0 #282828, 0 1px 0 #8a8a8a;
	-webkit-box-shadow: 0 -1px 0 #282828, 0 1px 0 #8a8a8a;
	box-shadow: 0 -1px 0 #282828, 0 1px 0 #8a8a8a;}
input { height: 20px; line-height: 20px; }
textarea { height: 200px; line-height: 1.3em; }
input:focus, textarea:focus { background: #666666; outline: none; }
input[type="submit"] { background: #dddddd; color: #474747;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box; }
input[type="submit"]:hover { background: #bbbbbb; }
input[type="submit"]:active { padding: 7px 5px 3px 5px; }
.machine { display: none; }
.error { font-size: 14px; color: #D66B6B; text-align: right; }

/* self-clearing floats */
.mod:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

::selection {background: #000000; color: #ffffff; }
::-moz-selection {background: #000000; color: #ffffff; }

img::selection {background: transparent;}
img::-moz-selection {background: transparent;}

/* topstrip and nav, which are above the header */
.topstrip { width: 20%; float: left; margin: 0; padding: 0; height: 5px; }
nav.main-menu { height: 50px; line-height: 50px; color: #dddddd; background-image:
    url('../graphics/bg-dark.png'); background-repeat: repeat; background-position: top left;
    border-bottom-style: solid; border-bottom-width: 5px; border-top-style: solid; border-top-width:
    5px; margin-bottom: 5px;
    -moz-box-shadow: 0 1px 5px #222222;
    -webkit-box-shadow: 0 1px 5px #222222;
    box-shadow: 0 1px 5px #222222; }
.main-menu>div { width: 960px; margin: 0 auto; }
.main-menu>div>ul { margin: 0; z-index: 100; position: relative; list-style: none; }
.main-menu>div>ul>li { float: left; padding: 0 10px; position: relative; margin: 0; z-index: 105; }
.main-menu>div>ul>li>a { padding: 6px 15px 4px 15px; color: #dddddd; font-weight:
    bold; text-shadow: 0 -1px 0 rgba(0,0,0,0.3); position: relative; z-index: 120;
    -moz-border-radius: 4px;
    border-radius: 4px; 
    -moz-transition: background .3s linear;
    -o-transition: background-color .3s linear;
    -webkit-transition: background .3s linear;
    transition: background .3s linear; }
.main-menu>div>ul>li>a:hover { /* text-shadow: 0 0 8px #181818;  */
    -moz-box-shadow: 0 1px 0 #8a8a8a, 0 -1px 0 #282828;
    -webkit-box-shadow: 0 1px 0 #8a8a8a, 0 -1px 0 #282828; }
.main-menu ul ul { width: 120px; padding: 55px 5px 5px 5px; margin: 0; position: absolute; left:
    50%; top: 0; margin-left: -65px; line-height: 1.2em; z-index: 105; list-style: none; }
.main-menu ul ul:before { display: block; content: "\25CF"; position: absolute; left: 50%; top:
	27px; text-align: center; width: 16px; margin-left: -8px; font-size: 6px; }
.main-menu ul ul>li { line-height: 30px; background: #474747
    url('../graphics/bg-dark.png') center top repeat; margin: 0 auto 5px auto; text-align: center;
	height: 0; overflow: hidden; width: 110px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
   -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    transition: all .3s linear; }
.main-menu ul ul:hover>li, .main-menu ul li:hover ul li { height: 30px;
	-moz-box-shadow: 0 2px 3px #222222;
	-webkit-box-shadow: 0 2px 3px #222222;
	box-shadow: 0 2px 3px #222222;
}
.main-menu ul ul>li:hover { width: 120px; }
.main-menu ul ul>li a { color: #dddddd; display: block; }
.colorlink { float: right; height: 20px; padding: 4px; margin-top: 11px; background: #dddddd;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px; }
.colorlink a { display: block; color: #474747; }
.navcolor { float: left; width: 10px; height: 20px; }

/* main header */
header.body { margin: 15px auto; }
header.body a:hover { text-decoration: none; }
a.logo { text-decoration: none; display: block; float: left; width: 128px; height: 128px;
    background-image: url('../graphics/sprite.png'); background-position: -210px -184px;
	background-repeat: no-repeat; -moz-border-radius: 64px; border-radius: 64px; margin-right:
	15px; }
section.header-main { width: 573px; float: left; }
.header-portfolio { position: relative; margin-top: 20px; }
.portfolio-link, .contact-link { color: #dddddd; text-shadow: 0 -1px 0 rgba(0,0,0,0.3); font-size:
	22px; font-family: 'Sovereign-Regular', 'Liberation Serif', Georgia, serif; display: block;
	line-height: 40px; float: left; text-align: center; width: 276px; text-decoration: underline;
    background-image: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
    background-image: -webkit-gradient(linear, left top, left bottom,
        color-stop(0%,rgba(255,255,255,0.3)), color-stop(100%,rgba(255,255,255,0)));
	background-image: linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); }
.portfolio-link { padding: 0 0 5px 0;
    -moz-border-radius-topleft: 8px;
    -webkit-border-top-left-radius: 8px;
    border-top-left-radius: 8px;
    -moz-border-radius-topright: 8px;
    -webkit-border-top-right-radius: 8px;
    border-top-right-radius: 8px; }
.contact-link { padding: 0; margin: 0 0 5px 21px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px; }
#slider { border-width: 10px; border-style: solid; clear: both; height: 209px; overflow: hidden;
    -moz-border-radius-topright: 8px;
    -webkit-border-top-right-radius: 8px;
    border-top-right-radius: 8px;
    -moz-border-radius-bottomleft: 8px;
    -webkit-border-bottom-left-radius: 8px;
    border-bottom-left-radius: 8px;
    -moz-border-radius-bottomright: 8px;
    -webkit-border-bottom-right-radius: 8px;
    border-bottom-right-radius: 8px; }
#slider ul, #slider li { margin:0; padding: 0; list-style:none; }
#slider li { width:553px; height:209px;	overflow:hidden; position: relative; }
#slider div.slider-info { position: absolute; bottom: 0; background: rgba(0,0,0,0.7); color:
    #dddddd; width: 543px; text-align: center; padding: 5px; }
#controls { position: absolute; top: 49px; right: 4px; list-style: none; }
#controls li { float: left; height: 12px; width: 12px; background-color: #dddddd; margin-left: 6px;
    cursor: pointer;
    -moz-box-shadow: 0 1px 3px #555555;
    -webkit-box-shadow: 0 1px 3px #555555;
    box-shadow: 0 1px 3px #555555;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px; }
#controls li a { visibility: hidden; }
section.header-blog { width: 367px; float: right; }
/* #searchform { margin-bottom: 20px; z-index: 1; position: relative; }
#searchform input { background: #dddddd; color: #474747; float: left; width: 287px; z-index: 10;
	position: relative;
	-moz-box-shadow: 0 -1px 0 #bbbbbb, 0 1px 0 #ffffff;
	-webkit-box-shadow: 0 -1px 0 #bbbbbb, 0 1px 0 #ffffff;
	box-shadow: 0 -1px 0 #bbbbbb, 0 1px 0 #ffffff; }
#searchform input:hover, #searchform input:focus { background: #eeeeee; }
#searchform input[type="submit"] { width: 50px; margin-left: 10px; background: #474747; color:
	#dddddd; }
#searchform input[type="submit"]:hover { background: #666666; }
#searchform label { position: absolute; top: 5px; left: 6px; z-index: 20; font-size: 20px; } */
section.header-blog h2 { text-align: right; border-bottom: 1px dashed #474747; }
section.header-blog a { color: #474747; }
section.header-blog article { padding: 7px; margin-bottom: 3px; -moz-border-radius: 5px;
    border-radius: 5px; min-height: 50px; color: #474747; font-size: 14px;
    -moz-transition: background .3s linear;
    -o-transition: background-color .3s linear;
    -webkit-transition: background .3s linear;
    transition: background .3s linear; }
section.header-blog article:hover { color: #ffffff;
    -moz-box-shadow: 0 1px 0 #ffffff, 0 -1px 0 #bbbbbb;
    -webkit-box-shadow: 0 1px 0 #ffffff, 0 -1px 0 #bbbbbb; }
section.header-blog article:hover a, section.header-blog article:hover a:hover { color: #ffffff; }
section.header-blog div.meta { color: #dddddd; background-image: url('../graphics/bg-dark.png');
    background-position: left top; background-repeat: repeat; float: left; height: 38px; width:
	38px; border-style: solid; border-width: 2px; padding: 4px; margin: 0 7px 7px 0; text-align:
	center;
    -moz-background-clip: padding-box;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -moz-border-radius: 26px; border-radius: 25px;
    -moz-box-shadow: 0 1px 3px #555555;
    -webkit-box-shadow: 0 1px 3px #555555;
    box-shadow: 0 1px 3px #555555; }
section.header-blog div.meta p.day { font-family: 'Sovereign-Regular', 'Liberation Serif', Georgia,
	serif; /* font-weight: bold;*/ font-size: 22px; }
section.header-blog article h3 { margin: -2px 0 0 57px; overflow: hidden; line-height: 1.0em;
	padding-bottom: 6px; }
section.header-blog article p { margin-bottom: 0; overflow: hidden; line-height: 1em; }

/* main content section */
.ihatewrappers { background-image: url('../graphics/bg-dark.png'); background-repeat: repeat;
    border-top-style: solid; border-top-width: 5px; border-bottom-style: solid; border-bottom-width:
    5px; margin-top: 5px; margin-bottom: 5px; color: #dddddd;
    -moz-box-shadow: 0 1px 5px #222222;
    /* -webkit-box-shadow: 0 1px 5px #222222; - this causes problems w/ gtk-webkit */
    box-shadow: 0 1px 5px #222222; }
section.body { width: 720px; padding: 20px 0; }
section.body>h2 { text-align: center; }
section.body>h2 span { font-style: italic; }
section.body article header { padding: 10px; background: #444444; margin-bottom: 20px;
	text-align: center;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
    -moz-box-shadow: 0 1px 0 #8a8a8a, 0 -1px 0 #282828;
    -webkit-box-shadow: 0 1px 0 #8a8a8a, 0 -1px 0 #282828;
    box-shadow: 0 1px 0 #8a8a8a, 0 -1px 0 #282828; }
section.body article header p { font-size: 12px; text-transform: uppercase;
    margin: 0; }
section.body article>section:first-of-type { font-size: 20px; line-height: 1.3em;
	border-bottom-width: 1px; border-bottom-style: dashed; background-image:url('../graphics/bg-dark.png'); background-repeat: repeat; }
section.body article p { overflow: hidden; }
section.body article section > p:first-of-type:first-line { font-variant: small-caps; }
section.body article img { border: 2px solid #dddddd; }
img.alignright { float: right; margin: 0 0 10px 10px; }
img.alignleft { float: left; margin: 0 10px 10px 0; }
section.body article section.comments, .comments { width: 500px; margin: 10px auto 0 auto; }
section.comments h2 { text-align: center; }
section.comments article { border: 1px solid #dddddd; padding: 10px; margin-bottom: 20px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px; }
section.comments article header { text-align: left; padding: 0 0 10px 0; margin: 0 0 10px 0; height:
	66px; line-height: 66px;
	background: none; border-bottom: 1px dotted #dddddd; 
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none; }
.number { font-family: 'sovereign-regular', Georgia, serif; font-size: 66px; float: right; color:
	#444444; text-shadow: 0 -1px 0 #282828, 0 1px 0 #8a8a8a; }
section.comments article header img { float: left; margin-right: 10px; }
section.comments article header p { line-height: 15px; margin: 0; }
section.comments article p:last-child { margin-bottom: 0; }
.boilerplate { padding: 10px; background: #444444; margin: 20px 0; height: 154px; font-size: 20px;
    line-height: 1.3em;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
    -moz-box-shadow: 0 1px 0 #8a8a8a, 0 -1px 0 #282828;
    -webkit-box-shadow: 0 1px 0 #8a8a8a, 0 -1px 0 #282828;
    box-shadow: 0 1px 0 #8a8a8a, 0 -1px 0 #282828; }
.boilerplate img { float: left; border: 2px solid #dddddd; margin: 0 10px 0 0; }
section.body article section.boilerplate > p:first-of-type:first-line { font-variant: normal; }


/* tooltips */
.tooltip { position: absolute; top: 100%; left: 50%; display: none; background: #000000;
    background: rgba(0,0,0,0.8); color: #ffffff; width: 150px; text-align: center; padding: 5px;
	font-size: 14px; line-height: 1.1em; z-index: 9999;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px; }
/* .tooltip:after { content: ""; display: block; height: 7px; width: 160px; background:
    url('../graphics/arrow.png') center bottom no-repeat; position: absolute; top: -7px; left: 0; }*/
.tooltip:after { content: ""; display: block; height: 0; width: 0; position: absolute; top: -7px;
	border-bottom: 7px solid rgba(0,0,0,0.8); border-right: 7px solid transparent;
	left: 50%; margin-left: -7px; border-left: 7px solid transparent; }

/* aside */
aside.body {}

/* footer */
footer.body { padding: 20px 0; }
footer.body section { width: 470px; float: left; display: inline; min-height: 250px; }
footer.body section:first-child { padding-right: 10px; border-right: 1px dashed #474747;
	margin-right: 9px; width: 582px; }
footer.body section:last-child { text-align: right; font-size: 14px; width: 358px; }
.little-aaron { float: left; margin-right: 20px; }
.bottomstrip { width: 20%; float: left; margin: 0; padding: 0; height: 5px; line-height: 0;
	font-size: 0; }
span.statcounter { display: none; }

/*page-specific styles */
/* home page */
.greeting { border-bottom-style: dashed; border-bottom-width: 1px; background-image:
    url('../graphics/bg-dark.png'); background-position: left top; background-repeat: repeat;
    margin-bottom: 20px; text-align: center; }
section.body .greeting p { font-size: 20px; line-height: 1.3em; overflow: hidden; }
.oregon { float: left; margin: 5px 20px 20px 0; position: relative; height: 159px; width: 210px; } /* wrapper for sprite */
.oregon img { position: absolute; top: -184px; left: 0; clip: rect(184px 210px 343px 0); } /*sprite */
.greeting a { margin-left: 9px; }

/*archives*/
article.archive { width: 200px; margin: 0 0 30px 60px; float: left;  }
article.archive:nth-of-type(3n+1) { clear: both; margin-left: 0; }
article.archive:nth-last-of-type(-n+3) { margin-bottom: 0; }
section.body article.archive header { padding: 5px; }
article.archive>img { display: block; margin: 0 23px 10px 23px; }
nav.postnav { padding: 5px; background: #444444; margin-bottom: 20px; font-size: 16px; clear: both;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0 1px 0 #8a8a8a, 0 -1px 0 #282828;
    -webkit-box-shadow: 0 1px 0 #8a8a8a, 0 -1px 0 #282828;
    box-shadow: 0 1px 0 #8a8a8a, 0 -1px 0 #282828; }
.older { float: left; margin-bottom: 0; }
.newer { float: right; margin-bottom: 0; }

/* contact page */
div.commentchoice { background: url('../graphics/contact-arrows.png') left 80px no-repeat; }
div.commentchoice input { width: 300px; margin: 50px 0 90px 70px; }

/* portfolio page */
section.body article.portfolio { padding: 2px; margin: 0 0 30px 0; border-style: solid;
	border-width: 0; height: 213px; white-space: normal; line-height: 1.0em; font-size: 14px;
	-moz-background-clip: content;
	-webkit-background-clip: content;
	background-clip: content-box; }
section.body article.portfolio:hover { padding: 0; border-width: 2px; height: 213px; }
/* above - may need margin-bottom 34px; */
section.body article.portfolio a { display: block; padding: 0; background: #dddddd; height: 213px;
	white-space: normal; }
article.portfolio a img { float: left; margin-right: 5px; }
article.portfolio a h3 { padding-top: 5px; }

/* sprite-ified images */
.rss-home, .twitter-home, .facebook-home, .forrst-home,
.rss, .twitter, .facebook, .forrst { position: relative; width: 92px; height: 92px; float: left;
	margin-right: 10px; overflow: hidden; }
.greeting a.rss-home { margin-left: 138px; }
.little-aaron { width: 115px; height: 251px; position: relative; overflow: hidden; }
.rss img { position: absolute; top: 0; left: -276px; clip: rect(0 368px 92px 276px); }
.twitter img { position: absolute; top: 0; left: -184px; clip: rect(0 276px 92px 184px); }
.facebook img { position: absolute; top: 0; left: 0; clip: rect(0 92px 92px 0); }
.forrst img { position: absolute; top: 0; left: -92px; clip: rect(0 184px 92px 92px); }
.rss-home img { position: absolute; top: -92px; left: -276px; clip: rect(92px 368px 184px 276px); }
.twitter-home img { position: absolute; top: -92px; left: -184px; clip: rect(92px 276px 184px 184px); }
.facebook-home img { position: absolute; top: -92px; left: 0; clip: rect(92px 92px 184px 0); }
.forrst-home img { position: absolute; top: -92px; left: -92px; clip: rect(92px 184px 184px 92px); }
.little-aaron img { position: absolute; top: 0; left: -368px; clip: rect(0 483px 251px 368px); }

/*football*/
.football input { height: 15px; width: 15px; }
section.footballpredictions { width: 100%; }
section.predictionwrapper { position: relative; height: 980px; }
section.footballpredictions ul { float: left; width: 135px; list-style-type: none; margin: 0 1px 0 0; }
section.footballpredictions ul li { width: 125px; height: 14px; padding: 5px; margin: 0 0 1px 0;
	font-size: 14px; line-height: 14px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px; }
section.footballpredictions ul.gameslist { position: absolute; top: 0; left: 30px; }
section.footballpredictions ul.gameslist li { overflow: hidden; padding: 0 5px; height: 24px;
	line-height: 24px; }
li.notyet { background: #555555; }
li.wrong { background: #d66b6b; }
li.correct { background: #8bbe5f; }
.predictions td { border: none; padding: 0; }
.predictions { margin: 0 30px 0 165px; overflow: auto; }

/* for different sized screens */
/* 1024 and above uses default layout */

/* 768-1023 width: ipad? */
@media only screen and (max-width: 1023px) and (min-width: 768px) {
    body { font-size: 14px; }
    .body { width: 720px; }
    .main-menu>div { width: 720px; }
    /* todo: figure out hovers for stuff */
    section.header-main { float: none; margin-left: auto; margin-right: auto; }
    section.header-blog { display: none; }
    footer.body section { width: 582px; float: none; display: block; min-height: 250px; }
    footer.body section:first-child { padding-right: 0; border-right: none; margin-left: auto;
        margin-right: auto; }
    footer.body section:last-child { text-align: left; font-size: 14px; width: 582px; border-top:
        #474747; padding-top: 10px; margin-top: 10px; margin-left: auto; margin-right: auto; }
}

/* 5-column: 60px columns, 24px gutters, 42px margins, 480px total */
@media only screen and (max-width: 767px) and (min-width: 480px) {

}

/* 3-column: 60px columns, 24px gutters, 46px margins, 320px total */
@media only screen and (max-width: 479px) {

}