body {
   font-family:  "Trebuchet MS", Verdana, Arial, Helvetica;

   font-size: 0.9em;
   margin: 0;
   padding: 0;
   color: #F6F3C0;


   background-color: #392518;   

   background-image: url('/images/bodyBackground.jpg');
   
 
   background-repeat: repeat-y;  
   text-align: justify;
   border: 0;
   
}

html * { 
   padding: 0; 
   margin: 0; 
}

a:link, a:visited, a:hover, a:active {
   text-decoration: none;
}

a:active {
   outline: none;
}

img{
   text-decoration: none;
   border: 0px;
}

.clearBoth {
   clear: both;
}

.clearLeft {
   clear: left;
}

#myBody, #myFooter {
	width: 1180px; /* 430+300+430 = 1160  */
	/*overflow:scroll;*/
	/*border: 1px solid red;*/
}

#mainLeft {
   width: 430px;
   float: left;
   
   color: #F7F2BF;
}

#mainMiddle {
   width: 300px;
   float: left;

   color: #640C0D;
   
   background: transparent url('/images/middleBackground.gif');   
   background-repeat: no-repeat;     
}

#mainRight {
   width: 430px;
   float: left;
   
   color: #D18658;;   
}

#mainLeft a:link {
   color: #DC6226;
}

#mainLeft a:hover {
   color: #DB6327;
   text-decoration: underline;

}

#mainLeft  a:visited {
   color: #DC6226;
   background: #520708;    
}

.leftSectionTitleContainer {

   font-size: 2em;
   font-weight: 700;
   margin: 5px 0px 10px 0px;
}

#blogSectionTitle, #archiveSectionTitle, #portfolioSectionTitle, #contactSectionTitle {
   width: 390px;
   height: 40px;
   text-align: right;
   margin: 0px 0px 0px 20px;   
}

#archiveSectionTitle {
   margin-top: 5px;
}

.aBlogContainer, .aBlogCommentsContainer, .aPortfolioContainer,  .aPortfolioButtonsContainer, .aMonthArchiveContainer, .contactContainer{
   width: 390px;
   margin: 0px 0px 0px 20px;
   
}

.aPortfolioContainer {
   margin: 50px 0px 0px 20px;
}

.aBlogTitle, .commentsTitle, .commentFormTitle, .aPortfolioTitle{
   font-size: 1.2em;

   margin: 5px 0px 0px 0px;   
}

.contactInfoAttribute {
   width: 30%;
   background-color: #520708;  
   text-align: right;
   padding: 2px 10px 0px 0px ;  
   float: left;
}

.contactInfoValue {

   width: 60%;
   text-align: left; 
   padding: 2px 0px 0px 10px;     
   float: left;
}

#commentFormTitle, .contactInfoTitle{

   margin: 5px 0px 0px 0px;

   font-size: 1.2em;
   border-bottom-style: solid; 
   border-bottom-color: #520708;
   
   border-bottom-width: 1px;
   
}

.contactInfoContainer {
   margin: 0px 0px 2px 0px;
}

.contactInfoTitle {
   margin-bottom: 20px;
}

.aBlogInfo {

   font-size: 0.7em;
   margin: 0px 0px 15px 0px;

   border-bottom-style: solid; 
   border-bottom-color: #520708;
   
   border-bottom-width: 1px;   
}

.aBlogInfoDate {
   float: left;
}

.aBlogInfoCommentsCount {
   float: right;   
}

.aPortfolioInfo, .aMonthArchiveInfo {

   font-size: 1.2em;

   border-bottom-style: solid; 
   border-bottom-color: #520708;
   
   border-bottom-width: 1px;   
}

.aMonthArchiveInfo {
   margin-top: 40px;
}

.aPortfolioInfo {
   margin: 0px 0px 15px 0px;
}

.aPortfolioInfoTitle {
   float: left;
}

.aPortfolioInfoDate {
   float: right;
}

.aBlogPreview, .aBlogPost, .aPortfolioPost{
  font-size: 0.9em;
}

div.aBlogPost p, div.aPortfolioPost p {
   padding: 0px 0px 20px 0px;  
}

.toolsUsed, .languagesUsed {
   margin: 0px 0px 10px 0px;
   font-size: 0.9em;
}

.toolsUsedTitle, .languagesUsedTitle {
   font-size: 1em;
   font-weight: 600;
}

.seeBasement {
   width: 390px;

   font-size: 1.2em;
   text-align: right;

   margin: 40px 0px 15px 20px;

   border-bottom-style: dotted; 
   border-bottom-color: #520708;
   
   border-bottom-width: 1px;    
}

.aMonthArchiveInfoTitle {

}
.archiveListingContainer {
  font-size: 1em;
}

.archiveListingLink {

   display: block;
}




.archiveListingTitle, .archiveListingTotalComments, .archiveListingPostDate {

}



.archiveListingTitle {
   margin: 0px 5px 0px 5px;  
   float: left;
   width: 300px;
}

