@font-face {
 font-family: jellyka;
 src: url("http://joedesigns.com/v22/fonts/jellyka.eot")
}
@font-face {
 font-family: jellyka;
 src: url("http://joedesigns.com/v22/fonts/jellyka.ttf")
}
@font-face {
 font-family: dirty;
 src: url("http://joedesigns.com/v22/fonts/dirty.eot")
}
@font-face {
 font-family: dirty;
 src: url("http://joedesigns.com/v22/fonts/dirty.ttf")
}
@font-face {
 font-family: alte;
 src: url("http://joedesigns.com/v22/fonts/alte.eot")
}
@font-face {
 font-family: alte;
 src: url("http://joedesigns.com/v22/fonts/alte.ttf")
}
@font-face {
 font-family: alte-bold;
 src: url("http://joedesigns.com/v22/fonts/alte-bold.eot")
}
@font-face {
 font-family: alte-bold;
 src: url("http://joedesigns.com/v22/fonts/alte-bold.ttf")
}
@font-face {
 font-family: serifs;
 src: url("http://joedesigns.com/v22/fonts/serifs.eot")
}
@font-face {
 font-family: serifs;
 src: url("http://joedesigns.com/v22/fonts/serifs.ttf")
}

body {
background: #333333 no-repeat top center;
margin: 0;
padding: 0;
text-align: center;
}

body, div, td {
font-family: alte, georgia, serif;
color: #38352A;
letter-spacing: 0pt;
}

#mCont a {
font-style: italic;
color: #20200e;
text-decoration: undelrine;
}
#mCont a:hover {
color: #000000;
}

.flickrgroup * {
border: none;
text-decoration: none;
background: none;
}
.flickrgroup a {
border: none;
text-decoration: none;
background: none;
}
.flickrgroup a:hover {
border: none;
text-decoration: none;
background: none;
}

#top-image {
background: #000000;
text-align: center;
}

#show-top-image {
font-size: 11px;
font-weight: bold;
background: #cccccc;
color: #343434;
padding: 5px 10px 5px 10px;
text-align: center;
width: 100px;
float: right;
margin-right: 15px;
}
#show-top-image:hover {
background: #000000;
color: #ffffff;
cursor: pointer;
}

#bd {
text-align: left;
margin: 0 auto 0 auto;
padding: 20px 0 20px 20px;

}

#nav {
width: 250px;
float: left;
margin-right: 25px;
}

#cont {
width: 650px;
float: left;
}

#header h1 {
background: url(/v22/gfx/soccer.png) top left no-repeat !important;
background: url(/v22/gfx/soccer.gif) top left no-repeat; /*stoopid ie*/
	position: absolute;
height: 69px;
width: 69px;
cursor: move;
}


#header h1 span {
display: none;
}

#mCont {
padding: 0px 20px 20px 20px;
}

#mCont p, #mCont div {
line-height: 160%;
margin: 2px 0 10px 0;
}

#mCont div {
line-height: 100%;
margin: 0;
}

#mCont small {
font-size: 10px;
}

#mCont h1, h2, h3, h4, h5 {

margin: 10px 0 0 0;
}
#mCont h1 {
font-size: 20px;
}
#mCont h1 {
font-size: 18px;
}
#mCont h1 {
font-size: 16px;
}
#mCont h1 {
font-size: 14px;
}
#mCont h1 {
font-size: 12px;
}

#nav p {
line-height: 170%;
font-size: 12px;
}

.headerImage {
margin: 0;
padding: 0;
}
.headerTitle {
font-size: 11px;
text-align: right;
padding: 3px 10px 0 0;
margin: 0;
}

.galleryImg {
margin-top: 15px;
}

.adminNav a {
color: #000000;
}

#gal {
background: green;
}

#menu {
text-align: left;
padding-right: 10px;
margin: 20px 0 30px 0;
line-height: 100%;
}

#menu a {
background: #ffffff;
color: #232323;
padding: 8px;
margin: 10px 0 0 0;
text-decoration: none;
display: block;
-webkit-transition: all .5s linear;
}

