/* Main CSS Document for christian-coder.com 
   Author: Jeff Ludwig 
   Feel free to glean inspiration, as much inspiration as this document shows
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* Global style declarations
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
	
* {
	Border: 0;
	Padding: 0;
	Margin: 0; }


body {
	Font-Family: Verdana, Arial, Helvetica, sans-serif; 
	Font-Size: 14px;
	Margin: 7px auto 0; }
	
.blockCenter {
   	Text-Align: center;
	Margin: 0px auto;
    Padding: 0px; }
.centerText {
   	Text-Align: center;
	Float: none; }

	
.italicized { Font-Style: italic; }
.makeBold { Font-Weight: bold; }
.Red { Color: #ff0000; }
.Black { Color: #000000; }

.quote { Padding: 0 4em; }

acronym { Background: url(/images/templates/borders/acronym.png) repeat-x bottom; }
acronym:hover { Cursor: help; }


.Centered { 
	Margin-Left: auto !important;
	Margin-Right: auto !important;
	Float: none !important; }

.CenterYouTube { Width: 425px; Margin: 0 auto; Border: 2px solid #002288; }

.Right { 
	Margin: 5px 10px 5px 15px;
	Float: right; }
.Left { 
	Margin: 5px 15px 5px 10px;
	Float: left; }
	
	
hr { Width: 85%; }
	
a:link, a:visited { Text-Decoration: none; }
a:hover { Text-Decoration: underline; }
a:link img, a:visited img, a:hover img { Border: 0px none; }
 
img.morePic {
	Margin: 0 0 0 25px;
	Border: 0px none; }
img.favicon { Margin: 0 15px 0 0;
	Width: 16px;
	Height: 16px; }
img.smallicon { Margin: 0 5px 0 5px;
	Width: 16px;
	Height: 16px; }
img.emoticon { Margin: -2px 4px -2px 10px;
	Padding: 0;
	Width: 20px;
	Height: 20px; }

.compCommand { 
	Font-Size: 115%;
	Font-Family: "Courier New", Courier, mono; } 

.pagebreak { Display: none; }

.column_top, .column_bottom { Height: 16px; 
    Margin: 0;
	Padding: 0; }

#main { Clear: both; }


/* Masthead declarations
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#masthead {
    Clear: both;
	Color: #33ccff; 
	Padding: 0; }
	
#masthead img.Logo { 
	Margin: 8px 5px 0 0;
	Padding: 0;
	Float: right;
	Right: 4px; }
#masthead img.Desk { 
	Margin: 8px 0 0 5px;
	Padding: 0;
	Left: 4px; }
#masthead h1 { Position: absolute;
	Top: 110px;
	Left: 35%; 
	Font-Family: Helvetica, sans-serif; 
	Font-Size: 180%; }
#masthead h1.emphasize { Position: absolute;
	Top: 155px;
	Left: 40%; 
	Font-Size: 240%; }


/* Side Navigation declarations
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#sitenav { Clear: both; }


/* Columned area declarations
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#columns { Clear: both; 
	Margin: 1.2em 5px 5px 5px; }


/* Sidebar declarations
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

div#sidebar_container {
	Float: left;
	Width: 240px;
	Margin-Right: 10px;
}
div#sidebar h2 {
	Padding: 4px 2px; 
	Margin: 0 4px 5px; 
	Font-Size: 110%;
	Border-Top: 1px solid #66ccff;
	Border-Bottom: 1px solid #66ccff; }




/* Location bar declarations
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#location { 
	Text-Align: left; 
    Float: left;
	Width: 750px;
	Margin: 0 0 10px;
	Padding: 0;
	Border: #003399 solid 2px; }
	
#location ul { Display: inline; 
	Text-Align: left; 
	Padding: 0;
	Margin: 0; }
#location ul li { Display: inline;
	List-Style-Image: none;
	List-Style-Type: none;
	Font-Size: 110%;
	Font-Weight: bold;
	Text-Align: left;
	Margin: 0;
	Padding: 0 1em 0 1.6em; 
	Background: url(/images/templates/bullets/link.png) no-repeat 0px 6px; }
#location ul li.nobullet { Background: none !important; }
#location ul li a.sub { 
	Font-Weight: normal;
	Font-Size: 90%;
	Padding-Left: 1em; }

#location img.home { Margin: 0 0 0 2em;
	Padding: 0; }


/* Content window declarations
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#content_container {
/*	Margin-Left: 250px; */
    Float: left; 
	Width: 750px;
	Margin-Bottom: 10px;
/*	Border: #003399 solid 2px; */ }
	
#content {
/*	Margin-Left: 250px; */
	Width: 100%; 
	Margin: 0;
	Padding: 0; }
		