.archiveListingTitle a:hover, .archiveListingTitle a:visited, .archiveListingTitle a:active{

   display: block;
   text-decoration: none;
}

.archiveListingPostDate {
   float: left;
   width: 20px;
   margin: 0px 20px 0px 0px;   
}

.archiveListingTotalComments {
   float: right;
   width: 20px;
   margin: 0px 0px 0px 20px;   
   text-align: right;
}

#submitCommentContainer, #contactFormContainer {

   padding: 90px 0px 0px 0px;  
   
   font-style: normal;
   font-size: 1em;

   color: #F7F2BF; 

}

.commentInfoContainer, .commentByMeInfoContainer, .commentPreviewTitle {
   font-size: 1em;
   margin: 0px 20px 0px 20px; 

   padding: 20px 0px 0px 0px;

   border-bottom-style: solid;   
 
   border-bottom-width: 1px;  
   
   border-bottom-color: #640C0D;
}

.commentPreviewTitle {
   font-weight: 600;
}

.commentInfoContainer {    

   border-bottom-color: #F6F3C0; 
}

.commentByMeInfoContainer {    

   border-bottom-color: #640C0D; 
}

.commentOdd, .commentEven, .commentByMe{
   margin: 0px 0px 0px 0px; 

}

.commentOdd {
     
   /*background-color: #520708;   */
}

.commentEven {
 
   /*background-color: #450101;   */
}

.commentByMe {
   background-color: #F8D66A;
   color:#640C0D;
   
}

.commentPreview {
   min-height: 20px;
   background-color: #520708;   
   margin: 20px 0px 0px 0px; 
   
}



.commentCounter, .commentByMeCounter {
   

   font-weight: 600;   

   padding: 0px 4px 0px 4px;
   background-color: #7B1D20;  
   float: left;
    
}

.commentCounter {

   padding: 0px 4px 0px 4px;
   background-color: #7B1D20;  
   float: left;
    
}  

.commentByMeCounter {
   color: #F8D66A;
}

.commentDate {
   padding: 0px 4px 0px 4px;
   font-style: normal;
   text-align: right;        

   float: right;
}


.commenterName {
   
   font-style: normal;
   font-weight: 600; 

   padding: 20px 2px 20px 0px;     
   
  
}

.commentText, .commentPreviewText {

   font-style: normal;

   text-align: justify;
   
   padding: 0px 20px 20px 20px;   

   font-size: 1em;
}

.said {
   font-style: normal;  
   padding: 0px 2px 0px 0px; 
}

.aBlogContinueReading {

   font-size: 1em;
   text-align: right;

   margin: 4px 0px 15px 0px;

   border-bottom-style: solid; 
   /*border-bottom-color: #F6F3C0; */
   border-bottom-color: #520708;
   
   border-bottom-width: 1px;    

}

#logoContainer {
   width: 300px;
   height: 300px;
   margin: 20px 0px 0px 0px;
   text-align: center;
}

#logo {
   width: 270px;
   height: 273px;
   margin: 50px 0px 0px 0px;
}

#buttonsContainer {
   margin: 20px 0px 0px 0px;
   width: 300px;
   height: 100px;
}


#portfolioNavContainer {

   margin: 0px 0px 0px 0px;
   width: 145px;
   height: 60px;
   
   float: right;
}

ul#nav { 
 
   width: 145px; 
   height: 18px; 
   margin:10px 0px 0px 100px;    

   
}

ul#portfolioNav{ 
 
   width: 145px; 
   height: 18px; 
   margin:10px 0px 0px 0px;    

 
}


ul#nav li, ul#portfolioNav li{ 
   padding:0; 
   margin: 8px 0px 0px 0px; 
   list-style-type:none; 
   text-indent:-9999px; 
}


ul#nav li a, ul#portfolioNav li a {
   width: 145px; 
   height: 18px;
   border:0; 
   text-decoration:none; 
   display:block; 

}

li#aboutButton a { 
   background: transparent url('/images/aboutButton.gif') no-repeat; 
} 

li#portfolioButton a { 
   background: transparent url('/images/portfolioButton.gif') no-repeat; 
} 

li#archiveButton a { 
   background: transparent url('/images/archiveButton.gif') no-repeat; 
} 

li#contactButton a { 
   background: transparent url('/images/contactButton.gif') no-repeat; 
} 

li#identityButton a, li#identityButton a:visited{

   background: transparent url('/images/identityButton.gif') no-repeat; 
}


li#webButton a, li#webButton a:visited{

   background: transparent url('/images/webButton.gif') no-repeat; 
}


ul#nav li a:hover, ul#portfolioNav li a:hover{

   background-position: -145px 0px;
}

/* for active pages - thanks veerle  */

body#homePage      ul#nav li#aboutButton     a,
body#portfolioPage ul#nav li#portfolioButton a,
body#archivePage   ul#nav li#archiveButton   a,
body#contactPage   ul#nav li#contactButton   a { 

   background-position: -145px;
}



.middleSectionTitleContainer {

   font-size: 2em;
   font-weight: 700;
   margin: 40px 0px 10px 20px;   

}