#menu a:hover {
background: #eaeaea;
color: #111111;
}
#menu a:hover b{color: #111111;}
#menu a:hover p{ color: #6a6a6a; }

#menu a:hover b, #menu a:hover p {

}

#menu b {
display: block;
font-size: 25px;
color: #343434;
text-decoration: none;

letter-spacing: -1px;
font-family: alte-bold, helvetica;
}

#menu a:hover {
color: #000000;
}

#menu p {
font-family: alte, helvetica;
margin: 7px 0 0 0;
padding: 0;
color: #9a9a9a;
font-size: 13px;
clear: both;
line-height: 1;
}

#uno {
font-size: 10px;
width: 240px;
}

.downloaded { font-family: alte; font-size: 15px; color: #565656; padding: 15px; text-align: right; letter-spacing: -1px; }
.downloaded b { font-family: alte-bold; font-size: 18px; }

.title {
padding: 3px;
font-size: 15px;
color: #434343;
text-decoration: none;
margin: 3px 6px 3px 0;
font-family: alte-bold;
}
.title a {
font-size: 15px;
font-family: alte-bold;
color: #434343;
text-decoration: none;
}

#uno .thumb {
}

#uno .thumb img {
margin-left: 5px;
}


#photoStream {
font-size: 10px;
width: 240px;
}

#photoStream button {
font-size: 10px;
background: #eaeaea;
border: 0;
font-weight: bold;
color: #676767;
padding: 4px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
#photoStream button:hover {
background: #11aeff;color: #ffffff;cursor: pointer;
}
#photoStream .btns {
padding: 5px;
}
#photoStream .btns .next {
float: right;
}

#photoStream #box {
position: relative;
width: 240px;
height: 75px;
margin: 0 0 5px 0;
overflow: hidden;
}

#photoStream #scroller {
position: relative;
left: 0px;
width: 9999px;
height: 75px;
}

#photoStream #box #scroller img {
margin-left: 5px;
}

#admin label {
display: block;
}

#admin form {
background: #eaeaea;
border: 1px solid #cccccc;
padding: 15px;
}

#admin .row1 {
background: #fafafa;
}
#admin .row2 {
background: #eaeaea;
}

#blogs .date {
background: url(../gfx/dateBG.gif) no-repeat;
width: 30px;
text-align: center;
padding: 7px;
border: 0;
float: left;
}

#blogs .date .dd {
color: #cccccc;
font-family: lucida grande, verdana;
font-size: 22px;
text-align: center;
letter-spacing: -2px;
padding-top: 5px;
}
#blogs .date .mo {
color: #999999;
text-transform: uppercase;
font-size: 10px;
font-family: verdana;
font-weight: bold;
text-align: center;
}
#blogs .date .yyyy {
color: #666666;
font-size: 11px;
text-align: center;
margin-top: 5px;
}

#blogs .post {
padding: 8px 8px 20px 8px;
margin: 0 0 20px 20px;
float: left;
width: 580px;
font-size: 15px;
line-height: 160%;
border-bottom: 1px solid #cacaca;
}
#blogs .clear {
clear: both;
height: 0px;
}


#blogs .smComment {
margin: 8px 0 0 0;
}
#blogs .smComment a {
font-size: 12px;
text-decoration: none;
color: #666666;
}
#blogs .smComment a * {
vertical-align: center;
}
#blogs .smComment a:hover {
background: #ffffff;
color: #000000;
}
#blogs .commentLink {
font-size: 12px;
border: 0px;
}

#comments {
padding: 20px 0 80px 0;
}

#comments h2 {
margin: 0 0 20px 0;
font-size: 28px;
color: #787878;
padding: 10px;
}

#comments .commentContainer {
clear: both;
margin: 0 0 20px 0;
background: #fafafa;
border: 1px solid #cccccc;
padding: 10px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
#comments .commentContainer .avatar {
padding: 4px 0 0 4px;
width: 54px;
height: 48px;
float: left;
background: url(../gfx/avatarBG.gif) no-repeat;
}
#comments .commentContainer .comment {
width: 480px;
float: left;
font-size: 12px;
line-height: 160%;
}
#comments .commentContainer .comment .username {
color: #2fa9ff;
margin: 2px 0 5px 0;
font-family: alte-bold;
}
#comments .commentContainer .comment .username b {
color: #000000;
}
#comments .commentContainer .comment .desc {
line-height: 160%;
}

