/* redifined tags: */
body{
  background-image: url("../images/main_bg.png");
  background-repeat: repeat-x;
  background-color: #c3c3c3;
  margin: 0;
  padding: 0;
  font-family: Verdana, Tahoma, sans-serif;
  font-size: 62.5%;
}

a{color: #00f;}

img{border: none;}

p{margin: 0.5em 0 1em 0; line-height: 1.3em;}

pre, code{font-family: "Courier New", Courier, monospace;}

    pre {
      font-size: 1.1em;
      line-height:1.5em;
      margin: 0;
      padding: 12px;
      background-color: #fff;
      width: 428px;
    }
        #columnRight pre {
          border: solid 1px #b3b3b3;
          margin-left: 16px;
        }


/* headings: */
h2,h3,h4{margin: 0.75em 0; position: relative;}
h1{margin-top: 0;}
    p + h1{margin-top: 1.5em;}

h1{font-size: 1.75em;}
h2{font-size: 1.5em;}
h3{font-size: 1.25em;}
h4{font-size: 1em;}


/* generic: */
.backgroundRed{
  background-color: #f00; 
  color: #fff;
  padding: 0.2em 0.5em;
  line-height: 1.5em;
}

.backgroundDarkGrey{
  background-color: #888;
  color: #fff;
  padding: 0.2em 0.5em;
  line-height: 1.5em;
}

.backgroundGeekInfo{
  background-color: #0f0; 
  color: #000;
  padding: 0.2em 0.5em;
  line-height: 1.5em;
}

.textDarkGrey{
  color: #888;
}
    .textDarkGrey a{
      color: #888;
    }

.selected{
  border: solid red 1px;
  padding: 0 0.5em;
}

.absoluteLeft{position:absolute; left:0;}
.absoluteRight{position:absolute; right:0;}


/* other: */
#header{
  background-image: url("../images/header_bg.gif");
  background-repeat: no-repeat;
  height: 194px;
}
    #spryteLogo{
      margin: 42px 0 0 36px;
    }

#banner{
  padding: 0 0 37px 37px;
}

#wrapper{
  background-image: url("../images/wrapper_bg.png");
  background-repeat: no-repeat;
  width: 960px;
}

.showHideButton{
  border-top: solid 1px #aaa;
  margin-top: 0.75em;
  padding-top: 0.75em;
  color: #00f;
  cursor: pointer;
  font-weight: bold;
  width: 100%;
  display: block;
}

    p .showHideButton{
      padding: 0;
      margin: 0;
      text-align: left;
      border: none;
      display: none;
    }
    
    #columnAccordion .showHideButton{
      text-align: left;
    }
    
    #columnAccordion ul, #columnAccordion li{
      margin: 0;
      padding: 0 0.5em;
      list-style-type: none;
    }
        #columnAccordion .tutorialsList li{
          padding-bottom: 0.5em;
        }
        
        #columnAccordion .tutorialsList a{
          display: block;
          font-weight: bold;
          font-size: 1em;
        }
        #columnAccordion .commandList a{
          color: #f0f;
          font-family: "Courier New", Courier, monospace;
          font-size: 1.2em;
          font-weight: bold;
          letter-spacing: 0.08em;
          text-decoration: none;
        }
        #columnAccordion a:hover{
          text-decoration: underline;
        }
        
        #columnAccordion .selected{
          border: none;
        }
            #columnAccordion .selected a{
              color: #fff;
              text-decoration: none;
              background-color: #f00;
              padding: 0.2em 0.5em;
            }
    
    .showHideButton{
      text-decoration: none;
    }
    
    .showHideButton:hover{
      cursor: pointer;
      text-decoration: underline;
    }

#windowsDownload{
  margin-bottom: 1em;
  padding: 0 0 1.5em 72px;
  background-image: url(../images/icon_download.gif);
  background-repeat: no-repeat;
  color: #b3b3b3;
  border-bottom: solid 1px #b3b3b3;
  min-height: 60px;
  /* ie min-height hack: */
  height:auto !important;
  height:60px;
}

    #windowsDownload:hover, .windowsDownloadHover span, .windowsDownloadHover{ /* extra class selectors for IE6 :hover bug fix */
      background-position: 0 -536px;
      color: #f00;
    }
    
        #windowsDownload h2 a{
          text-decoration: none;
        }
        #windowsDownload h2 a:hover{
          color: #00f;
          text-decoration: underline;
         }
        
