/*########################################
##########################################
====                                  ====
====            RESET                 ====
====                                  ====
##########################################
########################################*/
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,textarea,p,blockquote,th,td,hr,img {
      margin:                  0px;
      padding:                0px;
      border:                  0px;
      }
    table { 
      border-collapse:        collapse;
      border-spacing:          0; 
      }
    address,caption,cite,code,dfn,em,th,var { 
      font-style:              normal;
      font-weight:            normal; 
      } 
    ol,ul {
      list-style:              none;
      } 
    caption,th { 
      text-align:              left; 
      } 
    h1,h2,h3,h4,h5,h6 { 
      font-size:              100%;
      font-weight:            normal; 
      }
    em {
      font-style:              italic;
      }
    q:before,q:after { 
      content:                ''; 
      } 
    abbr,acronym { 
      border:                  0; 
      }
    


/*########################################
##########################################  Not for customization of content or cruft that needs tweaking!!!  
====                                  ====  Use this section for general purpose / utility classes
====     Miscellaneous                 ====  
====                                  ====
##########################################
########################################*/
    .hidden {
      position:                absolute;
      left:                    -10000px;
    }
    body {  /* Force the scrollbar to display in non IE browsers to prevent page jumpiness */
      /*overflow:                -moz-scrollbars-vertical; */
    }  
    
		html { /* Turn on scrollbars in browsers (required for Safari page jump) */
			overflow:						scroll;
			overflow-x:					hidden;
		}





/*########################################
##########################################
====                                  ====
====      Colors, Images, +  Type     ====
====                                  ====
##########################################
########################################*/



/*------------ General Typsetting
.... Overall spacing at parent typefaces should be dialed in here before
.... littering the CSS with unecessary classes or adjustments
-----------------------------------------------------*/
h1,h2,h3,h4,h5,h6,dt,label,fieldset,th {
  font-family:              "Avenir LT Std", "Avenir", Helvetica, Arial, sans-serif;
  color:                    #7C8085;
  margin:                    .05em .12em .06em .2em;
	font-size: 12pt;
  }
h1 { font-size: 3.20em; } 
h2 { font-size: 2.50em; }
h3 { font-size: 2.2em; }
h4 { font-size: 1.60em; }
h5 { font-size: 1.10em; }
h6 { font-size: 0.70em; }


body,p,ul,div,dd,form,textarea,blockquote,td,li {
  font-family:              Georgia, Times, "Times New Roman", serif;
  color:										#7C8085;
	font-size:							12pt;
  line-height:              1.3em;
  }

p,ul,dd,textarea,blockquote,li {
  margin:                    .05em .7em .06em .2em;
  }



/* General, "base" layer styles
---------------------------------------------------------------------------------*/
body {
  background-image:          url(/_assets/img/bg-y-repeatedr.jpg);
  background-position:      top center;
  background-repeat:        repeat-y;
  text-align:                center;
  }

a {
  color:                    #76A0B6;
  }
a:hover {
  text-decoration:          none;
  }
pre {
  font-family:              "Courier New", Courier, monospace;
  }


/* Main Content
-------------------------------------------------- */
#content {
  text-align:                left;
  background-color:          #fff;
  }



/* Content Header / Navigation
---------------------------------------------------------------------------------*/
#header { 												background:    #CCCCCC url(/_assets/img/header-bg-blue.jpg) no-repeat top center;
    }
#header .logo a {									background:    transparent url(/_assets/img/resonant-logo.png) no-repeat top left;
  }
#header .tagline a { 							background:    transparent url(/_assets/img/resonant-tagline.png) no-repeat top left;
    }


#text-column .column_headline {   background:    url(/_assets/img/grokit.png)  no-repeat bottom center;
  height:                 29px;
	width:									119px;
	}
#image-column .column_headline { background:      url(/_assets/img/seeit.png) no-repeat bottom center; 
  height:                 28px;
	width:									97px;
	}



#feature_list {
  clear:                    left;
  margin:                    0px 6px -10px 0px;
  }
#feature_list li.clientwork { 
  background:                transparent url(/_assets/img/feature_thumb_mask.png) no-repeat top left;
  margin:                    10px 0px 0px 0px;
  }
#feature_list li.clientwork a {
  opacity:                  .20;
  }
#feature_list li.selfpromotion { 
  margin:                    1px;
  }

#feature_list li.clientwork a:hover,
#feature_list li.selfpromotion a:hover{
  filter:                    Alpha(opacity=100);
  -moz-opacity:             1;
  opacity:                   1;
  }
  



/* Portfolio and project details
---------------------------------------------------------------------------------*/
#center-column {
  text-align:              center;
  }



#text-column p {
    margin:                0.8em 0em;
    padding:              0em 1.8em 0em 1em;
  }
#image-column h3, #text-column h3 {
  color:                  #486783;
  text-align:              center;
  font-weight:            bold;
  }


.grok-subhead {  
  font-size:              .8em;
  margin-top:              10px;        
  text-align:              left;
  color:                  #7C8085;
  margin-left:            4px;
  }



ul.grok-subhead {
		margin:0px 0em 4em 0em;
		position:relative;
		text-align:left;
}

ul.grok-subhead li {
	clear: left;
	margin: 6px;
}
.grok-subhead li .label {
	float:left;
	text-align: right;
	font-weight: bold;
  padding-right:4px;
	width:40%;
	font-size: 1em;
  }

