/*  Background color classes to be used in all pages and in the popups */
.colorstyle1 {background-color: #AAAAAA;}        /* the color of the window, side panels  */
.colorstyle2, #container, #header, #menu, #content, .popup, #colorbox, #cboxOverlay, #cboxPopUp, #cboxClose {background-color: #b9e5fe;}  /* the color of the centered content */

/* 	Basic font style classes centralized here - we want to limit the number of different styles sizes colors */
.textstyle1    {font-family:Comic Sans MS; font-weight:bold; font-size:36pt; color:#000000;}                         /* header main title */
.textstyle2    {font-family:Times New Roman; font-weight:bold; font-size:16pt; color:#000000;}                       /* header other text */
.textstyle3    {font-family:Times New Roman; font-size:16pt; color:#000000; link:#0000FF;}                           /*body style for all pages */
.textstyle4    {font-family:Times New Roman; font-size:14pt; color:#000000}                                          /* this is for the thumbnail captions */
.textstyle5    {font-family:Times New Roman; font-size:10pt; color:#000000}                                          /* this is for the "click any image to enlarge caption beneath showroom and homepage images */
.textstyle6    {font-family:Times New Roman; font-weight:bold; font-size:24pt; color:#000000; padding-left:10px;}    /* this is for the popup large caption */
.tmplh1        {line-height: 12pt;}                  /* this is used to space the thumbnail caption lines closer together  */
.tmplh2        {font-size: 6px; line-height: 6px;}   /* this is used in popup box to put distance between large caption and the popup image  */
.tmpstyle4     {color: #FF0000;}

/*  image size classes of specific images, or of thumbnails and detail images  */
.homet1     {border:0; width:409px;}
.homet2     {border:0; width:324px;}
.showt1     {border:0; height:182px; width:268px;}
.showt2     {border:0; height:207px; width:268px;}
.dirt1      {border:0; width:378px;}
.dirt2      {border:0; width:300px;}
.thumbnail  {border:0; height:175px; width:135px; border: 1px solid black;}
.fullsized  {border:0; height:533px; width:400px;}

/*  Positioning the major elements on the pages.  These elements have to be positioned relative, to support centering the page in the window.  Minor elements are to be positioned absolute within their respective containers, otherwise IE (and colorbox) may shove stuff around.  This happened particularly when using float:left for the minor elements.  */
body		   {margin:0px;}
#container     {width:1305px; height:100%;}                                         /*  NOTE:  There are other elements below dependent on this width - Look for them if you change this value here, change it for them as well */
#header        {position:relative; width:1305px; height:165px;}
#menu          {position:relative; width: 175px; height:750px; float:left;}         /*  style settings for menu button group are farther down in this file.  */
#menubtns      {position:relative; width: 175px; height:750px; float:left;}         /*  the child of #menu in all cases except in DumpMaker.html.  */
#coupon		   {position:absolute; bottom: 15px; left:  15px;}
#content       {position:relative; width:1130px; height:750px; float:left;}			/*  NOTE:  There are other elements below dependent on this width - Look for them if you change this value here, change it for them as well */
/* #content img {background:#ccc;padding:2px;border:2px solid gray;margin:0px;}   */

/*  Positioning the elements in the header.  These have to be positioned absolute, otherwise the colorbox function will shove stuff around, or IE will!!!  */
#headerimg01   {position:absolute; bottom: 15px; left:  15px;}    /* 8/2/14 = position moved to bottom of header area to accomodate new splash items*/
#headerimg02   {position:absolute; bottom: 15px; right: 15px;}    /* 8/2/14 = position moved to bottom of header area to accomodate new splash items*/
#newlocation1  {position:absolute; top: 55px; left:280px;}
#newlocation2  {position:absolute; top: 55px; left:923px;}
#splash1       {position:absolute; top: 10px; left:15px;}
#splash2       {position:absolute; top: 10px; right:15px;}
#headertxt01   {position:absolute; top:-5px; left:   0px; width:1300px;}
#headertxt02   {position:absolute; top: 66px; left:   0px; width:1300px;}
#headertxt03   {position:absolute; top:122px; left:   0px; width:1300px;}
#headerhr01    {position:absolute; top:140px; left:   5px; width:1294px;}

/*  Positioning the elements on the home page.  These have to be positioned absolute, otherwise the colorbox function will shove stuff around, or IE will!!!  */
#hometxt01     {position:absolute; width:1130px; left:  0px; top:  0px;}
#hometxt02     {position:absolute; width:1130px; left:  0px; top: 110px;}
#homeimg01     {position:absolute; width: 350px; left:  0px; top:200px;}
#homeimg02     {position:absolute; width: 430px; left:350px; top:200px;}
#homeimg03     {position:absolute; width: 350px; left:780px; top:200px;}
#hometxt03     {position:absolute; width:1130px; left:  0px; top:500px;}
#hometxt04     {position:absolute; width:1130px; left:  0px; top:535px;}

/*  Positioning the elements on the showroom page.  These have to be positioned absolute, otherwise the colorbox function will shove stuff around, or IE will!!!  */
#showtxt01     {position:absolute; width:1130px; left:  0px; top:  0px;}
#showimg01     {position:absolute; width: 280px; left:  5px; top:125px;}
#showimg02     {position:absolute; width: 280px; left:285px; top:125px;}
#showimg03     {position:absolute; width: 280px; left:565px; top:125px;}
#showimg04     {position:absolute; width: 280px; left:845px; top:125px;}
#showimg05     {position:absolute; width: 280px; left:  5px; top:325px;}
#showimg06     {position:absolute; width: 280px; left:285px; top:325px;}
#showimg07     {position:absolute; width: 280px; left:565px; top:325px;}
#showimg08     {position:absolute; width: 280px; left:845px; top:325px;}
#showtxt02     {position:absolute; width:1130px; left:  5px; top:535px;}

/*  Positioning of other elements     */
#aboutme01     {position:absolute; width:1130px; left:  5px; top:   0px;}
#directions01  {position:absolute; width: 405px; left:  0px; top: -10px;}
#directions02  {position:absolute; width: 320px; left:405px; top: -10px;}
#directions03  {position:absolute; width: 405px; left:725px; top: -10px;}
#directions04  {position:absolute; width:1130px; left:  0px; top:330px;}
#testing       {position:absolute; left:1650px;}
#search01      {position:absolute; top:0px; left:0px; width:1130px;}
#search02      {position:absolute; top:0px; left:0px; width:1130px;}

/*  Positioning the elements on the gridded pages.    */
.navbar		   {position:absolute; width:1130px; float:left; left:  0px; top:  0px;}
.thegrid	   {position:absolute; width:1130px; float:left; left:  0px; top: 20px;}
.popup		   {text-align:left; padding:10px; padding-top:20px; width:1090px; cursor:pointer; border: 1px solid; opacity:1; z-index:9999;}
.popup p       {margin-top:0 ; margin-bottom:0;}
.popup h2      {margin-top:10px; margin-bottom:10px}

/* this is for performing the dump to create alldata.html   */
.specialdump   {cursor:auto;}
.specialgrid   {position:absolute; width:1130px; float:left; left:  0px; top: 35px;}
.specialpopup  {text-align:left; padding:10px; padding-top:20px; width:1110px; cursor:auto; border: 1px solid; opacity:1; z-index:9999;}

/* detail popup box */
#temppage  {position:absolute; top:0px; left:5px; overflow:visible; display:none;}
#temppage:hover {cursor:pointer;}
#tempprtr  {position:absolute; cursor:pointer; top:0px; right:8px; width:25px; height:25px; z-index: 99; overflow:visible; color:#FFFFFF;}

#Close     {cursor:pointer; position:absolute; top:1px; left:450px; width:226px; height:25px; font-family:Comic Sans MS; font-weight:normal; font-size:20px; line-height:20px; color:#FF0000;}

/*  Menu Button Styles   note - IE doesn't use the gradient colors or other button stylings */
.gradientbuttons ul{                  /*  this block establishes attributes at the ul group level */
	padding: 0px 0px;                 /*  the first number is extra space above the first ul item, the second number is the left padding for the whole group */
	margin-left:8px;                  /*  this is like the padding added above, and the two numbers add together to control the horizontal positioning of the whole group */
	margin-top: 7px;                  /*  this is like the padding added above, and the two numbers add together to control the vertical positioning of the whole group */
	margin-bottom: 0px;               /*  this defines how much space is between the ul group and any content which follows */
	font: bold 22px Comic Sans MS;    /*  the actual font size below sets the font size, this value somehow establishes Line Height.  Be careful not to screw up rending in IE!!!  */
	list-style-type: none;
	text-align: center;}
.gradientbuttons li{display: inline; margin: 0;}
.gradientbuttons li a{                /*  this block establishes attributes at the li level */
	text-decoration: none;            /*  this is for underlining, strike-through, etc. */
	padding: 7px 5px;                 /*  the first number is extra space added above and below the text label, the second number is extra space added on each end of the text */
    margin-bottom: 8px;               /*  space to put in between each button if arranged vertically */ 
	margin-right: 3px;                /*  not sure how this one works */ 
	color: white;                     /*  this is the font color.  The font size is in the individual themes, below, as well as the base color */
	border: 2px solid gray;           /*  this is the border that rings the basic button  */
	float: left;                      /*  this determines where will the buttons align on the available page?  Keep this at "left"  */
	width: 145px;                     /*  how wide is the formatted button to be */
	background: -webkit-gradient(linear, center top, center bottom, from(#a4ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4));
   	border-radius: 8px;
	   box-shadow: 3px 3px 4px rgba(0,0,0,.5);
      -moz-border-radius: 8px; /* mozilla border radius */
      -moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* mozilla box shadow */
	background: -moz-linear-gradient(center top, #a4ccec, #72a6d4 25%, #3282c2 45%, #357cbd 85%, #72a6d4);
      -webkit-border-radius: 8px; /* webkit border radius */
      -webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* webkit box shadow */
	background: -webkit-gradient(linear, center top, center bottom, from(#a4ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4));}
.gradientbuttons li a:hover{color: blue;}       /* here is the floatover font color for the button */
.redtheme li a{font-size:18px;background: red;   /*  here is the button's actual text font size, and for IE browsers, a default background color since the color gradient cannot be rendered   */
   background: -moz-linear-gradient(center top, #f5795d, #e55e3f 25%, #d02700 45%, #e55e3f 85%, #f5795d);
   background: -webkit-gradient(linear, center top, center bottom, from(#f5795d), color-stop(25%, #e55e3f), color-stop(45%, #d02700), color-stop(85%, #e55e3f), to(#f5795d)); }