#comments #commentForm {
margin: 20px 0 0 0;
clear: both;
background: #fafafa;
border: 1px solid #cccccc;
padding: 10px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
#comments #commentForm div {
margin: 0 0 10px 0;
}
#comments #commentForm div label {
display: block;
float: left;
width: 100px;
text-align: right;
padding: 8px 5px 0 0;
font-size: 10px;
font-weight: bold;
color: #898989;
}
#comments #commentForm div input, #comments #commentForm div textarea {
border: 1px solid #cccccc;
background: #fafafa;
padding: 4px;
font-size: 14px;
font-family: alte-bold, helvetica;
}
#comments #commentForm #ajaxCommentStatus {
font-size: 11px;
}
#comments #commentForm input[type=submit] {
background: #232323;
color: #ffffff;
font-weight: bold;
padding: 6px 12px 6px 12px;
border: 0;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
#comments #commentForm input[type=submit]:hover {
background: #d90000;
cursor: pointer;
}

#pages {
padding: 5px 0 5px 50px;
}
#pages a {
padding: 12px 9px 10px 9px;
font-size: 14px;
font-weight: bold;
border: 2px solid #eaeaea;
border-top: 0;
background: #ffffff;
color: #676767;
text-decoration: none;
font-size: 20px;
font-family: serif;
}

#pages a:hover, #pages a.on {
background: #eaeaea;
color: #000000;
border: 2px solid #eaeaea;
border-top: 0;
}

#pages a.on { padding: 0 10px 10px 10px; font-size: 35px; }

a.nofancy {
border: none;
background: none;
}
a.nofancy * {
border: none;
background: none;
}
a.nofancy:hover {
border: none;
background: none;
}


/* code */

#code {
overflow: hidden;
width: 100%;
font-size: 23px;
padding: 5px 0 7px;
}
#code h1 {
color: #F9265B;
font-size: 18px;
margin: 0 0 0 10px;
padding: 0;

}
#code h2 {
color: #FFF;
font-size: 18px;
margin: 0 0 0 10px;
padding: 0;
}
#code a h1 {
text-decoration: underline;
}
#code a h1:hover {
color: #fd971f;
}
#code a {
color: #A6E22E
}
#code a:hover {
color: #E6DB5C;
}
#code span {
font-size: 0.6em;
color: #51D9EF;
float: right;
position: relative;
left: -15px;
top: -23px
}
#code .desc {
color: #f8f8f2;
border-top: 1px solid #272727;
background: #191919;
font-size: 0.7em;
margin: 2px 0 8px;
padding: 7px 10px 10px;
}

.flickr_imgs {
margin-left: 4px;
}

#coffee {
padding: 10px 0 10px 0;
border-top: 1px solid #eaeaea;
border-bottom: 1px solid #eaeaea;
text-align: center;
}

#mCont h1.coo {
font-family: alte-bold, helvetica, sans-serif;
font-size: 35px;

letter-spacing: -1.2pt;
word-spacing: 2.2pt;
line-height: 130%;
text-indent: -25px;
}

#mCont h1.coo span {
color: #20200e;
padding: 4px 8px 4px 8px;
}
#mCont h1.coo span:hover {
background: #dff3ff;
}
#mCont h1.coo span a {
color: #20200e;
background: none;
text-decoration: none;
}
#mCont h1.coo span a:hover {
color: #000000;
background: none;
}