.grok-subhead li em {
	font-style:italic; display: block; float: left;
font-style:italic;
margin: 0px 0px 8px .6em;
width: 54%;
font-size: .9em;

}
	#featuretext {
		clear: left;
	}
.featuretext-nav {
  text-align:              center;
  }
#collateral .featuretext-nav {
  display:                none;
  }




/* footer
---------------------------------------------------------------------------------*/  
#footer { 
  text-align:             center; 
  }
#footer div#footer_content { 
  background:             url(/_assets/img/footer.png) no-repeat;
  }

















/*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_
*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*
_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_
....
....          NOTE:  There should be no color or images below this section,and no positioning or 
....                 structural typesetting above. With exception to cases where "typesetting" properties
....                 (e.g. margin, padding, etc.) are used to adjust the layout, all statements should be
....                 organized as such. Aesthetic CSS behaviors should be made above (opacity, text-decoration,
....                 hover, etc). Width and Height for Image replacement should be set with the background declaration.
....
*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*
_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_
*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*/
























/*########################################
##########################################      NOTE: For complex UI designs or CSS animated layout, it is
====                                  ====            good to separate declarations for behavior, positioning, and
====   Basic Structural Grid          ====            container sizing from those of colors, images, and typesetting
====   & Columnar / Container Layout  ====            Do this here; attempt to keep significant trickery grouped logically
====                                  ====            Logo / Graphic positioning can be grouped with section styles.
##########################################            Bug Fixes for browser layout issues should go here.
########################################*/          
  
  
/* Herein lies the magic for sticky footer
-----------------------------------------------------------------------------------*/  
    * html #content,
    html,
    body                   {   /* Make main containers of info max vertical size */
      height:                 100%;
      }
    #content,
    #footer,
    .clearcontent {           /* set the width of the important elements, so it will land where we want */
      width:                  750px;
      }
    #content {                /* the bottom margin is the negative value of the footer's height */
        margin:                0 auto -68px;
        position:              relative;
        min-height:           100%;
      }
    #footer,
    .clearcontent {           /* .clearcontent must be the same height as .footer */
        height:                68px;
      }
    #footer {
      position:                relative;
      margin:                  0 auto;
      }
    .clearcontent {            /* Important! This clears floating content columns, and sets the footer's breathing space */
      clear:                  both;
      padding:                0em 0em 0em;
      }


/* Content Header & Navigation
---------------------------------------------------------------------------------*/
    #header {
        height:                257px;
        padding:              0px 0px 0px 20px;
        width:                730px;
        position:             relative;
        }
      
    #feature_list {
      width:                  720px;
      overflow:                hidden;
      }
    
    #feature_list li.clientwork { 
      float:                  left;
      width:                  50px;
      height:                  50px;
      
      }

  
    
      
    #feature_list li.clientwork a {
      display:                block;
      width:                  50px;
      height:                  50px;
      position:                relative; 
      }
    #feature_list li.selfpromotion { 
      width:                  20px;
      height:                  20px;
      }




   #header .logo, #header .logo a {
      width:                  202px;
      height:                  28px;
      }
    #header .tagline, #header .tagline a { 
      width:                  203px;
      height:                  15px;
      }

		#header .logo, #header .tagline { 
			float:									left;
			padding-top: 						20px;
			margin:									0px;
			}
		#header .logo a, #header .tagline a { 
			display:								block;
			position:								relative;
			cursor: pointer;
					}

		#header .tagline { 
			margin-left:						10px;
			margin-top: 						16px;
		}






    #content div .column_headline { 
      text-indent:           -10000px;
      margin:          0px auto 1em;
      }
      
	

/* Portfolio and project details
---------------------------------------------------------------------------------*/
    #image-column {
      width:                  348px;
      margin:                  0px 0px 0px -744px;
      min-height:              534px;
      float:                   left;
      position:                relative; 
      margin-top:              -80px;
      }
    #center-column {
      width:                  40px;
      margin-left:            -386px;
      min-height:              534px;
      float:                   left;
      position:                relative;
      margin-top:              -4.4em;
      }
    #text-column { 
      display:                inline;
      width:                  330px;
      margin:                  0px 6px 0px 415px;
      float:                  left;
      position:                relative;
      margin-top:              -80px;
      }


    .portfolio_items {
      margin:                  50px 0px 0px 0px;
      }
    .portfolio_items img {
      margin:                  0px 0px 3px 0px;
      }
    .portfolio_items img a:focus {
      border:                  1px solid #CC33CC;
      }


    #display-image {
      margin:                  6px 0px 0px 0px;
      }			
		#display-image img {
			text-align:center;
		}
    #background-info {
      display:                none;
      }
    #overview-info {
      display:                block;;
      }




/* Footer Content (not necesary for sticky footer, but could affect layout of it
---------------------------------------------------------------------------------*/  
    #footer div#footer_content { 
      position:                absolute;
      left:                    0px;
      bottom:                  0px;
      width:                  750px;
      height:                  68px;
	    }

		#footer p {
			position:              absolute;
			bottom:                0px;
			}








/* Miscellaneous
---------------------------------------------------------------------------------*/
    #tuning-fork {
      position:                absolute;
      top:                    35px;
      left:                    575px;
      z-index:                90;
      }