/* Style sheet for all pages on the Appel Tile site */

/* Most positioning is accomplished via 'position: absolute;' with width and
   height specified in pixels and coordinates located by the upper left corner
   via 'top: yyy;' and 'left: xxx;'
*/


/* All pages use a master (width,height) of (800,600) */

/* All text is arial.  Note that the logo font in photoshop is castellar */

/* This is the color palette used in all styles

    page background - #F6F6F6
    standard site text - #212121
*/


/* The body background is the same off-white for all pages */
.indexbodybg { background-color: #F6F6F6; }

/* The div for the big logo on the index page */
.indexlogo { position: absolute; width: 800px; height: 320px; top: 0px; left: 0px; }

/* The big index logo image */
.indexlogoimage { width: 640px; height: 320px;
                  margin-top: auto; margin-bottom: auto;
                  margin-left: auto; margin-right: auto; }

/* This div draws a thin line on the 800 pixel righthand limit of the page */
.pageborder { position: absolute; width: 800px; height: 600px; top: 0px; left: 0px;
              border-color: #212121;
              border-right: 0px solid; border-left: 1px solid ; border-top: 1px solid; border-bottom: 0px solid; }

/* The div thqat carves out space for the flash movie object */
.tilemovie { position: absolute; width: 256px; height: 256px; top: 320px; left: 272px; }

/* We center the movie in the div we carved out */
#wildtile { position: absolute; width: 256px; height: 256px;
            margin-top: auto; margin-bottom: auto; margin-left: auto; margin-right: auto; }

/* Div for the enter site image */
.entersite { position: absolute; width: 272px; height: 64px; top: 385px; left: 528px; }

/* An image area for an image button to enter the site */
.enterbutton { width: 128px; height: 64px;
               margin-top: auto; margin-bottom: auto;
               margin-left: auto; margin-right: auto; }

/* Hide the border on href images */
.borderlesslink { border-style: none; }

/* This reserves space for a lefthand margin when centering the main content */
.leftmargin { position: absolute; width: 15%; height: 100%; top: 0; left: 0; }

/* Ditto for the right margin */
.rightmargin { position: absolute; width: 15%; height: 100%; top:0; left: 85%; }

