/*  InsightIndy.com

Starting from scratch, drawing on learning and other ss.*/

/*    Position and Dimension

      body
        home_body_div_outer -- centering
          home_body_div_inner -- presentation
            home_img image
            home_r
              home_r_top
                home_r_top_logo
                home_r_top_menu
              home_r_mid
                home_r_mid_content
              home_r_bot
                home_r_bot_footer

      rest
        rest_body_div_outer -- centering
          rest_body_div_inner -- presentation
            rest_top
            rest_mid
            rest_bot
              rest_r_bot_footer


I'm wondering if floats and absolute positioning can both provide flexible layouts.
The downside is that we have to control width w. positioning. But for relatively fixed layouts,
this doesn't need to be a problem. And,we can always have an absolutely positioned element
following in sequence.

Keys:
1.  Put a percentage rather than pixel amount for width and height.
2.  Use ems as font measurement.

    Position and Dimension

             */
html               {margin: 0 auto 0;
                    padding: 32px 0 32px;}

body               {margin: 0;
                    height: 100%;
                    width: 100%;
                    padding: 0;}

.home_body_div_outer,
.rest_body_div_outer    {position: relative;
                    width: 900px;
                    height: 500px;
                    margin: 0 auto;}

.rest_body_div_inner,
.home_body_div2_inner    {position: relative;
			              border: 1px solid white;
                    height: 100%;
                    width: 100%;}

.home_img_div      {position: absolute;
                    left: 15%;}

.home_img_div img  {width:  300px;
                    height: 500px;}

.home_r       {position: absolute;
                    left: 42%;
                    width: 57%;
                    margin: 0 10%;}

/*  Top (and I suppose all positioning directions) require px -- % doesn't work.  */

.home_r_top,
.rest_top          {position: absolute;
                    top: 0px;
                    height: 20%;
                    width: 100%;}

.home_r_top        {position: absolute;
		                margin: 20px 0;}

.rest_r_top        {position: absolute;
                    top: 0px;
		                margin: 20px 0;
                    left: 468px;}

.rest_r_top img    {z-index: 0;}

.home_r_mid,
.rest_mid,
.full_mid,
.full_mid_abs      {position: absolute;
                    top: 100px;
                    height: 60%;
		                left: 42%;}

.full_mid          {top: 125px;
                    left: 75px;}
/*    top: 110px;   */
/*  {margin-left: 2px; -- left justify}
background-image:url(http://vscwebgroup.smugmug.com/Sites/InsightIndy/IMA-Fairbanks/IMAFairbanksLRJPG46580018/1038932579_4CQgZ-L.jpg);
                      background-image:url("img/IMA_Fairbanks_LRJPG_46600012.jpg");
                      background-repeat: no-repeat;

*/
.full_mid_abs      {top: 70px;
                    left: -2px;
                      margin-left: 48px; }
/*Background image and slideshow are not registered. */

.full_mid_abs       {
                      margin-left: 0px;
                     width: 1000px;
                     height: 322px;}

.full_mid_abs p     {margin-bottom: 8px;
                     margin-left: 54px;}

.about_mid	       {margin: 30px 100px auto 0;}

.home_r_bot,
.rest_bot          {position: absolute;
                    top: 400px;
                    height: 20%;}

.rest_bot          {left: 42%;}


.home_r_top_logo,
.rest_r_top_logo     {float: left;
                      margin-top: -.65em;
                      width: 40%;
                      z-index: 10;
                      font-weight: normal;}

.home_r_top_logo     {margin-top: 2px;}

/*.home_r_top_logo     {background-image: url("InIn_Logo_01_263x114.gif");
                      background-repeat: no-repeat;
                      background-position: left top;}   */

.rest_r_top_logo     {margin-top: 2px;}

.home_r_top_menu     {float: right;
                      width: 55%;
                      letter-spacing: 0em;}

.rest_r_top_menu     {float: right;
                      width: 45%;
                      letter-spacing: 0em;}



/*    MENU    */



.home_r_top_menu ul,
.rest_r_top_menu ul     {display: block;
                         width: 300px;
                         margin: .4em 0 0 2em;
                         padding: 0;
                         list-style: none;}

.home_r_top_menu ul     {margin-left: -20px;}
.rest_r_top_menu ul     {margin-left: -39px;} /*  For FoxFire   */


.home_r_top_menu ul li,
.rest_r_top_menu ul li  {float: left;
                         margin: 0;
                         padding: 0 0.3em 0.4em 0.3em;
                         letter-spacing: 0em;}

.home_r_top_menu a,
.rest_r_top_menu a       {display: block;
                          padding: 0px 0px 0px 0;}


.home_r_top_menu a:link,
.home_r_top_menu a:visited,
.home_r_top_menu a:active,
.rest_r_top_menu a:link,
.rest_r_top_menu a:visited,
.rest_r_top_menu a:active     {text-decoration: none;}

