﻿
/* Sets box sizing: width = border + padding + element   */
*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
} 

/*-- Site layout ------------------------------------------*/
    HTML, BODY { margin:0; padding:0; height:100%; }
    form { margin:0; padding:0; }
    BODY  { 
        background: #F5F5F5 url(../Pix/Layout/surface.png) repeat fixed;  
        font-family: Verdana; 
        font-size: 12pt; 
        color:#333333;   
     } 
    INPUT { font-family:Verdana; font-size:1rem; }
    
    #IG-Body  { min-height:100%; width:100%; padding-bottom:140px; /*    For footer position */ 
                position:relative; /* For absolute children */
                z-index:1; /* For photo shadows */
                background: transparent url(../Pix/Layout/Nav.png) repeat-x scroll top;  }

    /*-- Footer --*/
    #IG-Footer   { height:120px; position:absolute; bottom:0; width:100%; margin:0; padding:0;     
                   background-color:#CECCC4; 
                   background-image:url(../pix/layout/footer.png);
                   box-shadow: inset 0 20px 20px -20px rgba(119, 119, 119, 0.33); 
                    }
    #IG-Footer P { max-width:750px; padding:16px 0 16px 0; color:#666666; font-family:Verdana; font-size:.8rem; text-align:center;  }
    #IG-Footer A { color:#666666; text-decoration:none; border:none; font-weight:bold;  }
    #IG-Footer A:Hover { color:#666666; text-decoration:underline; }


    /*-- Site navigation --*/
    NAV { display:inline; }
    #IG-Nav { width:750px;  margin:0 auto 0 0; color:#666666; } /* Not responsive! */

    #IG-Nav IMG { vertical-align:top; padding-right:16px; border:none; } 
    #IG-Nav UL { list-style:none; display:inline-block; margin:0; padding:0; 
                 background: transparent url(../Pix/Layout/Nav_div.png) no-repeat right 8px; }
    #IG-Nav UL LI  {
        display:inline-block; 
        height:32px; 
        padding:4px 12px 0px 12px; margin:0;
        text-align:center; vertical-align:middle; 
        font-family:'Source Sans Pro'; font-size:1rem; line-height:.9rem;
        background: transparent url(../Pix/Layout/Nav_div.png) no-repeat left 8px; }
    #IG-Nav  A { color:inherit; border:none; }
    #IG-Nav UL LI:nth-child(1) {  padding-top:.7rem;  }  /* Forums link */
    
    /*-- Page Layout --*/
    #IG-Page { max-width:728px; margin:0px auto 0px 16px;   }

    /*-- Peep --*/    
    #IG-Peep { display:none;  /* margin-top:-6px; text-align:right; font-family:'Source Sans Pro'; font-size:.9rem; font-weight:bold; color:#666666; */ }
    #IG-Peep IMG { vertical-align:top; border:none; /* padding-right:4px; */ } 
    /* #IG-Peep IMG:nth-child(3) { margin-top:-8px; } */
    #IG-Peep A { color:#666666; border:none; }
    #IG-Peep .Badge  { color:#ffffff; border-color:#ffffff; }
    #IG-Peep A.Button { border-color: #c0c0c0;}
    #IG-Peep IMG { vertical-align:middle; }
    #IG-Login { float:right;  }
    
    /*-- Crumbs --*/
    #IG-Crumb  {
        /*border: solid 1px #ececec;   background-size: auto 30px;  background-repeat:repeat-x; background-image: -ms-linear-gradient(top, #EFEFEF 0%, #FFFFFF 100%); background-image: -moz-linear-gradient(top, #EFEFEF 0%, #FFFFFF 100%); background-image: -o-linear-gradient(top, #EFEFEF 0%, #FFFFFF 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EFEFEF), color-stop(1, #FFFFFF)); background-image: -webkit-linear-gradient(top, #EFEFEF 0%, #FFFFFF 100%); background-image: linear-gradient(to bottom, #EFEFEF 0%, #FFFFFF 100%);  */
        padding:16px 0 16px 0; margin:0; 
        font-family: Arial; font-size:.8rem; font-weight:bold; color:#666666;
    }
    #IG-Crumb  A { color:#666666; border-color:#666666; }
    
    
    /*-- Tabs (Navigation bar) --*/
    DIV.Tabs  {
        background-color:#ffffff; background-size: auto 30px;  background-repeat:repeat-x; background-image: -ms-linear-gradient(top, #EFEFEF 0%, #FFFFFF 100%); background-image: -moz-linear-gradient(top, #EFEFEF 0%, #FFFFFF 100%); background-image: -o-linear-gradient(top, #EFEFEF 0%, #FFFFFF 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EFEFEF), color-stop(1, #FFFFFF)); background-image: -webkit-linear-gradient(top, #EFEFEF 0%, #FFFFFF 100%); background-image: linear-gradient(to bottom, #EFEFEF 0%, #FFFFFF 100%); 
        padding:8px 0px 8px 8px; margin:0 0 0 0; 
        font-family: Verdana; font-size:.7rem; line-height:1.5rem; font-weight:bold; color:#666666;
        vertical-align:top; border:1px dotted #c1c1c1; border-bottom:1px solid #ececec; 
    }
    DIV.Tabs A { color:#666666; border-color:#666666; }
    DIV.Tabs A.Icon { display:inline-block; border:none; padding-left:18px; margin-right:24px; background-repeat:no-repeat; background-position:left center; min-width:55px;}

    DIV.Adsense { padding:8px 0; border:1px dotted #cccccc;  }
    
    DIV.Social { margin:4px 8px 0 0; float:right; }

    .Filter INPUT:nth-child(2) { display:none; }
    .Filter SELECT:nth-child(2) { display:none; }
 
     DIV.FloatRight { float:right; margin-left:16px; } /* Unfloated for mobile */
     DIV.FloatLeft { float:left; margin-right:16px; display:inline-block; }
     DIV.FloatLeft P, DIV.FloatRight P { text-align:center; font-size:.8rem; color:#666666; font-family:Verdana; line-height:normal; }
     
     .Bump { padding-top:0; margin-top:0; }
    .Clickme { cursor:pointer; }
    
    

    
/*-- Galley -----------------------------------------------*/
    #IG-Content {  max-width:1060px; } /* Contains Galley ads */
    #IG-Galley { width:316px; 
                 min-height:600px;
                 margin:300px 0 0 0px; padding:0 0 0 16px;
                 float:right; 
                 }
    #IG-Galley-300 { display:none; width:300px; height:600px; }
    #IG-Galley-160 { display:none; width:160px; height:600px;  }
    #IG-Galley-120 { display:none; width:120px; height:600px; }
    
    @media screen and (min-width : 1076px) { /* was: 1076px */
        #IG-Content {width:1060px;} #IG-Galley-300 { display:block; }    
    }  
    @media screen and (min-width: 920px) and (max-width:1059px) {
        #IG-Content { width:1060px; }
        #IG-Galley-160 { display:inline-block; }
    }  
    @media screen and (min-width: 864px) and (max-width:919px) {
        #IG-Content { width:1060px; }
        #IG-Galley-120 { display:block; }
    }
    @media screen and (max-width:863px) {
        #IG-Galley { display:none; }
    }                                                                            
/*-- Element Styles -----------------------------------------*/

    
    
    DIV.Article { line-height:1.4rem;  
                  background-color:#ffffff; 
                  border:1px dotted #c1c1c1;
                  padding:16px 60px; z-index:0; }
    
    DIV.Article P { font-size:1rem; padding-bottom:1rem;  }
    DIV.Article P.Intro { font-family:Georgia;  font-size: 1.3rem; line-height:1.8rem;   }
    DIV + P { padding-top:1rem; }
    

    

    BLOCKQUOTE { margin:12px auto; max-width:300px; font-family:'Source Sans Pro', Arial; line-height:normal; border:1px dotted #666666; padding:8px; font-size:1rem; font-weight:bold; display:table; }
    
    DT { margin:.5rem 0; font-weight:bold; line-height:normal;   }
    DD {  margin-left:1.5rem; margin-bottom:1rem;}

    DIV.Caption, P.Caption { font-size:.9rem; line-height:normal;  }

    .Highlight { background-color:#ffffcc; }
    

    DIV.Panel { font-size:.9rem; line-height:normal; display:inline-block; vertical-align:top;  margin:0 4px 4px 0; }

    .Form--Register SELECT:nth-child(6) { display:none; } 
    .Form--Register #ConfirmEmail { display:none; }
    
    
    
/*-- Form elements -----------------------------------------*/
    SELECT { margin-right:4px; }

            


 
  
/*-- Dropdowns ---------------------------------------------*/    
    .Dropdown { /* Contains dropdown, and styles the activating element */
        position: relative; /* Enable absolute positioning for children/pseudos */
        display:inline-block; 
        padding: 4px 20px 4px 0px ;
        cursor: pointer;
        font: bold .9rem 'Source Sans Pro', Verdana;
        line-height:1rem; 
    }
    .Dropdown--JustArrow { padding-right:0px; } 
    
    
    .Dropdown:after { content:url(../pix/icon/dropdown.png);   } /* DOWN triangle */
    .Dropdown.active:after { content:url(../pix/icon/dropdown-up.png);  } /* UP triangle */
    .Dropdown IMG { /* vertical-align:bottom; */ }
    .Dropdown  UL {
        /* Where */ z-index:99; /* On top of other content */ 
                    position: absolute;
                    top:100%; left: 0; /* Bottom of parent */
        /* Look */  /* width:150px;    */
                    margin:0; padding:0; 
                    list-style: none;
                    text-align:left;
                    border-left:1px solid #cccccc;
                    border-right:1px solid #B3B3B3;
                    border-bottom:1px solid #B3B3B3; 
                    font-weight:normal;
        /* Trans */ -webkit-transition: all 0.3s ease-out;
                    -moz-transition: all 0.3s ease-out;
                    -ms-transition: all 0.3s ease-out;
                    -o-transition: all 0.3s ease-out;
                    transition: all 0.3s ease-out;
        /* Hide */  opacity: 0; pointer-events: none;    
       /* Shadow */ -webkit-box-shadow: 8px 8px 8px rgba(170, 170, 170, 0.30);
                    -moz-box-shadow:    8px 8px 8px rgba(170, 170, 170, 0.30);
                    box-shadow:         8px 8px 8px rgba(170, 170, 170, 0.30);
    }
    .Dropdown--Right UL { left:auto; right:0; }
    .Dropdown--Peep UL { left:auto; right:30px;   }
    
    .Dropdown.active UL { opacity: 1; pointer-events: auto; }
    .Dropdown  UL LI  {
        margin:0; 
        padding:12px; 
        border-top:1px solid #cccccc;
        background-color: #ffffff;
        background: -moz-linear-gradient(top, #F7F7ED 0%, #FFFFFF 30%, #FFFFFF 70%, #F7F7ED 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F7F7ED), color-stop(30%,#FFFFFF), color-stop(70%,#FFFFFF), color-stop(100%,#F7F7ED));
        background: -webkit-linear-gradient(top, #F7F7ED 0%,#FFFFFF 30%,#FFFFFF 70%,#F7F7ED 100%);
        background: -o-linear-gradient(top, #F7F7ED 0%,#FFFFFF 30%,#FFFFFF 70%,#F7F7ED 100%);
        background: -ms-linear-gradient(top, #F7F7ED 0%,#FFFFFF 30%,#FFFFFF 70%,#F7F7ED 100%);
        background: linear-gradient(to bottom, #F7F7ED 0%,#FFFFFF 30%,#FFFFFF 70%,#F7F7ED 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7ED', endColorstr='#F7F7ED',GradientType=0 );
    }
    .Dropdown A { color:#666666; border:none; }
    .Dropdown A:before {  padding-right:8px; vertical-align:middle; }

    /* Dropdowns: No CSS3 support */
    .no-opacity .Dropdown UL, .no-pointerevents .Dropdown UL {
        display: none;
        opacity: 1; /* If opacity support but no pointer-events support */
        pointer-events: auto; /* If pointer-events support but no pointer-events support */
    }
    .no-opacity .Dropdown.active UL, .no-pointerevents .Dropdown.active UL { display: block; }

    .Dropdown--Icon { padding-top:6px; }
    .Dropdown--Icon:after { content:url(../pix/layout/menu.png); } /* Hamburger icon */
    .Dropdown--Icon.active:after { content:url(../pix/layout/menu.png);  } /* Prevent UP triangle */


/*-- Tables ------------------------------------------------*/
 


/*-- Avatar -- */
DIV.Avatar   {
    width:124px; max-width:124px; overflow:hidden; overflow-text:ellipsis; 
    text-align:center; 
    vertical-align:top;
    padding:16px; border:dotted 1px #cccccc;
    background: -moz-linear-gradient(top, #F7F7ED 0%, #ffffff 30%, #ffffff 70%, #F7F7ED 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F7F7ED), color-stop(30%,#ffffff), color-stop(70%,#ffffff), color-stop(100%,#F7F7ED));
    background: -webkit-linear-gradient(top, #F7F7ED 0%,#ffffff 30%,#ffffff 70%,#F7F7ED 100%);
    background: -o-linear-gradient(top, #F7F7ED 0%,#ffffff 30%,#ffffff 70%,#F7F7ED 100%);
    background: -ms-linear-gradient(top, #F7F7ED 0%,#ffffff 30%,#ffffff 70%,#F7F7ED 100%);
    background: linear-gradient(to bottom, #F7F7ED 0%,#ffffff 30%,#ffffff 70%,#F7F7ED 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7ED', endColorstr='#F7F7ED',GradientType=0 );
         }

    DIV.Avatar P { color:#999999; font-family:Arial;  font-size:8pt;  width:124px; overflow:hidden; overflow-text:ellipsis; padding:1px 0px 1px 0px; margin:0px;}
    DIV.Avatar P A { color:#999999; border-bottom:1px solid #999999; }
    DIV.Avatar P A:hover {  border-bottom:1px solid #999999; }
    DIV.Avatar DIV   { color:#999999; font-weight:bold; font-size:10pt; font-family: Arial;}
    DIV.Avatar DIV A { color:#999999; font-weight:bold; font-size:10pt; border:none;}
    DIV.Avatar DIV A:hover { border-bottom:1px solid #999999; }
    DIV.Avatar IMG { padding-top:4px; }

    DIV.Avatar--Inline { display:inline-block; margin-bottom:8px; min-height:200px; }

    DIV.Avatar2   {
     max-width:400px; overflow:hidden; overflow-text:ellipsis; 
    text-align:left; 
    vertical-align:top;
    margin:4px 0;
    padding:16px; border:dotted 1px #cccccc;
    background: -moz-linear-gradient(top, #F7F7ED 0%, #ffffff 30%, #ffffff 70%, #F7F7ED 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F7F7ED), color-stop(30%,#ffffff), color-stop(70%,#ffffff), color-stop(100%,#F7F7ED));
    background: -webkit-linear-gradient(top, #F7F7ED 0%,#ffffff 30%,#ffffff 70%,#F7F7ED 100%);
    background: -o-linear-gradient(top, #F7F7ED 0%,#ffffff 30%,#ffffff 70%,#F7F7ED 100%);
    background: -ms-linear-gradient(top, #F7F7ED 0%,#ffffff 30%,#ffffff 70%,#F7F7ED 100%);
    background: linear-gradient(to bottom, #F7F7ED 0%,#ffffff 30%,#ffffff 70%,#F7F7ED 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7ED', endColorstr='#F7F7ED',GradientType=0 );
         }
DIV.Avatar2 IMG { float:left; margin-right:8px; }

DIV.Avatar2 P  { width:150px; max-width:150px; overflow:hidden; text-overflow:ellipsis; display:inline-block; vertical-align:middle; }

DIV.Avatar2 A {
    font-family: Verdana;
    font-weight: bold;
    font-size:.9rem; line-height:normal;
    color: #999999;
    border-color:#999999;
    }
    
    DIV.CreditBox  {
        max-width:400px; overflow:hidden; overflow-text:ellipsis; 
        text-align:left; 
        vertical-align:top;
        margin:4px 0;
        padding:16px; border:dotted 1px #cccccc;
        background: -moz-linear-gradient(top, #F7F7ED 0%, #ffffff 30%, #ffffff 70%, #F7F7ED 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F7F7ED), color-stop(30%,#ffffff), color-stop(70%,#ffffff), color-stop(100%,#F7F7ED));
        background: -webkit-linear-gradient(top, #F7F7ED 0%,#ffffff 30%,#ffffff 70%,#F7F7ED 100%);
        background: -o-linear-gradient(top, #F7F7ED 0%,#ffffff 30%,#ffffff 70%,#F7F7ED 100%);
        background: -ms-linear-gradient(top, #F7F7ED 0%,#ffffff 30%,#ffffff 70%,#F7F7ED 100%);
        background: linear-gradient(to bottom, #F7F7ED 0%,#ffffff 30%,#ffffff 70%,#F7F7ED 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7ED', endColorstr='#F7F7ED',GradientType=0 );
    }    


/*-- Badge -------------------------------------------------*/
    .Badge {
        display:inline-block;
	    background: #ff3019; 
	    background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6+ */
	    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
	    background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
	    background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Opera 11.10+ */
	    background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* IE10+ */
	    background: linear-gradient(top, #ff3019 0%,#cf0404 100%); /* W3C */
	    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */
        border: 2px solid white;
        border-radius: 12px; 
        box-shadow: 1px 1px 1px #666666;
        color: #ffffff;
        font: normal 10pt Helvetica, Verdana, Tahoma;
        text-align: center;
        padding: 2px 6px 2px 6px;
    }
    .Badge:empty { display:none; }
    
    .Badge--Gray {
	    color: #e9e9e9; 
	    border: solid 1px #555;
	    background: #6e6e6e;
	    background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
	    background: -moz-linear-gradient(top,  #888,  #575757);
	    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
        }


    .Badge--Blue {
	    color: #d9eef7;
	    border: solid 1px #0076a3;
	    background: #0095cd;
	    background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
	    background: -moz-linear-gradient(top,  #00adee,  #0078a5);
	    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
    }


DIV.Avatar {  width:156px; max-width:156px; overflow:hidden; overflow-text:ellipsis; text-align:center;  

padding:16px; border:dotted 1px #cccccc;
                          
    background: -moz-linear-gradient(top, #F7F7ED 0%, #ffffff 30%, #ffffff 70%, #F7F7ED 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F7F7ED), color-stop(30%,#ffffff), color-stop(70%,#ffffff), color-stop(100%,#F7F7ED));
    background: -webkit-linear-gradient(top, #F7F7ED 0%,#ffffff 30%,#ffffff 70%,#F7F7ED 100%);
    background: -o-linear-gradient(top, #F7F7ED 0%,#ffffff 30%,#ffffff 70%,#F7F7ED 100%);
    background: -ms-linear-gradient(top, #F7F7ED 0%,#ffffff 30%,#ffffff 70%,#F7F7ED 100%);
    background: linear-gradient(to bottom, #F7F7ED 0%,#ffffff 30%,#ffffff 70%,#F7F7ED 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7ED', endColorstr='#F7F7ED',GradientType=0 );
                          
}     
DIV.Avatar P { line-height:normal;  color:#999999; font-family:Arial;  font-size:8pt;  width:124px; overflow:hidden; overflow-text:ellipsis; padding:1px 0px 1px 0px; margin:0px;}
DIV.Avatar P A { color:#999999; border-bottom:1px solid #999999; }
DIV.Avatar P A:hover {  border-bottom:1px solid #999999; }

DIV.Avatar DIV   { color:#999999; font-weight:bold; font-size:10pt; font-family: Arial;}
DIV.Avatar DIV A { color:#999999; font-weight:bold; font-size:10pt; border:none;}
DIV.Avatar DIV A:hover { border-bottom:1px solid #999999; }
DIV.Avatar IMG { padding-top:4px; }

DIV.Avatar--Credit { float:right; margin-left:16px; }
DIV.Avatar--Credit P.Credit { font-weight:bold; font-size:.8rem; color:#333333; }              


/*-- Pager --*/
#IG-Pager { padding:16px 8px 0px 8px; font-family:Verdana; color:#666666; font-size:10pt; }
#IG-Pager A { border: none; color:#666666; }
#IG-Pager INPUT { display:inline; }
#IG-Pager SELECT { font-size:10pt; color:#666666; }
#IG-NextPage { float:right; padding-top:8px; }


    
    /* Smiley pop-up div in PostForm */
    DIV.Smiley { position:absolute; top:35px; left:0px; width:140px; padding:2px; }
    DIV.Smiley1 { position:absolute; top:-80px; left:380px; width:200px;   padding:4px;
                 max-height:200px; overflow:auto; background-color:#F5F5F5;  }
                            

UL.Tippy  {  color: #666666; line-height:normal; font-size:10pt; margin:0px; padding:0px;  background-image:url(../pix/icon/info.png); list-style-type:none; background-repeat:no-repeat; background-position:0px 2px; }
UL.Tippy LI { margin:0px; padding:0px 0px 2px 20px;  }                         

UL.Tippy--Warn { background-image:url(../pix/icon/warn.png); }



/*-- Mobile ------------------------------------------------*/
.IG-Mobile { display:none; } /* BELOW styles it overrides */

 @media screen and (max-width:667px) { /* up to iPhone6 landscape */
        .IG-Mobile { display:inline-block; }
        #IG-Login { float:none; text-align:right; margin-bottom:8px; }
        #IG-Nav { display:inline; }
        #IG-Nav UL { display:none; }
        #IG-Nav IMG { padding-right:0px;  }
        #IG-Page { padding-left:4px; margin-left:0; }
        #IG-Peep { width:100%; }
        DIV.Form { padding-right:4px; }
        DIV.Article { padding:0 8px 8px 8px; margin:0; width:100%; min-width:100%; border:none; }
        DIV.FloatRight, DIV.FloatLeft { float:none; margin-left:auto; margin-right:auto; }
        DIV.Photo IMG { max-width:100%; }
        INPUT { max-width:100%; }
        .Dropdown UL { font-size:1.3rem; line-height:1.2rem; }
     

}    