/* This is the area that all the main content goes in and scales to the center of the page */
.main { position: absolute; width: 70%; height: 100%; top: 0; left: 15%;
        background-color: #F6F6F6; }

.centered { text-align: center; }

/* The div for the the logo and global nav */
.backsplash { position: absolute; width: 100%; height: 100%; top: 1%; left: 0; }

/* This is for the page logo image */
.backsplashimage{ width: 1024px; height: 400px; margin-left: auto; margin-right: auto; }

.imagemaptest { width: 400px; height: 48px; top: 300px; margin-left: auto; margin-right: auto; }

/* Every inside page has this logo area marked off */
.pagelogo { position: absolute; width: 800px; height: 72px; top: 12px; left: 0px; z-index: 1; }

/* The area for the page logo image */
.pagelogoimage { width: 800px; height: 72px;
                 margin-top: auto; margin-bottom: auto;
                 margin-left: auto; margin-right: auto; }

/* Every page has a amarquee photo in the top right */
.pagemarquee { position: absolute; width: 400px; height: 120px; top: 24px; left: 360px; z-index: 10; }

.marqueeimage { width: 400px; height: 105px;
                margin-top: auto; margin-bottom: auto;
                margin-left: auto; margin-right: auto; }


/* The area for the global nav menu bar */
.globalnavbar { position: absolute; width: 100%; height: 85px; top: 220px; left: 0px; }

.navbarimage { width: 1024px; height: 85px; margin-left: auto; margin-right: auto; }

/* The button areas equally spaced across the nav bar */
.navbutton1 { position: absolute; width: 132px; height: 48px; top: 0px; left: 4px; }
.navbutton2 { position: absolute; width: 132px; height: 48px; top: 0px; left: 136px; }
.navbutton3 { position: absolute; width: 132px; height: 48px; top: 0px; left: 268px; }
.navbutton4 { position: absolute; width: 132px; height: 48px; top: 0px; left: 400px; }
.navbutton5 { position: absolute; width: 132px; height: 48px; top: 0px; left: 532px; }
.navbutton6 { position: absolute; width: 132px; height: 48px; top: 0px; left: 664px; }

/* Every page has a title */
.pagetitle { position: absolute; width: 256px; height: 48px; top: 312px; left: 50%; }

/*The foprmat of the page title text */
.pagetitletext { color: #212121; text-align: center;
                 font-family: arial; font-size: 20pt; font-style: italic; }

/* The blurb at the top of every page */
.pageblurb { position: absolute; width: 600px; height: 200px; top: 368px; left: 30%; }

/* Most text on the site */
.blurbtext { color: #212121; text-align: left;
             font-family: arial; font-size: 14pt; }

.tileserviceslist { position: absolute; width 640px; height: 200px; top: 500px; left: 30%; }

/* Format for the lefthand column of services list items */
.tileserviceslistl { position: absolute; width: 320px; height: 200px; top: 500px; left: 30%; }

/* Format for the righthand column of services list items */
.tileserviceslistr { position: absolute; width: 320px; height: 200px; top: 500px; left: 60%; }

/* The format of the text in services lists */
.serviceslisttext { color: #212121; text-align: left;
                    font-family: arial; font-size: 12pt;
                    margin-left: 10px; margin-right: 10px;
                    margin-top: 12px; }

/* Holds the photo gallery category buttons */
.photocategories { position: absolute; width: 650px; height: 64px; top: 510px; left: 30%; }

.photocat1 { position: absolute; width: 128px; height: 64px; top: 0px; left: 64px; }

.photocat2 { position: absolute; width: 128px; height: 64px; top: 0px; left: 195px; }

.photocat3 { position: absolute; width: 128px; height: 64px; top: 0px; left: 327px; }

.photocat4 { position: absolute; width: 128px; height: 64px; top: 0px; left: 458px; }

.photocatbutton { border-style: none; width: 128px; height: 39px;
                  margin-top: auto; margin-bottom: auto; }

/* The div that holds all the rows of thumbs and can scroll */
.photothumbs { position: absolute; width: 812px; height: 364px; top: 564px; left: 20%;
               overflow: scroll; }
/* The divs that hold rows of image thumbnails for the gallery */
.photorow1 { position: absolute; width: 784px; height: 264px; top: 20px; left: 0px; }
.photorow2 { position: absolute; width: 784px; height: 264px; top: 1500px; left: 0px; }
.photorow3 { position: absolute; width: 784px; height: 264px; top: 3060px; left: 0px; }
.photorow4 { position: absolute; width: 784px; height: 264px; top: 3420px; left: 0px; }

.photorowtext { color: #212121; text-align:center;
                font-family: arial; font-size: 10pt;
                margin-bottom: auto; }

.phototextrow1 { position: absolute; width: 800px; height: 30px; top: 30px; left: 0px; }
.phototextrow2 { position: absolute; width: 800px; height: 30px; top: 360px; left: 0px; }
.phototextrow3 { position: absolute; width: 800px; height: 30px; top: 690px; left: 0px; }
.phototextrow4 { position: absolute; width: 800px; height: 30px; top: 1020px; left: 0px; }

.photocategory { position: absolute; width: 800px; height: 30px; top: 0px; left: 0px;
                 background-color: #212121 }

.categorytext { color: #F6F6F6; text-align: center; vertical-align: middle;
                font-family: arial; font-size: 14pt; font-style: bold;
                margin-top: 6px; margin-bottom: auto; }

.thumbimage { width: 256px; height: 256px; border-style: none; }

.thumb1row1 { position: absolute; width: 256px; height: 256px; top: 80px; left: 4px; }
.thumb1row2 { position: absolute; width: 256px; height: 256px; top: 420px; left: 4px; }
.thumb1row3 { position: absolute; width: 256px; height: 256px; top: 760px; left: 4px; }
.thumb1row4 { position: absolute; width: 256px; height: 256px; top: 1100px; left: 4px; }
.thumb2row1 { position: absolute; width: 256px; height: 256px; top: 80px; left: 268px; }
.thumb2row2 { position: absolute; width: 256px; height: 256px; top: 420px; left: 268px; }
.thumb2row3 { position: absolute; width: 256px; height: 256px; top: 760px; left: 268px; }
.thumb2row4 { position: absolute; width: 256px; height: 256px; top: 1100px; left: 268px; }
.thumb3row1 { position: absolute; width: 256px; height: 256px; top: 80px; left: 532px; }
.thumb3row2 { position: absolute; width: 256px; height: 256px; top: 420px; left: 532px; }
.thumb3row3 { position: absolute; width: 256px; height: 256px; top: 760px; left: 532px; }
.thumb3row4 { position: absolute; width: 256px; height: 256px; top: 1100px; left: 532px; }

.photoblurb { color: #212121; text-align: center;
              font-family: arial; font-size: 10pt; font-weight: bold;
              margin-left: 10px; margin-right: 10px; }