@charset "utf-8";
/* CSS Document */

body {
    margin: 0px; 
    border: 0px; 
    background-color: #ecebe4; 
    background-image: url(../images/bg_canvas.gif);
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    /*font-family: Verdana, Geneva, sans-serif;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-family: Georgia, serif;
    font-family: "Courier New", Courier, monospace;*/
}

img {
    margin: 0px;
    padding: 0px;
    border-width: 0px;
}

h1 {
    font-family: 'Shadows Into Light', cursive;
    font-size: 2.75em;
    margin: 0px; 
    margin-top: -18px;
    margin-bottom: 8px;
    padding: 0px;
    line-height: 1.25em;
}
h2 {
    font-family: 'Shadows Into Light', cursive;
}
h3 {
    font-family: 'Shadows Into Light', cursive;
}

.centerAlign {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.conditionalCenterAlign {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#minWidthBox {
    display: inline-block;
    padding: 20px;
    text-align: center;
}

#shadowBox {
    width: 100%;
    background-image: url(../images/header_bg_shadow.gif);
    background-position: top;
    background-repeat: repeat-x;
    overflow: hidden;
}

#loadingBox {
    
}
#loadingBox.loading {
    background-image: url(../images/loading_anim.gif);
    background-repeat: no-repeat;
    background-position: center 180px;
}

#outerBodyContainer {
    max-width: 1150px;
    margin-left: auto; 
    margin-right: auto;
    background-position: center top; 
    background-repeat: repeat-y;
    display: none;
    position: relative;
    background-position: center top;
    background-repeat: repeat-y;
    opacity: 0;
}
#opacityOverride #outerBodyContainer {
    /* When JavaScript is disabled, the page opacity has to start at 100% */
    opacity: 1;
}
#outerBodyContainer.fire {
    background-image: url(../images/body_bg_middle_fire.png); 
}
#outerBodyContainer.poison {
    background-image: url(../images/body_bg_middle_poison.png); 
}
#outerBodyContainer.illusion {
    background-image: url(../images/body_bg_middle_illusion.png); 
}
#outerBodyContainer.aegis {
    background-image: url(../images/body_bg_middle_aegis.png); 
}

#headerBackgroundBox {
    max-width: 818px; 
    margin-left: auto; 
    margin-right: auto;
    background-position: center top;
    background-repeat: no-repeat;
}
#headerBackgroundBox.fire {
    background-image: url(../images/body_bg_top_fire.gif); 
}
#headerBackgroundBox.poison {
    background-image: url(../images/body_bg_top_poison.gif); 
}
#headerBackgroundBox.illusion {
    background-image: url(../images/body_bg_top_illusion.gif); 
}
#headerBackgroundBox.aegis {
    background-image: url(../images/body_bg_top_aegis.gif); 
}

#innerBodyContainer {
    max-width: 768px;
    margin-left: auto; 
    margin-right: auto;
}

#footerBox {
    width: 100%;
    height: 134px;
    margin-left: auto; 
    margin-right: auto;
    background-position: center top;
    background-repeat: no-repeat;
    font-size: 0.9em;
    font-weight: bold;
}
#footerBox.fire {
    background-image: url(../images/body_bg_bottom_fire.gif); 
    color: #61788D;
}
#footerBox.poison {
    background-image: url(../images/body_bg_bottom_poison.gif); 
    color: #2d8b4F;
}
#footerBox.illusion {
    background-image: url(../images/body_bg_bottom_illusion.gif); 
    color: #b3a20F;
}
#footerBox.aegis {
    background-image: url(../images/body_bg_bottom_aegis.gif); 
    color: #A13531;
}

#footerContent {
    font-family: 'Shadows Into Light', cursive;
    margin-left: auto;
    margin-right: auto;
    max-width: 472px;
    padding-top: 88px;
    padding-left: 18px;
}

#logoBox {
    width: 250px; 
    height: 92px; 
    margin-left: 8px; 
    display: inline-block;
    float: left;
    background-position: center 10px;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
}
#logoBox.fire {
    background-image: url(../images/logo_fire.gif);
}
#logoBox.poison {
    background-image: url(../images/logo_poison.gif);
}
#logoBox.illusion {
    background-image: url(../images/logo_illusion.gif);
}
#logoBox.aegis {
    background-image: url(../images/logo_aegis.gif);
}