.right-col {
float: right;
width: 220px;
padding: 10px;
}
.right-col ul, .right-col li {
margin: 0;
padding: 0;
list-style: none;
list-style-image: none;
}
.right-col ul {
padding: 7px;
margin: 50px 0 0 15px;
line-height: 160%;
background: #ffffff;
color: #323232;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
.right-col li {
margin: 0;
color: #454545;
padding: 10px 0 10px 27px;
text-align: left;
font-size: 10px;
font-weight: bold;
line-height: 1;
background: url(/v22/gfx/check.png) 3px 5px no-repeat;
font-family: helvetica;
}
.post .my_date { 
	padding: 3px 5px 3px 5px;
	display: inline-block;
	font-family: helvetica;
	font-weight: bold;
	border: 0;
	background: #eaeaea;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}

#new-top {
text-align: left;
}
#joe-designs {
float: right;
width: 104px;
}

#main { background: url(/v22/gfx/bg.jpg) no-repeat top center #333333 fixed; padding: 180px 0 0 0; }

#main-wrap {
width: 950px;
margin: 0 auto 0 auto;

background: #FFFFFF;
  
  -webkit-box-shadow: rgba(0, 0, 0, 0.0976562) 1px 0px 1px,
                      rgba(0, 0, 0, 0.046875) 1px -1px 0px,
                      rgba(0, 0, 0, 0.0976562) 0px 1px 0px,
                      rgba(0, 0, 0, 0.0976562) -1px 0px 1px,
                      rgba(0, 0, 0, 0.046875) -1px -1px 0px,
                      rgba(0, 0, 0, 0.148438) 0px 4px 4px;
  -moz-box-shadow: rgba(0, 0, 0, 0.0976562) 1px 0px 1px,
                   rgba(0, 0, 0, 0.046875) 1px -1px 0px,
                   rgba(0, 0, 0, 0.0976562) 0px 1px 0px,
                   rgba(0, 0, 0, 0.0976562) -1px 0px 1px,
                   rgba(0, 0, 0, 0.046875) -1px -1px 0px,
                   rgba(0, 0, 0, 0.148438) 0px 4px 4px;

}

#logo-top {
float: left;
width: 485px;
margin-right: 20px;
}
#social-networks {
	position: absolute; 
width: 134px;
height: 62px;
text-align: center;
margin: 0 0 0 0;
margin-left: 775px;
}
#social-networks ul {
list-style: none;
list-style-image: none;
padding: 0;
width: 122px;
margin: 0 auto 0 auto;
}
#social-networks li {
list-style: none;
list-style-image: none;
float: left;
width: 16px;
height: 16px;
padding: 2px;
margin: 0;
}

#commentForm h2, h2#countComments { font-family: alte-bold; font-size: 20px; text-transform: lowercase; }

.script_widget_nav { font-family: alte-bold; padding: 4px; margin: 0;
	color: #121212;
	padding: 6px;
	display: block;
	font-family: helvetica;
	font-weight: bold;
	border: 0;
	border-bottom: 1px solid #cccccc;
	background: #ffffff;
 }
.script_widget_nav:hover { background: #cccccc; color: #000000; }
.script_widget_nav:hover a { color: #000000; }
.script_widget_nav a { font-family: alte; font-size: 13px; color: #454545; text-decoration: none; }
.script_widget_nav .script_widget_comment_count { 
	padding: 2px 0 0 0;
display: block;
font-family: helvetica;
font-weight: normal;
color: #676767;
margin: 0;
font-size: 11px; }
.post .links { background: #eaeaea; padding: 10px; border-radius: 10px; -webkit-border-radius: 10px; -webkit-border-radius: 10px; }


#footer { padding: 30px 0 30px 0; background: #cccccc; margin-top: 15px; display: none; }
#footer .links { padding: 30px; }
#footer .links a { color: #454545; font-family: alte-bold; font-size: 15px; padding: 8px; }
#footer .links a:hover { color: #000000; }

.joe-card { width: 518px; height: 329px; background: url(/v22/gfx/joe-card.gif) no-repeat; }
.joe-card .inner { padding: 40px 0 0 100px; }

#download_count_wrap { margin: 0 0 20px 0; background: url(/v22/gfx/downloads.gif) no-repeat; height: 69px; width: 138px; display: none; }
#download_count_wrap .inner { padding: 5px 0 0 10px; font-size: 25px; font-family: alte-bold; font-weight: bold; color: #000000; }


.rip-ie { display: none; }