#columnsTemplate{
  
}
#columnsTemplateGallery{
  
}
#columnsTemplateReference{
}

    #columnNav, #columnLeft, #columnRight, #columnSingle, #columnAccordion{
      float: left;
      padding-left: 37px;
    }
    
        #columnNav ul, #columnNav li{
          margin: 0;
          padding: 0;
          list-style-type: none;
        }
        
        #columnSingle p, #columnLeft p, #columnsTemplateReference #columnRight p{
         font-size: 1.2em;
         line-height: 1.6em;
        }
        
        #columnNav{
          width: 160px;
          margin-bottom: 1.5em;
        }
            
            #columnNav img{
              margin: 0.1em 0;
            }
            
            .navSubTitle{
              padding-top: 2.5em;
            }
            
            /* columnNav selection states: */
            #columnNav .selected{
              padding-left: 0.5em;
              padding-top: 0.25em;
            }
            
            #columnNav a:hover{
              padding-left: 0.5em;
            }
        
        #columnLeft{
          width: 455px;
        }
        #columnsTemplateGallery #columnLeft, #columnsTemplateReference #columnRight{
          width: 486px;
        }
        
        #columnRight{
          width: 234px;
        }
        #columnsTemplateGallery #columnRight, #columnsTemplateReference #columnAccordion{
          width: 202px;
        }
        
            #columnRight h4{
              color: #888;
            }
            
            #columnRight .rectImageContainer + p, #columnRight pre + p,
            #columnRight .rectImageContainer + h2, #columnRight pre + h2{
              margin-top: 1.5em;
              padding-top: 1em;
              border-top: solid 1px #b3b3b3;
            }
            
            #columnRight ul{
              margin: 0;
              padding: 0;
              padding-right: 3em;
              list-style-type: none;
              float: left;
            }
            
                #columnRight li{
                  margin-bottom: 0.25em;
                }
            
            #columnRightTopCell{
              margin-bottom: 1em;
              padding: 0 0 1.5em 0;
              border-bottom: solid 1px #b3b3b3;
            }
        
        #columnSingle{ 
          width: 726px;
        }
        
            #columnSingle > p{ /* width as "#columnLeft" */
            width: 455px;
            }
        
        .columnOneThird{
          width: 202px;
          float: left;
          padding-right: 37px;
        }
        
            .columnOneThird ul{
              list-style-type: none;
              padding: 0;
              margin: 0;
            }
            
            .columnOneThird li{
              margin: 1em 0;
            }
            
                .columnOneThird li a{
                  display: block;
                  font-size: 1.2em;
                  margin-bottom: 0.25em;
                }

#footer{
  padding: 20px 37px;
  color: #888;
}
.cInfo{
  display: block;
  margin-top: 1em;
}
    #footer a, .cInfo{color: #888; text-decoration: none;}
    #footer a:hover, .cInfo:hover{color: #00f; text-decoration: underline;}

.newsArchive{
  color: #888;
}

    .newsArchive a{color: #888; text-decoration: none;}
    .newsArchive a:hover{color: #00f; text-decoration: underline;}

.pageNumbers{
  color: #00f;
  margin-top: 2.5em;
  margin-bottom: 1.25em;
}

/* slideIntro: */
#slideIntro{
  border: solid 1px #b3b3b3; 
  height: 812px; 
  width: 452px;
  overflow: hidden;
}

    #slideIntroContainer{
      height: 800px;
      width: 440px;
      position: relative;
      overflow: hidden;
      border: #fff solid 6px;
      margin-bottom: 1.5em;
    }
    
        #slideIntroImage{position: absolute;}
        
        #slideIntroControls{
          display: none;
          background-color: #fff;
          width: 438px;
          height: 12px;
          padding-right: 2px;
          border: #fff solid 6px;
          font-weight: bold;
          text-align: right;
          color: #b3b3b3;
        }
        
            #slideIntroPrevious, #slideIntroNext{
              cursor: pointer;
              color: #00f;
            }
            #slideIntroPrevious:hover, #slideIntroNext:hover{
              cursor: pointer;
              text-decoration: underline;
            }


/* framed images: */
.rectImageContainer{
  border: solid 1px #b3b3b3; 
  height: 212px; 
  width: 452px;
  margin-left: 16px;
  overflow: hidden;
}

    pre + .rectImageContainer{
      border-top: none;
    }

    .rectImage{
      border: #fff solid 6px;
    }
    
.sqrImageContainer{
  border: solid 1px #b3b3b3; 
  height: 212px; 
  width: 212px;
  overflow: hidden;
  float: left;
  margin: 0 6px 6px 0;
}

    .sqrImage{
      border: #fff solid 6px;
    }

/* gallery styles */
#gallery{
  background-color: #888;
  padding: 6px 0 0 6px;
  overflow: hidden;
  width: 480px; 
  float: left;
}

    #gallery .push{
      width: 100%;
      height: 0px;
      overflow: hidden;
    }
    
    #searchGalleryForm{
      font-size: 1.2em;
      margin-bottom: 1em; 
      padding: 10px 6px; 
      border: solid #b3b3b3;
      border-width: 1px 0;
      width: 188px;
    }
    
        #searchGalleryForm #artist_author, #searchGalleryForm #keywords{
          font-family: "Courier New", Courier, monospace;
          font-size: 1.2em;
          color: #00f;
          margin-bottom: 1em;
          border: solid 1px #b3b3b3;
          width: 185px;
          padding: 0;
        }
        
        #searchGalleryForm fieldset{
          padding: 0.25em 5px; 
          margin: 0;
          border: solid 1px #b3b3b3;
          width: 175px;
        }
        
            #searchGalleryForm fieldset legend{
              color: #b3b3b3;
            }

.thumbnailImageContainer{
  border: solid 1px #888; 
  height: 112px; 
  width: 112px;
  float: left;
  margin: 0 6px 6px 0;
}

    .thumbnailImage{
      border: #fff solid 6px;
    }
    
    .thumbnailImage:hover{
      border: #00f solid 6px;
    }
    
    .thumbnailImageSelected{
      background-color: #f00;
      padding: 6px;
    }
    
#fullImageContainer{
  padding-left: 1px; 
  padding-bottom: 6px;
}

    #fullImageContainer img{
      border: #fff solid 6px;
      float: left;
    }
    
        #fullImageInfo{
          background-color: white;
          padding: 6px;
          width: 460px;
        }