#headerSketchBox {
    position: absolute;
    top: 0px; 
    width: 100%; 
    height: 200px; 
    display: none;
    overflow: hidden;
    background-repeat: no-repeat;
    z-index: 12;
}
#headerSketchBox.fire {
    background-image: url(../images/headersketch_fire.gif); 
    background-position: center 25px;
}
#headerSketchBox.poison {
    background-image: url(../images/headersketch_poison.gif); 
    background-position: center 25px;
}
#headerSketchBox.illusion {
    background-image: url(../images/headersketch_illusion.gif); 
    background-position: center 25px;
}
#headerSketchBox.aegis {
    background-image: url(../images/headersketch_aegis.gif); 
    background-position: center 25px;
}

#homeLogoBox {
    position: absolute;
    top: 0px; 
    width: 250px;
    height: 82px;
    overflow: hidden;
    z-index: 15;
}

#menuBox {
    width: 300px;
    height: 68px;
    margin-right: 8px; 
    margin-top: 8px;
    float: right;
    text-align: right; 
    position: relative;
    z-index: 15;
}
#menuBoxMenu {
    list-style: none; 
    margin: 0px;
    padding: 0px;
    text-align: left;
}
#menuItemBox_home {
    display: inline-block; 
    width: 75px;
    height: 68px;
    margin: 0px;
    padding: 0px;
}
#menuItemBox_gallery {
    display: inline-block; 
    width: 75px;
    height: 68px;
    margin: 0px;
    padding: 0px;
}
#menuItemBox_projects {
    display: inline-block; 
    width: 75px;
    height: 68px;
    margin: 0px;
    padding: 0px;
}
#menuItemBox_about {
    display: inline-block; 
    width: 75px;
    height: 68px;
    margin: 0px;
    padding: 0px;
}
.menuButton {
    width: 100%; 
    height: 100%; 
    display: inline-block; 
    text-indent: -999999px;
}
.menuButton:hover {
    background-position: 0px 68px;
} 
.menuButton_home.fire {
    background-image: url('../images/menubtn_mini_home_fire.gif');
    /*background-position: 0px 0px; */
} 
.menuButton_gallery.fire {
    background-image: url('../images/menubtn_mini_gallery_fire.gif');
} 
.menuButton_projects.fire {
    background-image: url('../images/menubtn_mini_projects_fire.gif');
} 
.menuButton_about.fire {
    background-image: url('../images/menubtn_mini_about_fire.gif');
} 
.menuButton_home.poison {
    background-image: url('../images/menubtn_mini_home_poison.gif');
} 
.menuButton_gallery.poison {
    background-image: url('../images/menubtn_mini_gallery_poison.gif');
} 
.menuButton_projects.poison {
    background-image: url('../images/menubtn_mini_projects_poison.gif');
} 
.menuButton_about.poison {
    background-image: url('../images/menubtn_mini_about_poison.gif');
} 
.menuButton_home.illusion {
    background-image: url('../images/menubtn_mini_home_illusion.gif');
} 
.menuButton_gallery.illusion {
    background-image: url('../images/menubtn_mini_gallery_illusion.gif');
} 
.menuButton_projects.illusion {
    background-image: url('../images/menubtn_mini_projects_illusion.gif');
} 
.menuButton_about.illusion {
    background-image: url('../images/menubtn_mini_about_illusion.gif');
} 
.menuButton_home.aegis {
    background-image: url('../images/menubtn_mini_home_aegis.gif');
} 
.menuButton_gallery.aegis {
    background-image: url('../images/menubtn_mini_gallery_aegis.gif');
} 
.menuButton_projects.aegis {
    background-image: url('../images/menubtn_mini_projects_aegis.gif');
} 
.menuButton_about.aegis {
    background-image: url('../images/menubtn_mini_about_aegis.gif');
} 

#themeBox_small {
    width: 32px; 
    height: 60px; 
    background-position: top right;
    background-repeat: no-repeat; 
    margin-right: 4px; 
    float: right;
    display: block;
}
#themeBox_small:hover {
    background-position: right -60px;
}
#themeBox_small.fireBottle.fire {
    background-image: url('../images/selectorbtn_firebottle_fire.gif');
} 
#themeBox_small.poisonBottle.poison {
    background-image: url('../images/selectorbtn_poisonbottle_poison.gif');
} 
#themeBox_small.illusionBottle.illusion {
    background-image: url('../images/selectorbtn_illusionbottle_illusion.gif');
    background-position: 3px 0px;
} 
#themeBox_small.aegisBottle.aegis {
    background-image: url('../images/selectorbtn_aegisbottle_aegis.gif');
    background-position: 4px 0px;
} 