#content h1 {
	Padding: 0.2em 5px 0.5em 5px;
	Margin: 0 5px 0.5em;
	Border-Width: 0px;
	Border-Bottom: 1px solid #66ccff;
	Z-Index: 2;

	Font-Size: 140%;
	Letter-Spacing: 2px;
	Font-Variant: small-caps;
	Line-Height: 1.2; }
	  
#content h2 {
	Padding: 0.3em 12px 0.3em 12px;
	Margin: 0.45em 10px 0.4em;
	Border: 1px solid #66ccff;
	Border-Width: 1px 0;

	Font-Size: 120%;
	Letter-Spacing: 1px;
	Line-Height: 1.2; }
	
#content h3 {
	Padding: 0.75em 10px 0.4em 18px;
	Font-Size: 100%;
	Font-Weight: bold;
	Text-Align: justify;
	Line-Height: 1.25; }
	
#content p {
	Padding: 0 25px 0.75em 30px;
	Font-Size: 90%;
	Text-Align: justify;
	Line-Height: 1.75; }


/* This ensures that IE places the bottom corners correctly */

	#sidebar p.end { 
		Font-Size: 5%;
		Line-Height: .1; }
	#content p.end { 
		Font-Size: 5%;
		Line-Height: .1; }


#content .portfolio { 
  Width: 502px;
  Height: 482px;
  Padding: 0 124px 25px; 
  Text-Align: center;
  Overflow: hidden; }

#content div.testimonyAuthor {
	Padding: 0 25px 0.75em 30px;
	Font-Size: 90%;
	Line-Height: 1.75; 
   	Text-Align: right;
	Float: none; }


  /* Styles for the shadow/highlight title effect
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
	
  #content .shadowTitle h1 {
	  Margin: 0 5px 0em;
	  Position: relative;
	  Top: 0;
	  Left: 0; }

  #content .highlightTitle p {
	  Padding: 0 5px 0 5px;
	  Margin: 0 5px -0.3em;
	  Position: relative;
	  Top: -1.60em;
	  Left: 0.12em;
	  z-index: 6;

	  Font-Size: 140%;
	  Letter-Spacing: 2px;
	  Font-Weight: bold;
	  Font-Variant: small-caps;
	  Line-Height: 1.0; }
	


#content ul {
	Margin: 0 0 0.5em 0;
	Text-Align: justify;
	Line-Height: 1.75; }
#content li { 
	Margin: 0 30px 0 50px;
	Min-Height: 16px;
	Line-Height: 1.75;
	Font-Size: 80%; }
#content ul li a { Line-Height: 1.75em; }


/* Styles specifically for the theology page
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#content ul li.paper a { 
    Padding-Right: 10px;
    Text-Decoration: none; }
#content ul li.paper a.padRight { Padding-Right: 30px; }
#content ul li.paper { 
	Padding-Left: 20px;
	Background: url(/images/templates/bullets/link.png) no-repeat 0 7px; 
    List-Style: none;
	Margin: 0px 10px 0 35px; }
#content ul li.paper img.pdf { Margin: 0 8px 0 0;
	Height: 16px;
	Width: 16px; }
#content ul li.paper img.swf { Margin: 0 8px 0 5px;
	Height: 16px;
	Width: 16px; }


/* Styles specifically for my résumé
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#content table.resume { 
	Margin: 0.25em 0 0.5em 0; 
	Width: 100%; }
#content table.resume p { 
	Line-Height: 1.5;
	Padding-Bottom: 0;
	Margin-Bottom: 0; }
#content td.alignRight p, #content td.alignRight h3 { Text-Align: right; }
#content .resumeColumn1, #content .resumeColumn2 { Float: left; }
#content .resumeColumn1 { Width: 40%; }
#content .resumeColumn2 { Width: 25%; }
#content .resumeColumn2 ul li, #content .resumeColumn3 ul li { List-Style: none; }


/* Styles specifically for navigation forms
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#content form.nav p { Padding-Left: 40px; }
#content form.nav select { Margin: 0 10px; }
#content form.nav input { Margin: 0 10px; }
#content form.nav input:hover { Cursor: pointer; }


/* Footer window declarations
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#footer {
    Clear: both;
	Margin: 15px 5px; 
	Padding: 5px 20px;
	Word-Spacing: 0.5em; }


/* Styles div declarations
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

h2.styles { 
	Font-Size: 14px;
	Color: #ffffaa;
	Background: none;
	Width: 250px;
	Margin: 0.5em 15px 0.3em 0;
	Border: 0; }	
ul.styles { 
	Margin: 0;
	Padding: 0;
	Width: auto; }
ul.styles li { Display: inline;
	Padding: 3px 10px;
	Font-Size: 14px; 
	Color: #ffffaa;
	Border: 0; 
/*	Border: 1px solid #ffffaa; */ }