@charset "utf-8";

/* Import the font styles. */
@import url('css/typography.css');

/*
  Justise Theme:
    This is my personal theme that I developed from a design that came from ISRWDY.com.
	
*/

/*
    GLOBAL OVERRIDES
*/
HTML 	{ background : url('images/solidBg.gif'); } 
BODY 	{ background : url('images/bg.jpg') repeat-x; height : 100%; text-align : center; } 
A 	{ color : #003366; text-decoration : none; outline : none; } 
A:hover { color : #737373; } 

/* Layout Elements */
#wrapper { width : 975px; margin : 0 auto; text-align : left; border-top: 35px solid #272727; }
#content { position : relative; border-top : 10px solid #990000; }

/* Header Styles */ 
#header 		{ background : url('images/headerBG.jpg'); position: relative; height: 195px; } 
#header H1		{ background : url('images/headerLogo.png') no-repeat; position: absolute; top: 65px; left: 82px; width : 185px; height : 63px;} 
#header H1 SPAN 	{ display: none; }
#header H1 A 		{ width: 185px; height : 63px; display : block; }
#header .description 	{ display: none; }
#header UL 		{ color: #fff; text-transform: uppercase; position: absolute; top: 81px; right: 22px; width: 600px; } 
#header UL LI 		{ display: inline; float : right; margin : 0 0 0 5px; }
#header UL LI A 	{ color: #fff; background : #900 url('images/navHover.gif') repeat-x 0 2.9em; height: 29px; line-height: 29px; padding : 5px 13px;} 
#header UL LI A:hover 	{ background-position: 0 0; } 
#rss_link 		{ background : url('images/rssIcon.gif') no-repeat; color : #fff; position: absolute; top : -22px; right : 21px; height : 13px; width : 40px;}
#rss_link span 		{visibility: hidden; }

/* Footer styles */ 
#footer 	{ color : #fff; height : 172px; position: relative; margin : 0 0 10px 0;} 
#footer #copy 	{ text-transform : uppercase; position : absolute; text-transform : uppercase; bottom : 0; right : 0; } 
#footer a       { color: #fff; }

/* Posts Styles */ 
#all_posts 			{ background : #fff url(images/shadowVert.gif) repeat-y top right; margin : 0 291px 0 154px; padding : 12px 0 0 0; width : 530px; min-height : 600px; border-bottom : 10px solid #900;} 
#all_posts h2 a 		{ color: #000; }
#all_posts .meta 		{ background: #f5f5f5; padding: 0 0 0 .1em; }
#all_posts .meta strong 	{ color: #000; } 
#all_posts .meta strong a 	{ color: #000; text-decoration: underline; } 

.post 		{ border-bottom: 1px solid #e0e0e0;  margin: 0 0 35px 0;}
#all_posts_content 	{ margin : 0 30px 30px 20px; } 

.sub-page .meta a { color: #fff; }


/* Style elements inside the post content. */
.post-content 			{ margin: 17px 0 0 0; padding: 0; } 
.post-content p 		{ margin: 0 0 18px 0; }
.post-content UL 		{ margin: 0 0 5px 0;  } 
.post-content UL LI 		{ margin: 0 0 0 22px; list-style: inherit; *list-style-type: disc; /* For IE only as it doesn't inherit the reset property */} 
.post-content UL UL LI 		{ margin: 0 0 0 24px; *list-style-type: circle; }
.post-content UL UL UL LI 	{ *list-style-type: square; }
.post-content a 		{ text-decoration: underline; }
.post-content BLOCKQUOTE 	{ background: #eaeaea url(images/quoteStart.gif) no-repeat 10px 12px; padding: 15px 36px 2px 36px; margin: 0 0 12px 0;}
.post-content .alt BLOCKQUOTE	{ background: #fff url(images/quoteStart.gif) no-repeat 10px 12px;  }
.post-content IMG               { border: 1px solid silver; }
.post-content h4,
.post-content h3                { padding: 0 0 .5em 0; }
.post-content code.callout      { padding: .3em; margin: .5em; background: #eaeaea; border: 1px dashed silver; display: block;}

/* Button Styles */
.command-button 	{ background: #f5f5f5; color: #000; border: 1px solid #e0e0e0; border-bottom: 0px none;} 
.command-button:hover 	{ background: #f5f5f5; color: #000; }
.command-button 	{ height: 24px; cursor: pointer; padding: 6px; }

ul.button-list 		{  }
ul.button-list li 	{ display: block; width: 10em; background: #f5f5f5; border: 1px solid silver; margin: .3em; padding: 0 .3em; list-style-type: none; }
ul.button-list li a	{ text-decoration: none; }

a.disabled {  }
a.disabled:hover { cursor: default; }

/* Archive Styles */ 
#archive { background : #fff url(images/shadowVert.gif) repeat-y top right; } 
#archive h2 { background: url(images/categoryBG.gif) repeat-x; }
#archive { width : 154px; position : absolute; top : 0; left : 0; min-height : 400px; border-bottom : 10px solid #900; } 
#archive #archive_content { margin : 12px 20px 12px 12px; } 
#archive h2 { height: 31px; text-indent: 10px; } 
#archive ul { margin: 9px 5px 16px 5px; } 

/* Sidebar Styles */ 
#sidebar { background : #fff url(images/shadowVert.gif) repeat-y top right; }
#sidebar H2 { background: url(images/categoryBG.gif) repeat-x; } 
#sidebar { width : 291px; position : absolute; top : 0; right : 0; border-bottom : 10px solid #900; overflow: hidden; } 
#sidebar #sidebar_content { margin : 12px 20px 12px 12px; width: 259px; } 
#sidebar H2 { width: 239px; height: 31px; white-space:nowrap;  padding: 0 10px; display: block; }

/* Sidebar List Styles */
#sidebar_content ul { margin: 1em 0 1.5em 0; }
#sidebar_content ul li { list-style-type: square; margin: 0 0 0 2em; padding: 0 0 .8em 0;  }

/* Page Styles */ 
#page { background : #fff url(images/shadowVert.gif) repeat-y top right; border-bottom : 10px solid #900; min-height : 400px; padding: 0 30px 30px 30px; } 
#page .meta { position : absolute; top : -3.5em; right : 12px; } 
#page h2 { padding: 4px 0 0 0; height: 45px; } 
#page h2 a { color : #000; } 

.page .page-content H2, h3, h4, h5, h6  { padding: 0; margin: 0; height: auto; }


/* List Page Styles */
.sub-page-content { padding : 0 0 0 220px; margin : 0; position:relative; overflow: visible; } 
.sub-page-content .prev { background: #990000; color: #fff; border: 1px solid #e0e0e0; position: absolute; left: 220px; top: -42px; height: 24px; cursor: pointer; padding: 0 1em; line-height: 1.7em; } 
.sub-page-content .next { background: #990000; color: #fff; border: 1px solid #e0e0e0; position: absolute; right: 0; top: -42px; height: 24px; cursor: pointer; padding: 0 1em;  line-height: 1.7em; } 
.sub-page-content .prev a:hover,
.sub-page-content .next a:hover { color: #fff; }
.sub-page-content a.disabled { color: #e0e0e0; background: #f5f5f5; }
#page .sub-page-content H2, h3, h4, h5, h6  { height: auto; }

/* Comments */
#comments { border-top: 1px solid #e0e0e0; padding: 9px 0; }
#comment { width: 466px; }

.show_comments { text-align: center; line-height: 1.5em; text-decoration: none; margin: 20px 0 0 0; width: 100px; display: block; }
.inline-comments { border-top: 1px solid #e0e0e0; overflow: hidden;}
.inline-comments #comments { border-top: 0px none; visibility: hidden; }

/*
  Comment List:
    Comment List is the list of comments on a blog post.
*/
ol.commentlist li cite 	{ color: #990000; }
ol.commentlist li.alt 	{ background: #f1f1f1; }
ol.commentlist 		{ margin: .9em 0 .9em 0; }
ol.commentlist li 	{ position: relative; padding: 1.3em .6em 1.3em .3em; }
ol.commentlist img.avatar 		{ position: absolute; top: .3em; left: .3em; }
ol.commentlist small.commentmetadata 	{ position: absolute; top: 0; right: .3em;}
ol.commentlist span.citation 		{ position: absolute; top: 0; left: 3.7em; width: 19.3em; }
ol.commentlist p 			{ margin: 1em;}
ol.commentlist blockquote 		{ margin: 1em; }
/* Whaa???
#all_posts .post-content ol.commentlist li p { margin: 0 0 0 0; }
*/

/* Utility Class */
.ajax-loading { background: #ffffcc url('http://demos111.mootools.net/demos/Group/spinner.gif') no-repeat center; }
.ajax-loading {  height: 50px; }

/* Slideshow in the Sidebar */
ul.slideshow { position: absolute; }
ul.slideshow li.slide { visibility: hidden; position: absolute; top: 0; left: 0; }
ul.slideshow li.current {  }

/* Delicious Specific Styles */
#sidebar .panel-delicious { margin: 8px 0 0 10px; } 
#sidebar .delPost { margin-bottom: 9px; } 
#delicious_feed_widget { margin: 0 0 1.5em 0; }

/* Sub List Styles */ 
DL#list_nav { position: absolute; top: -7px; left: 0; width: 180px; } 
DL#list_nav DT { padding: 10px 0 4px 0; cursor: pointer; }
DL#list_nav DT.expanded { color: #990000; }
DL#list_nav DD { padding: 0 0 3px 10px; } 

/* Change the code styles a bit */
.post-content .igBar, .post-content li .igBar { margin: 1em 0 0 0; background: #990000; border: 1px solid #990000;}
.post-content .igBar a, .post-content li .igBar a { color: #e0e0e0; }
.post-content .igBar a:hover, .post-content li .igBar a:hover { color: #fff; }

/* List Styles */ 
#page DL#list_nav .disabled { display: none; }
/*
    We need to set the height for the list content because we want items to flow smoothly off the screen.
    We can't have it just flow to the height of the LI because the LI slides in.
*/
#page UL#list_content { height : 469px; width : 695px; overflow:hidden; position:relative; } 
#page UL#list_content LI { list-style-type : none; padding : 0 200px 0 0; margin : 0; overflow : hidden; /*height : 392px;*/ width : 495px; position : absolute; top : 0; left : 0; display : none; } 
#page UL#list_content LI.first { display: block; } 
#page UL#list_content LI P { margin: 0 0 20px 0; } 
#page UL#list_content .list-img { float: left; margin: 7px 20px 20px 0; width: 180px; -webkit-box-shadow: 2px 2px 4px #888; -moz-box-shadow: 2px 2px 4px #888; } 
#page UL#list_content H4 { margin: 0 0 20px 0; color: #900; } 
#page UL#list_content BR { display: none; } 
#page UL#list_content UL.more-info	{ background:#EAEAEA;  margin: 0; padding: 5px 0; position:absolute; top: 0; right: 0; width: 160px; height: auto;}
#page UL#list_content UL.more-info LI 	{ margin: 0; padding: 2px 9px; width: auto; height: auto; position:static; display:block; }
#page UL#list_content UL.more-info A 	{ display:block; }
#page UL#list_content UL.more-info STRONG { border-bottom: 1px solid #888; display: block; margin: 0 0 2px 0;}

/* Gallery Overloads */
#page.gallery UL#list_content { height : 600px; } 
#page.gallery UL#list_content .list-img { float: none; display: block; margin: 0 20px 20px 0; width: 350px; border: 1px solid #999; } 


/* Resume Specific */
#page .resume h2 { background: #e0e0e0; color: #000; }
#page .resume #objective ul li { list-style-type: disc; }
#contact UL { list-style-type: none;  }
.employer { position: relative; margin-top: 20px; margin-left: 50px; }
.employer H3 { position: relative; left: -30px; }
.employer H4 { display: none; }
.employer H3 A { float: right; font-size: 12px; }
.employer UL LI { padding: 2px 0; list-style-type: disc; }
.employer BLOCKQUOTE { margin: 10px; padding: 5px; clear: both; }
#references { margin: 0 0 0 40px; }
.employer H3 { font: 2.2em 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida', 'sans-serif'; }
.employer UL LI { font-size: 1.3em; }
.employer BLOCKQUOTE { font: 1.2em 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida', 'sans-serif'; }
.employer STRONG { font-size: 1.1em; } 
#page .resume #references { font-size: 1.3em; }
#page .resume h1 { position: absolute; top: 0; left: 220px; }
#page .resume h2 { padding: .3em; margin: 1.7em 0 .5em 0; }
#page .resume #objective ul li { margin: 0 0 0 3em; }
#page .resume #contact { position: absolute; right: 0; top: 0;  }
#page .resume #contact ul { width: 100%; margin-bottom: 1em; }
#page .resume #contact ul li { display: block; text-align: right; margin: 0 2em 0 0; }
#page .resume { padding: 6em 0 0 0; }
#page .resume #objective {  }
.job-tile { position: absolute; top: 0; left: -220px;  }
.job-tile img { max-width: 100px; max-height: 100px; border: 1px solid silver; -webkit-box-shadow: 2px 2px 4px #; -moz-box-shadow: 2px 2px 4px #333; }