#themeBox_full {
    width: 108px; 
    height: 60px; 
    margin-right: 16px; 
    margin-top: 0px;
    float: right;
    display: none;
    position: relative;
    overflow: hidden;
    z-index: 15;
}
#themeBoxMenu {
    list-style: none; 
    margin: 0px;
    padding: 0px;
}
#themeSelectorBox_firebottle {
    display: inline-block; 
    width: 26px; 
    height: 60px; 
    margin: 0px;
    padding: 0px;
}
#themeSelectorBox_poisonbottle {
    display: inline-block; 
    width: 28px; 
    height: 60px; 
    margin: 0px;
    padding: 0px;
}
#themeSelectorBox_illusionbottle {
    display: inline-block; 
    width: 30px; 
    height: 60px; 
    margin: 0px;
    padding: 0px;
}
#themeSelectorBox_aegisbottle {
    display: inline-block; 
    width: 24px; 
    height: 60px; 
    margin: 0px;
    padding: 0px;
}

.themeSelectorLink {
    width: 100%; 
    height: 100%; 
    display: inline-block; 
    text-indent: -999999px;
    background-position: 0px 0px;
}
.themeSelectorLink:hover {
    background-position: 0px 60px;
}
#themeSelectorLink_firebottle.fire {
    background-image: url('../images/selectorbtn_firebottle_fire.gif');
}
#themeSelectorLink_poisonbottle.fire {
    background-image: url('../images/selectorbtn_poisonbottle_fire.gif');
}
#themeSelectorLink_illusionbottle.fire {
    background-image: url('../images/selectorbtn_illusionbottle_fire.gif');
}
#themeSelectorLink_aegisbottle.fire {
    background-image: url('../images/selectorbtn_aegisbottle_fire.gif');
}
#themeSelectorLink_firebottle.poison {
    background-image: url('../images/selectorbtn_firebottle_poison.gif');
}
#themeSelectorLink_poisonbottle.poison {
    background-image: url('../images/selectorbtn_poisonbottle_poison.gif');
}
#themeSelectorLink_illusionbottle.poison {
    background-image: url('../images/selectorbtn_illusionbottle_poison.gif');
}
#themeSelectorLink_aegisbottle.poison {
    background-image: url('../images/selectorbtn_aegisbottle_poison.gif');
}
#themeSelectorLink_firebottle.illusion {
    background-image: url('../images/selectorbtn_firebottle_illusion.gif');
}
#themeSelectorLink_poisonbottle.illusion {
    background-image: url('../images/selectorbtn_poisonbottle_illusion.gif');
}
#themeSelectorLink_illusionbottle.illusion {
    background-image: url('../images/selectorbtn_illusionbottle_illusion.gif');
}
#themeSelectorLink_aegisbottle.illusion {
    background-image: url('../images/selectorbtn_aegisbottle_illusion.gif');
}
#themeSelectorLink_firebottle.aegis {
    background-image: url('../images/selectorbtn_firebottle_aegis.gif');
}
#themeSelectorLink_poisonbottle.aegis {
    background-image: url('../images/selectorbtn_poisonbottle_aegis.gif');
}
#themeSelectorLink_illusionbottle.aegis {
    background-image: url('../images/selectorbtn_illusionbottle_aegis.gif');
}
#themeSelectorLink_aegisbottle.aegis {
    background-image: url('../images/selectorbtn_aegisbottle_aegis.gif');
}

#themeSelectorLink_cycler {
    width: 100%; 
    height: 100%; 
    display: inline-block; 
    text-indent: -999999px;
}

#bodyBox_withSymbol {
    clear: both; 
    min-height: 320px;
    margin-left: 16px; 
    margin-right: 16px;
    padding-right: 0px;
    position: relative;
}
/*#bodyBox_withoutSymbol {
    clear: both;
    min-height: 320px;
    margin-left: 16px; 
    margin-right: 16px;
    position: relative;
}*/

