/* 
 * Lance Simms' CSS  
 * 
 */


/* =============================================================================
   HTML5 display definitions
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
[hidden] { display: none; }

/* =============================================================================
   Basic HTML and Body Format
   ========================================================================== */

/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 * 2. Force vertical scrollbar in non-IE
 * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
 */

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { margin: 0; font-size: 13px; line-height: 1.231; font-family: 'Ubuntu', sans-serif; }

body, button, input, select, textarea { font-family: 'Ubuntu', sans-serif; color: #222; }

/* =============================================================================
   Links
   ========================================================================== */

a { color: #00A389; text-decoration: none; -webkit-transition:color 0.2s linear; -moz-transition:color 0.2s linear; }

a:visited { color: #5f5f5f; }

a:hover { color: #e6af61; -webkit-transition:color 0.2s linear; -moz-transition:color 0.2s linear; }

a:focus { outline: thin dotted; }

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }

/* 
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate
 * Also: hot pink! (or customize the background color to match your design)
 */

::-moz-selection { background: #00A398; color: #fff; text-shadow: none; }
::selection { background: #00A398; color: #fff; text-shadow: none; }

/* =============================================================================
   Typography
   ========================================================================== */

p{ font-family: 'Ubuntu', sans-serif; margin:0;padding:0; font-size:1.1em; line-height:1.6em;}

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote { margin: 1em 40px; }

dfn { font-style: italic; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

/* Background for Google Ads */
ins { background: #fff; text-decoration: none;}

/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

/* =============================================================================
   Main
   ========================================================================== */

header                          { height:80px; width:100%; background:#fff; overflow:hidden; }
.main-name                      { text-align:center;  text-transform:uppercase; font-weight:800; font-size:1.3em; letter-spacing:0.1em; height:40px; line-height:40px; width:200px; margin:auto; height:40px; }
.main-name a                    { padding:20px; color:#000; }
.main-name a:hover              { color:#00A398; }
article                         { width:100%; position: inherit; display: block; }
article p                       { margin-bottom:25px; }
aside p                         { margin-bottom:25px; }
aside                           { width:100%%; }
.important                      { background-color: #CCE6E5; padding: 7px;}
.container                      { margin:0 auto; padding:20px; }
.widecontainer                  { margin:0 auto; padding:15px; } 
.extrawidecontainer             { margin:0 auto; padding:15px; }
.progcontainer                  { margin:0 auto; padding:0px 0px 0px 10px; }
.progcontainer pre              { font-size: 0.65em;}
header .container               { max-width:1200px; }
footer .container               { max-width:1200px; }
.shadowpic                      {-webkit-box-shadow: 3px 3px 3px #7C7C7C; box-shadow: 3px 3px 3px #7C7C7C; -moz-box-shadow: 3px 3px 3px #7C7C7C;}
.lispace                        { margin-bottom: 12px; font-size: 1.1em; color: #335566; font-weight: 400;}
.olspace                        { margin-bottom: 20px;}

/* =============================================================================
   Main - Intro
   ========================================================================== */

#intro h1                       {max-width:600px; margin:0 auto; text-align:center; font-weight:800; font-size:3.1em; letter-spacing:0.1em; padding: 0 20px 0 20px; color:#000000; text-shadow: 2px 2px #FFFFFF}
#intro h2                       {max-width:600px; margin:0 auto; text-align:center; font-weight:400; font-size:1.6em; letter-spacing:0.1em; padding: 0 20px 0 20px; color:#FFFFFF; opacity: 1.0; }
#intro .transparent             {max-width:700px; margin: 30px; margin-left: auto; margin-right: auto; padding: 20px 20px 20px 20px; -moz-border-radius: 10px; border-radius: 10px; background-color: #000000; border: 1px solid black; opacity: 0.7; filter: alpha(opacity=60); z-index: -1} 
#intro .ontoptext               {z-index: 1}
#intro .more h5                 { background:#00A398; width:80px; height:30px; text-align:center; line-height:30px; text-transform:uppercase; margin:0 auto; color:#fff; margin-top:30px; -moz-border-radius: 2px; border-radius: 2px; font-weight:800; letter-spacing:0.15em; font-size:0.85em; -webkit-transition:background-color 0.2s linear; -moz-transition:background-color 0.2s linear;  }
#intro .more h5:hover           { background:#434343; -webkit-transition:background-color 0.2s linear; -moz-transition:background-color 0.2s linear; }
#intro                          { padding-top:100px; width:100%; padding-bottom:40px; float:left; background:url("../WebImages/UpperPrecipice.png"); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-clip: border-box; background-origin: padding-box; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-color:#c0c0c0; }

/* =============================================================================
   Main - Project List
   ========================================================================== */

#project-list                           { margin:0 auto; margin-top:100px; }
#project-list .project-image            { height:100px; opacity:1; display:block; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition:background-color 0.2s linear; -moz-transition:background-color 0.2s linear; background:#00A398; margin:0; width:100%; }
#project-list .project-image:hover      { background:#FFFFFF; -webkit-transition:background-color 0.2s linear; -moz-transition:background-color 0.2s linear; }
#project-list h3                        { display:block; text-align:center; line-height:25px; font-weight:400; -moz-transition:color 0.2s linear; -webkit-transition:color 0.2s linear; text-shadow: 2px 2px #000000 }
#project-list h3:hover                  { color:#777; -moz-transition:color 0.2s linear; -webkit-transition:color 0.2s linear;  }
#project-list a                         { display: block; float: left; margin: 0; position: relative; vertical-align: top; width:100%; color:#fff; font-size:1.3em;}
.thesis img                             { display: block; margin-left: auto; margin-right: auto; height:75px; padding-top:12px; }
.microprocessors img                    { display: block; margin-left: auto; margin-right: auto; height:75px; padding-top:12px; }
.programming img                        { display: block; margin-left: auto; margin-right: auto; height:75px; padding-top:12px; }
.astropics img                          { display: block; margin-left: auto; margin-right: auto; height:75px; padding-top:12px; }
.hiking img                             { display: block; margin-left: auto; margin-right: auto; height:75px; padding-top:12px; }
.research img                           { display: block; margin-left: auto; margin-right: auto; height:75px; padding-top:12px; }

/* =============================================================================
   Main - Profile and Generic One Column Pages
   ========================================================================== */

#mainsec         { font-size:1.20em; line-height:1.6em; font-weight:300; }
#mainsec a       { color: #00A389; text-decoration: none; -webkit-transition:color 0.2s linear; -moz-transition:color 0.2s linear; }
#mainsec a:hover { color: #660198; -webkit-transition:color 0.2s linear; -moz-transition:color 0.2s linear; }
#mainsec h2      { font-size:1.30em; font-weight: 500}
#mainsec h3      { font-size:1.20em; font-weight: 500}
#mainsec h4      { font-size:1.10em; font-weight: 500}
#mainsec ul      { padding-left: 20px; font-size:1.05em;}

.brief-about     { font-weight:500; font-size:1.3em; border-top:1px solid #d6d6d6; padding-top:20px; padding-bottom:20px;width:100%; float:left;}
aside h5         { font-size:1em; }
aside a          { color:#000; }
aside b          { font-weight:500; }

/* =============================================================================
   Project Page
   ========================================================================== */

#project p                  { margin-right:auto; margin-left:auto; max-width:985px; text-align:left; padding: 20px 40px 20px 40px; font-size:1.4em; letter-spacing:0.03em; line-height:1.5em; color:#373737; font-weight: 100;}
#project a                  { color:#00A389}
#project ul                 { margin-right:auto; margin-left:auto; max-width:985px; text-align:left; padding: 0px 40px 0px 40px; font-size:1.4em; letter-spacing:0.03em; line-height:1.5em; color:#373737; font-weight: 100;}
#project h3                 { margin-right:auto; margin-left:auto; max-width:985px; text-align:left; padding: 0px 40px 0px 40px; font-size:1.7em; letter-spacing:0.03em; line-height:1.5em; color:#373737; font-weight: 500;}
#project img                { background: #ccc; margin:0 auto; width: 100%; }
#project p.alt-2            { margin-top:-120px; } 
#project .container         { max-width:1200px; width:auto; padding:0; margin-top:0px; }

#project-intro              { background:#00A389; display:inline-block; width:100%; padding-bottom:30px; -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.1); box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.1); }
#project-intro .container   { max-width:1200px; width:auto; padding:0; padding-top:30px; }
#project-intro h2           { float:left;margin:0;padding:0;line-height:30px;text-transform:uppercase;font-weight:500;margin-right:20px;font-size:1.6em; letter-spacing:0.07em; color:#000;padding-left:20px;}
#project-intro h3           { float:left;margin:0;padding: 20px;line-height:50px;font-weight:500;font-size:1.7em; letter-spacing:0.1em;font-weight:500;color:#000;}
#project-intro span         { display:none;float:left;padding:0;margin:0; margin-bottom:25px;margin-left:20px;border-bottom:2px solid #000;width:20px ;height:25px;margin-right:20px;}

/* =============================================================================
   Generic Three Div Wide Pages
   ========================================================================== */
#threewidecontainer         { width: 100%; margin:0 auto; padding: 0px;}
#threewidecontainer h3      { margin:0;padding-left:12px; line-height:20px;font-weight:100;font-size:1.3em; letter-spacing:0.1em;font-weight:200;color:#000000;}
.threewidediv               { margin: 0 auto; width:100%; padding-top:10px; padding-bottom:10px;}
.threewidepic               { width:100%; -webkit-box-shadow: 3px 3px 3px #7C7C7C; box-shadow: 3px 3px 3px #7C7C7C; -moz-box-shadow: 3px 3px 3px #7C7C7C;}
.threewidespacer            { display:block; height:20px;}
.threewidecaption           { display:block; height:48px; overflow:hidden;}

/* =============================================================================
   Astropic and Thesis
   ========================================================================== */
#astro-intro                { width:100%; height: 440px; padding-bottom:40px; float:left; background:url("../WebImages/M57Header.png"); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-clip: border-box; background-origin: padding-box; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-color:#c0c0c0; margin-bottom: 40px;}
#astro-intro h2             { float:left;margin:0;padding:0;line-height:50px;text-transform:uppercase;font-weight:100;margin-right:20px;font-size:1.9em; letter-spacing:0.07em; color:#FFFFFF;padding-left:20px;}
#astro-intro h3             { float:left;margin:0;padding: 20px;line-height:50px;font-weight:100;font-size:1.7em; letter-spacing:0.1em;font-weight:200;color:#FFFFFF;}
#astro-intro .container     { max-width:1200px; width:auto; padding:0; padding-top:50px;}



/* =============================================================================
   Research
   ========================================================================== */
#researchcontainer           { width: 100%; margin:0 auto; padding: 0px;}
#researchcontainer h3        { margin:0;padding-left:18px; line-height:20px; font-size:1.5em; letter-spacing:0.1em;font-weight:600;color:#000000; display: inline;}

#researchcontainer a         { color: #00A389; font-weight: 400;}
#researchcontainer a:visited { color: #00A389;}
#researchcontainer a:hover   { color: #8B8378; -webkit-transition:color 0.2s linear; -moz-transition:color 0.2s linear; font-weight: 400; }

#researchcontainer a:focus   { outline: thin dotted; }
#researchcontainer p         { margin-right:auto; margin-left:auto; max-width:985px; text-align:left; padding: 14px 30px 10px 30px; font-size:1.3em; letter-spacing:0.03em; line-height:1.5em; color:#373737; font-weight: 100;}
.researchdiv                 { margin: 0 auto; width:100%; padding-top:10px; padding-bottom:10px;}
.researchpic                 { width:100%;}
.researchwidecontainer       { margin:0 auto; padding:10px 30px 10px 30px; }

/* =============================================================================
   Hikes
   ========================================================================== */
.hikingbody                 { background: #162028; background-color: #162028;}
#hikes-intro                { width:100%; height: 440px; padding-bottom:40px; float:left; background:url("../WebImages/CerroDelPlomoHeader.png"); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-clip: border-box; background-origin: padding-box; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-color:#c0c0c0; margin-bottom: 40px;}
#hikes-intro h2             { float:left;margin:0;padding:0;line-height:50px;text-transform:uppercase;font-weight:100;margin-right:20px;font-size:1.9em; letter-spacing:0.07em; color:#000000;padding-left:20px;}
#hikes-intro h3             { float:left;margin:0;padding: 20px;line-height:50px;font-weight:100;font-size:1.7em; letter-spacing:0.1em;font-weight:200;color:#000000;}
#hikes-intro .container     { max-width:1200px; width:auto; padding:0; padding-top:50px;}
#map                        { width:100%; height:500px;}
.hikinghome                 { display:block;  width:20px;height:17px;background-image:url('../WebImages/Home.png'); margin:0 auto; margin-bottom:50px; opacity:0.9; padding:10px;background-position:10px 4px;background-repeat:no-repeat; -moz-transition:opacity 0.2s linear; -webkit-transition:opacity 0.2s linear;}
.hikinghome:hover           { opacity:1; -moz-transition:opacity 0.2s linear; -webkit-transition:opacity 0.2s linear; }
.hikingcontainer            { margin:0 auto; padding:15px; background-color: #FFFFFF;}
.hikingcontainer p          { margin-top: 14px; margin-bottom: 24px;}
.icon_images                { width:19%; max-width: 100px;}
.gen_width                  { width:100%;}
.hikingdiv                  { margin: 0 auto; width:100%; padding-top:5px; padding-bottom:2px; padding-left: 10px; font-size:1.1em;}
.hikingspan                 { display:block; height:28px; overflow:hidden;}
.hikingline                 { border-color: #00A389; border: 1; height: 0px; box-shadow: 0 0 5px 2px #00A389;}
.hikingh1                   { color: #667788}
.hikingpic                  { display: block; margin: 0 auto; -webkit-box-shadow: 0 0 8px #7C7C7C; box-shadow: 0 0 8px #7C7C7C; -moz-box-shadow: 0 0 8px #7C7C7C; width: 100%; max-width: 560px; }
.hikingpicmain              { display: block; margin: 0 auto; -webkit-box-shadow: 0 0 8px #7C7C7C; box-shadow: 0 0 8px #7C7C7C; -moz-box-shadow: 0 0 8px #7C7C7C; width: 100%; margin-bottom:6px;}

/* Font colors for different days.  These match up with the colors */ 
/* assigned in /javascript/load_maps_v3.js                         */
.day1{ color: #2442CE }
.day2{ color: #00CC33 }
.day3{ color: #FF6600 }
.day4{ color: #DDDD00 }
.day5{ color: #F04040 }
.day6{ color: #AA00FF }
.day7{ color: #FF00CC }
.day8{ color: #00FFFF }

/* =============================================================================
   Coding (hljs overrides the highlightjs css for <pre><code>)
   ========================================================================== */
pre.shell                   { border: 1px solid #82573f; padding: 15px; font-family: monospace; font-size: 100%; overflow-x: scroll; background: black; color: #00A389; white-space: nowrap;}
pre.shellpreserve           { border: 1px solid #82573f; padding: 15px; font-family: monospace; font-size: 100%; overflow-x: scroll; background: black; color: #00A389; white-space: pre;}
.hljs                       { padding: 15px; font-family: monospace; font-size: 0.94em; overflow-x: scroll; white-space: pre;}
.inlinecode                 { background:lightgrey ; font-family:courier;}

/* =============================================================================
   Arrows
   ========================================================================== */
.back                       { float:left;position:relative; left:-10px; top:-2px; background:url("../WebImages/LeftArrow.png") no-repeat; width:45px; height:45px; background-position:16px 12px; opacity:0.5; -webkit-transition: opacity 300ms ease-out; -moz-transition: opacity 300ms ease-out; }
.forward                    { float:right; position:relative; right:-10px; top: -42px; background:url("../WebImages/RightArrow.png") no-repeat; width:45px; height:45px;background-position:2px 12px;opacity:0.5;-webkit-transition: opacity 300ms ease-out; -moz-transition: opacity 300ms ease-out; }
.back:hover                 { opacity:1;-webkit-transition: opacity 200ms ease-in; -moz-transition: opacity 200ms ease-in; }
.forward:hover              { opacity:1; -webkit-transition: opacity 300ms ease-in; -moz-transition: opacity 300ms ease-in; }
footer .forward             { top:-90px; }
footer .back                { top:-3px; }
.back h5                    { display:none; }
.forward h5                 { display:none; }

.home                       { display:block;  width:20px;height:17px;background-image:url('../WebImages/Home.png'); margin:0 auto; margin-bottom:50px; opacity:0.5; padding:10px;background-position:10px 4px;background-repeat:no-repeat; -moz-transition:opacity 0.2s linear; -webkit-transition:opacity 0.2s linear;}
.home:hover                 { opacity:1; -moz-transition:opacity 0.2s linear; -webkit-transition:opacity 0.2s linear; }

/* ==|== media queries ======================================================
   PLACEHOLDER Media Queries for Responsive Design.
   These override the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */

/* 545 px and over */
@media only screen and (min-width: 545px) {

/* Style adjustments for viewports 480px and over go here */
.container                              { max-width:490px; margin:0 auto; padding:20px; }
.widecontainer                          { max-width:900px; margin:0 auto; padding:15px; }
.extrawidecontainer                     { max-width:1200px; margin:0 auto; padding:15px; }

/* Hiking */
#map                                    { width:100%; margin:0 auto;}    
#icon_table                             { width:100%; margin:0 auto;}
.hikingcontainer                        { max-width:900px; margin:0 auto; padding:15px; }    
.hikingdiv                              { display:inline-block; margin:0 auto; width:46%; padding-left:2.5%;}    

/* Research */
#researchcontainer                      { width:100%; max-width:545px; margin:0 auto;}
.researchdiv                            { display:inline-block; margin:0 auto; width:530px; padding-left:10px; padding-top:10px; vertical-align:top;}
.researchpic                            { width: 400px;}
.researchwidecontainer                  { max-width:800px;}

/* Program */
.progcontainer                          { max-width:900px; }

/* Three Wide */
.threewidediv                           { display:inline-block; margin:0 auto; width:46%; padding-left:2.5%; }
#threewidecontainer                     { width:100%; margin:0 auto; padding: 0px;}
#threewidecontainer h3                  { font-size: 1.1em;}
    
/* Project */    
#project-list .project-image            { height:150px; opacity:1; display:block; -moz-border-radius: 5px; border-radius: 5px;-webkit-transition:background-color 0.2s linear; -moz-transition:background-color 0.2s linear; margin-bottom:20px; background:#00A398; margin:0; }
#project-list a:nth-child(2n)           { margin-right: 0; }
#project-list h3                        { line-height:30px; }
#project-list a                         { margin-right:20px; width:235px; }
#project-list                           { margin-top:100px; }
#project p                              { padding-left:40px;padding-right:40px; padding-top: 0px; padding-bottom:20px; -moz-column-count:2;-moz-column-gap:30px;-webkit-column-count:2;-webkit-column-gap:30px;column-count:2;column-gap:30px;}
#project p.alt                          { -moz-column-count:1;-moz-column-gap:30px;-webkit-column-count:1;-webkit-column-gap:30px;column-count:1;column-gap:30px;}
#project-intro span                     { display:inherit; }
#project-intro h3                       { padding:0 0 0 20px; }
#project-intro h2                       { line-height:50px; font-size:1.9em; letter-spacing:0.07em;}
    
/* Intro*/
#intro                                  { padding-top:125px; height:1000px; }

/* Main Page Images */
.thesis img                             { height:auto; padding-top:5px; }
.microprocessors img                    { height:auto; padding-top:15px; }
.programming img                        { height:auto; padding-top:35px; }
.astropics img                          { height:auto; padding-top:20px; }
.hiking img                             { height:auto; padding-top:15px; }
.research img                           { height:auto; padding-top:15px; }
    
}

/* 800 px and over */
@media only screen and (min-width: 800px) {

/* General */    
footer .back h5                 { top:-18px; }
footer .forward h5              { top:-18px; }
.back h5                        { position:relative; top:-19px;left:55px; width:150px; font-size:1em; text-transform:uppercase;color:#000; display:block; padding:10px; }
.back h5:hover                  { color:#000; }
.forward h5                     { position:relative; top:-19px;left:-175px; width:150px; text-align:right; font-size:1em; text-transform:uppercase;color:#000; display:block; padding:10px; }
.forward h5:hover               {color:#000; }

/* Three Wide */
#threewidecontainer h3           { font-size: 1.3em;}

/* Hiking */
.hikingcontainer p              { margin-top: 14px; margin-bottom: 24px; margin-left: 10px; margin-right: 10px;}
#map                            { width:100%; max-width:900px; margin:0 auto;}
#icon_table                     { width:100%; max-width:800px; margin:0 auto;}
    
/* Research */
#researchcontainer              { width:100%; max-width:800px; margin:0 auto;}
#researchcontainer p            { font-size:1.2em; }
.researchdiv                    { display:inline-block; margin:0 auto; width:398px; padding: 10px 0px 0px 0px; vertical-align:top;}
.progcontainer pre              { font-size: 1.0em;}
    
}

/* 1050 px and over */
@media only screen and (min-width: 1050px) {
    
/* General */
aside                           { float:right;width:32%;}
article                         { width:61%;float:left;border-right:1px solid #d6d6d6;padding-right:30px;}
#end                            { float:left;margin-top:30px;padding-bottom:25px;width:100%;}
header                          { position:inherit;}
.main-name                      { line-height:50px;}
.back                           { top:0;}
.forward                        { top:-40px;}
.container                      { max-width:985px; margin:0 auto; padding:20px;}

/* Three Wide */
#threewidecontainer             { width:100%; max-width:1280px; margin:0 auto;}
.threewidediv                   { display:inline-block; margin:0 auto; width:30%; padding-top:12px; }

/* Project */        
#project-list a:nth-child(2n)   { margin-right:20px;}
#project-list a:nth-child(3n)   { margin-right:0;}
#intro                          { height:1000px;padding-top:8%;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;}
#project-list a                 { display:block;float:left;position:relative;vertical-align:top;width:315px;color:#fff;font-size:1.3em;margin:0 20px 0 0;}
#project-list h3                { display:block;text-align:center;font-family:Ubuntu, sans-serif;line-height:70px;font-weight:400;-moz-transition:color .2s linear;-webkit-transition:color .2s linear;}
#project-list                   { margin-top:180px;}
#project-intro .container       { max-width:1260px;width:auto;padding-bottom:0;padding-top:30px;}

/* Table of Contents Floating */
.micmain                        { width:80%; float:left; border-right:1px solid #d6d6d6; padding-right:20px;}
.mictoc                         { width:16%; float:left; padding-left:20px; }

}

/* 1200 px and over */
@media only screen and (min-width: 1200px) {
.project-intro-background       { height:150px; }
}