.home_r_top_menu a:hover,
.rest_r_top_menu a:hover      {text-decoration: underline;}

.insightindy_home         a#lnk_home,
.insightindy_galleries    a#lnk_galleries,
.insightindy_about        a#lnk_about       {color: black;}


/*    COLORS    */

body                  {background-color: rgb (162, 157, 153);}

.rest_body_div_inner,
.rest_body_div_outer,
.home_body_div_inner,
.home_body_div_outer {background-color: #B6B1AD;}

body,
.rest_body_div,
.home_body_div,
.home_logo_obverse,
.rest_logo_obverse,
.rest_mid      {color: black;}

.rest_r_top_logo,
.home_r_top_logo,
.home_r_top_menu,
.home_r_top_menu ul li,
.home_r_top_menu ul li a,
.rest_r_top_menu,
.rest_r_top_menu ul li,
.rest_r_top_menu ul li a             {color: white;}


.home_logo_obverse,
.rest_logo_obverse    {display: block;
                       font-weight: bold;}
.home_logo_obverse    {margin: -.4em 0 0 1.25em;}
.rest_logo_obverse    {margin: -.6em 0 0 1.25em;}



/*  FONTS   */

/*  FONT-FAMILY */

/*    Initial   */

/*	Converting from ems to px. We only need to change the body font from 100% to 16px.
	Most other measurements fall into place -- since they are relative to the base font size.
	And, this should work fine for folks using the next larger font size as their default
	browser font, since most websites that change, reduce. They're use of the large font
	basically restores to 16px or thereabouts.

"trajan-pro-1","trajan-pro-2"
*/


body,
h1, h2, h3, h4, h5, h6,
p                    {font-family: "trajan-pro-1","trajan-pro-2", "Times New Roman", "Serif"}

/*  LATER             {font-family: Trajan, Verdana, Sans-Serif;}
Plus javascript.
was Arial, sans serif
*/

/*  FONT-SIZING   */

body                  {font-size: 16px;
                       line-height: 1.125em;}

h1                  {word-spacing: 0.05em; letter-spacing: 0em; line-height: 1.636em;}
h2, h3, h4, h5, h6  {word-spacing: 0em; letter-spacing: 0.02em;  }

h1      {font-size: 162.5%;     margin: .5em  0 1.25em  0; line-height: 163.6%;}
h2      {font-size: 137.5%;     margin: 1.3em 0 -.7em 0;  line-height: 163.6%;}
h3      {font-size: 112.5%;     margin: 1.25em 0 -.7em 0; line-height: 150%;}
h4      {font-size: 100%;       margin: 0.5em  0 -.7em 0; line-height: 140%;}
h5      {font-size: 87.55%;     margin: 0.25em 0 -.7em 0; line-height: 120%;}


.home_r_top_logo     {font-size: 120%; line-height: 120%;}
.rest_r_top_logo     {font-size: 195%; line-height: 195%;
                      font-weight: bold;}

.home_logo_obverse,
.rest_logo_obverse   {font-size: 100%; line-height: 100%;}


.home_r_top_menu     {font-size: 120%; line-height: 120%;}
.rest_r_top_menu     {font-size: 120%; line-height: 120%;}

.home_r_top_menu     {letter-spacing: .8px;}
.rest_r_top_menu     {letter-spacing: .4px;}

.home_r_bot,
.rest_bot           {margin-top: 3em;
                     font-size: 82%;
                     line-height: 80%;
                     letter-spacing: .02em;
                     color: black;}

.home_r_bot     {margin-top: 3.75em;}
.rest_bot_footer     {margin-top: 10px;
                      margin-left: 90px;}

.home_r_bot p,
.rest_bot p       {margin-top: 0em;}

.r_bot_last_p     {margin-top: -3em;}

.about_mid	  {font-style: normal;
               line-height: 20px;
		           letter-spacing: .1px;
		           word-spacing: 3px;
               font-size: 120%;
               margin-left: 90px;}
               
.about_r_mid   {font-style: normal;
               line-height: 20px;
		           letter-spacing: .1px;
		           word-spacing: 3px;
               font-size: 120%;
               margin-left: -216px;
               margin-right: 150px;
               margin-top: 50px;}
.about_r_mid a {color: black;}

.about_img_div  {margin-left: 8.5em;}

.gallery_title    {font-weight: bold;}

/*    IE6-8   */
.rest_r_top_logo        {margin-top: 0;
                         width: 196px;
                         height: 86px;
                         ;
                         }
/*.full_mid_abs     {background-image: url (../img/IMA_Fairbanks_LRJPG_46580011_PN.jpg);
                   background-repeat: no-repeat;
                   background-color: pink;}        */