#symbolBox {
    width: 100%; 
    height: 300px; 
    position: absolute; 
    right: -55px;
    top: 60px; 
    background-position: top right; 
    background-repeat: no-repeat; 
    z-index: 0;
    display: none;
}
#symbolBox.fire {
    background-image: url(../images/symbol_fire.gif); 
}
#symbolBox.poison {
    background-image: url(../images/symbol_poison.gif); 
}
#symbolBox.illusion {
    background-image: url(../images/symbol_illusion.gif); 
}
#symbolBox.aegis {
    background-image: url(../images/symbol_aegis.gif); 
}

#mainBox {
    position: relative;
    z-index: 10;
}
#mainBox.fire {
    color: #404b36;
}
#mainBox.fire h1 {
    color: #4d5a41;
}
#mainBox.fire .headerUnderline {
    padding-bottom: 4px;
    background-image: url(../images/header_underline_fire_300.png);
    background-position: 0px 48px;
    background-repeat: no-repeat;
}
#mainBox.fire h2 {
    color: #404b36;
}
#mainBox.fire h3 {
    color: #404b36;
}
#mainBox.fire a:link {
    color: #d85b19;
    font-weight: bold;
}
#mainBox.fire a:visited {
    color: #d85b19;
}
#mainBox.fire a:hover {
    color: #b03d00;
    font-weight: bold;
}
#mainBox.poison {
    color: #2d4a49;
}
#mainBox.poison h1 {
    color: #385d5e;
}
#mainBox.poison .headerUnderline {
    padding-bottom: 4px;
    background-image: url(../images/header_underline_poison_300.png);
    background-position: 0px 48px;
    background-repeat: no-repeat;
}
#mainBox.poison h2 {
    color: #2d4a49;
}
#mainBox.poison h3 {
    color: #2d4a49;
}
#mainBox.poison a:link {
    color: #6d2da5;
    font-weight: bold;
}
#mainBox.poison a:visited {
    color: #6d2da5;
}
#mainBox.poison a:hover {
    color: #581198;
    font-weight: bold;
}
#mainBox.illusion {
    color: #50572e;
}
#mainBox.illusion h1 {
    color: #748326;
}
#mainBox.illusion .headerUnderline {
    padding-bottom: 4px;
    background-image: url(../images/header_underline_illusion_300.png);
    background-position: 0px 48px;
    background-repeat: no-repeat;
}
#mainBox.illusion h2 {
    color: #50572e;
}
#mainBox.illusion h3 {
    color: #50572e;
}
#mainBox.illusion a:link {
    color: #0e9080;
    font-weight: bold;
}
#mainBox.illusion a:visited {
    color: #0e9080;
}
#mainBox.illusion a:hover {
    color: #007a6b;
    font-weight: bold;
}
#mainBox.aegis {
    color: #54383a;
}
#mainBox.aegis h1 {
    color: #7e393e;
}
#mainBox.aegis .headerUnderline {
    padding-bottom: 4px;
    background-image: url(../images/header_underline_aegis_300.png);
    background-position: 0px 48px;
    background-repeat: no-repeat;
}
#mainBox.aegis h2 {
    color: #54383a;
}
#mainBox.aegis h3 {
    color: #54383a;
}
#mainBox.aegis a:link {
    color: #375f89;
    font-weight: bold;
}
#mainBox.aegis a:visited {
    color: #375f89;
}
#mainBox.aegis a:hover {
    color: #1f4976;
    font-weight: bold;
}

#aboutAvatar {
    width: 300px; 
    height: 350px; 
    float: right; 
    overflow: hidden;
    background-position: center 36px;
    background-repeat: no-repeat;
    position: relative;
    left: 12px;
}
#aboutAvatar.fire {
    background-image: url(../images/about_avatar_fire.gif);
}
#aboutAvatar.poison {
    background-image: url(../images/about_avatar_poison.gif);
}
#aboutAvatar.illusion {
    background-image: url(../images/about_avatar_illusion.gif);
}
#aboutAvatar.aegis {
    background-image: url(../images/about_avatar_aegis.gif);
}

#aboutContent_fire {
    display: none;
}
#aboutContent_fire.fire {
    display: block;
}
#aboutContent_poison {
    display: none;
}
#aboutContent_poison.poison {
    display: block;
}
#aboutContent_illusion {
    display: none;
}
#aboutContent_illusion.illusion {
    display: block;
}
#aboutContent_aegis {
    display: none;
}
#aboutContent_aegis.aegis {
    display: block;
}