.middleSectionTitle {
   width: 260px;
   height: 40px;

  
}


#middleAboutTitle, #middleWebTitle, #middleRecentWorkTitle {
   text-align: right;
   color: #640C0D;
}



.middleContentContainer {
   width: 260px;
   margin: 0px 0px 0px 20px;

   font-size: 1em; 
}


.middleContentContainer a:link {
   color: #DC6226;
   padding: 0px 4px 0px 4px; 
}

.middleContentContainer a:hover {
   color: #DB6327;
   text-decoration: underline;
   padding: 0px 4px 0px 4px;   
}

.middleContentContainer  a:visited {
   color: #DC6226;
   background: #F8D66A;
        
}


.aPortfolioItem {
   width: 260px;
   
   margin: 20px 0px 50px 20px;
}


.portfolioThumbContainer {

   width: 220px;
   margin: 0px 0px 4px 0px;   
}

.portfolioListingContainer {

   width: 380px;
   margin: 0px 0px 4px 0px;   
   

}


.portfolioThumb  {


   border-style: solid;
   border-color: #F8D66A;
   border-width: 4px;
}

.portfolioListing {

    width: 380px;
    height: 110px;
    
   border-style: solid;
   border-color: #520708;
   border-width: 5px;    

}


.portfolioListingLogo {

    width: 380px;
    height: 200px;
    
   border-style: solid;
   border-color: #520708;
   border-width: 5px;    

}


.portfolioInfoA  {
   width: 220px;
   text-align: left;

}


.portfolioInfoB  {
   width: 220px;
   text-align: right;
}

.portfolioItemDesc {
     

}

.portfolioItemTitleSummary {
   width: 0.8em;
   font-weight: 600;
}

.portfolioItemLink {
  

}


.rightSectionTitleContainer {

   font-size: 2em;
   font-weight: 700;
   margin: 20px 0px 10px 0px;
}



.rightSectionTitleContainer {

   font-size: 2em;
   font-weight: 700;
   margin: 20px 0px 10px 0px;
}



.rightSectionContentContainer {
   width: 390px;
   margin: 0px 0px 0px 20px;
}

.submitButtonContainer {


}

.contactResult {
   
   margin: 20px 0px 0px 0px; 
   
}

#contactResultText {
   font-size: 1em;
   font-style: italic;
   margin:0px 0px 20px 0px;

}
.requiredField {
   font-style: italic;
   margin:0px 0px 20px 0px;

}

.requiredFieldAsterisk {
   font-style: italic;
   font-size: 1.6em;
   color: #DC6226;
   margin:0px 0px 20px 0px;

}
.formButton { 
   margin:10px 0px 0px 0px;
   background-color: #520708;
   border-color: #F7F2BF;
   border-width: 1px;
       
   font-weight: 300;
   
   color: #DC6226; 
}

.formCheckbox {

background-color: #F7F2BF ;
}

.formCheckboxContainer {
   margin:10px 0px 0px 0px;
}
.formTextField, .formTextAreaField, .formLabel{
   width: 300px;
   margin:0px 0px 0px 0px;
   
   border-color: #ffe6b8;
   border-width: 1px;
  
}


.formTextField {
   background-color: #F7F2BF !important ;
   color: #640C0D;
   margin-bottom: 10px;   
}
.formTextAreaField{
   
   background-color: #F7F2BF !important ;
   border-color: #ffe6b8;
   border-width: 1px;
   
   color: #640C0D;

}

.captchaContainer {
  
}

.formLabel{
   
   text-align: left;
   border-width: 0px;
   
}

.lastFMCaption, .bookmarkCaption {
   text-align: left;
   padding: 20px 0px 10px 0px;
   font-size: 1.2em;

}


.rightLinkContainer{
   font-size: 1em;    
   border-bottom-style: dotted; 
   border-bottom-color: #291504;
   border-bottom-width: 1px;    
}

.clearRight {
  clear: right;
}

.rightLink, .rightLink:hover {
   padding: 2px 0px 0px 0px;
   display: block;
   color: #DC6226;
}

.rightLink:hover, span.rightLinkItem:hover {
   background-color: #291504;
   color: #F8D66A;
}

.rightLinkItem {
   float: right;
   cursor: hand;
}


.flickrContainer {
 width:400px;
 margin-left: 30px;
}

.flickrThumbLink {
   margin: auto;

}

.flickrThumbImage {
  margin: auto;
  border: 6px solid #291504;
}

.flickrThumbDiv {
   height:87px;
   width:87px;
   margin: 1px;
   text-align:center;
   vertical-align:middle;
   background-color: #291504;
   float: left;
}

  #FormContact {
   	padding-left:20px;
  }


#myFooter{
   width: 1160px;
   text-align: center;
   margin: 0px 0px 0px 0px;
   color: #640C0D;
   font-size: 1em;
}

#myFooterContent {
   padding: 40px 0px 30px 0px;
}
body{ margin: 0; padding: 0; }