.projectBox {
    max-width: 552px;
    height: 100px;
    margin-top: 16px;
    margin-left: auto;
    margin-right: auto;
    background-color: #FFFFFF;
    border: 4px solid #FFFFFF;
    overflow: hidden;
    box-shadow: 4px 2px 5px #666666;
}

.galleryThumbnailBox {
    display: inline-block;
    width: 72px;
    height: 72px;
    margin: 0px;
    margin-right: 12px;
    margin-bottom: 16px;
    background-color: #FFFFFF;
    border: 4px solid #FFFFFF;
    overflow: hidden;
    box-shadow: 4px 2px 5px #666666;
    position: relative;
}
.galleryThumbnailBox div {
    display: inline-block;
    position: absolute;
}

.newsTitle {
    margin-top: 18px;
    font-size: 1.25em;
    font-weight: bold;
}
.newsContent {
    
}
.newsDate {
    font-size: 0.8em;
}

.smallButton {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  /*font-family: Arial;*/
  padding: 2px 12px 2px 12px;
  text-decoration: none;
}

/* Maybe update so that only the theme selector and other significantly broken content is disabled below the minimum breakpoint */
@media all and (min-width: 320px) {
    #outerBodyContainer {
            display: block;
    }
    #minWidthBox {
            display: none;
    }
}
@media all and (min-width: 480px) {
    #menuBox {
        width: 434px;
        height: 48px; 
        margin-right: 16px;
    }
    #menuItemBox_home {
        width: 91px; 
        height: 48px;
    }
    #menuItemBox_gallery {
        width: 118px; 
        height: 48px;  
    }
    #menuItemBox_projects {
        width: 131px; 
        height: 48px; 
    }
    #menuItemBox_about {
        width: 94px; 
        height: 48px; 
    }
    .menuButton:hover {
        background-position: 0px 48px;
    } 
    .menuButton_home.fire {
        background-image: url('../images/menubtn_home_fire.gif');
    } 
    .menuButton_gallery.fire {
        background-image: url('../images/menubtn_gallery_fire.gif');
    } 
    .menuButton_projects.fire {
        background-image: url('../images/menubtn_projects_fire.gif'); 
    } 
    .menuButton_about.fire {
        background-image: url('../images/menubtn_about_fire.gif'); 
    } 
    .menuButton_home.poison {
        background-image: url('../images/menubtn_home_poison.gif');
    } 
    .menuButton_gallery.poison {
        background-image: url('../images/menubtn_gallery_poison.gif');
    } 
    .menuButton_projects.poison {
        background-image: url('../images/menubtn_projects_poison.gif'); 
    } 
    .menuButton_about.poison {
        background-image: url('../images/menubtn_about_poison.gif'); 
    } 
    .menuButton_home.illusion {
        background-image: url('../images/menubtn_home_illusion.gif');
    } 
    .menuButton_gallery.illusion {
        background-image: url('../images/menubtn_gallery_illusion.gif');
    } 
    .menuButton_projects.illusion {
        background-image: url('../images/menubtn_projects_illusion.gif'); 
    } 
    .menuButton_about.illusion {
        background-image: url('../images/menubtn_about_illusion.gif'); 
    }
    .menuButton_home.aegis {
        background-image: url('../images/menubtn_home_aegis.gif');
    } 
    .menuButton_gallery.aegis {
        background-image: url('../images/menubtn_gallery_aegis.gif');
    } 
    .menuButton_projects.aegis {
        background-image: url('../images/menubtn_projects_aegis.gif'); 
    } 
    .menuButton_about.aegis {
        background-image: url('../images/menubtn_about_aegis.gif'); 
    }
    
    #themeBox_small {
        display: none;
    }
    #themeBox_full {
        display: block;
    }
    /* Hide the symbol to free up real estate on smaller displays */
    #bodyBox_withSymbol {
        margin-right: 0px;
        padding-right: 132px;
    }       
    #symbolBox {
        display: block;
    }
    
    .conditionalCenterAlign {
        text-align: inherit;
    }
}
@media all and (min-width: 768px) {
    #headerSketchBox {
        display: block;
    }
    #themeBox_full {
        margin-right: 30px;
    }
}
@media all and (min-width: 812px) {
    #symbolBox {
        width: 1140px; 
        background-position: 642px 0px; 
        right: auto;
    }
}