/* clear everything */
* {
    margin:  0;
    padding: 0;
    border:  0;
}

html,
body {
    color:black;
    font-family: OpenSans-Light, sans-serif;
    line-height: 1.7;
    /*overflow-y: scroll;*/ /* this seems to break scrolling for some reason */
    height: 100%;
}

h1, h2, h3, h4, h5, h6 {
    font-family: source_sans_prosemibold, sans-serif;
    font-weight: normal;
    color: #666666;
    line-height: 1.1;
    margin-bottom: 10px;
}

p {
    margin-bottom: 18px;
}

#wrapper    { min-height: 100%; position: relative; }
#masthead   { position: relative; }
#content    {
    padding-bottom: 240px; /* same height as footer */
}
#footer     {
    position: absolute;
    height: 240px;
    bottom: 0;
    width: 100%;
    /* padding: 10px; */
}
#feed {}

.header     {  position: relative; }
.blog-author{  margin: 0;          }
.dot {
    border-radius: 50%;
    width: 10px;
    height: 10px;
    display: block;
    float: left;
    margin: 10px 7px 10px 0px;
}

/* display 
http://www.sitepoint.com/simple-clearing-of-floats/
 */
.clearfix   { display:block;        }
.clearfix:after {
    content:'';
    display:block;
    clear:both;
    visibility:hidden;
    height:0;
}

.fill-aqua  { background-color: #006080; }
.fill-gray  { background-color: #fafafa; }
.fill-teal  { background-color: #39acc0; }
.fill-blue  { background-color: #377aa6; }
.fill-green { background-color: #37a67a; }
.fill-orange{ background-color: #fc8007; }
.fill-maroon{ background-color: #9c1318; }

.gradient-aqua  {
     /* #1d7a94, #006080 */
    background: -webkit-linear-gradient(left top,  #1d7a94, #006080); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right,   #1d7a94, #006080); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, #1d7a94, #006080); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right,   #1d7a94, #006080); /* Standard syntax (must be last) *//*
    /* https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient */
    /*background: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);*/
}

/* background banner image */
.banner-aqua {
    background-image: url(images/bannerbg.jpg);
}

.text-left  { text-align:left;      }
.text-right { text-align:right;     }
.text-center{ text-align:center;    }

.white      { color:white;          }
.gray       { color:#777777;        }

.contain    { position:relative;    }
.float-left { float:left;           }
.rounded    { border-radius: 4px;   }
.block      { display:block;        }

.hover-background:hover { background-color: #eeeeee; }
.hover-underline:hover  { text-decoration: underline; }
.hover-color:hover      { color: #0000e0; }
.no-decorate            { text-decoration: none; }

.line-bottom    { border-bottom: 1px solid #cccccc; }

.teaser     { color:#777777; font-size: 11pt; line-height: 1.5; }
.teaser-image {
    display: block;
    position: absolute;
    height: 100%;
    background-size: cover;
    background-position: 50% center;
}
.title {
    font-family: ralewaythin, source_sans_pro, sans-serif;
    color: white;
    font-size: 24pt;
    text-decoration: none;
}
.title em {
    color: #43cb98; /* ligher green */
    /*color: #39acc0; /* teal */
    text-decoration: none;
    font-style: normal;
}
.slogan {
    color: white;
    text-decoration: none;
    font-style: normal;
    font-size:  11pt;
}
.quote {
    color: #808080; /*#60888f;*/
    background-color: #ebf6f8;
    text-decoration: none;
    font-style: italic;
    font-size:  11pt;
    border-style: solid;
    border-left: thick solid #39acc0;
}
#title-home {
    text-align:center;
    padding-top: 100px;
    /*position: absolute;*/
}
.banner {
    font-family: source_sans_prosemibold, sans-serif;
    color: #666666;
    font-size: 20pt;
    text-decoration: none;
    margin-bottom: 0;
}
.debug      { border: 1px solid red;}

.logo {
    background-image: url(images/logo-perspective-white.png);
    background-position: left -35px;
    background-size: 200px;
    background-repeat: no-repeat;
    min-height: 120px; /* same height as masthead */
}
.logo-homepage {
    background-image: url(images/logo-perspective-white.png);
    background-position: left 10px;
    background-size: 250px;
    background-repeat: no-repeat;
    min-height: 120px; /* same height as masthead */
}

#nav {
    position: absolute;
    top: 0px;
    right: 0px;
}
.nav-button {
    color: white;
    text-decoration: none;
    font-size: 11pt;
}
.nav-button:hover { background-color: rgba(255,255,255,0.15); }
.active           { background-color: rgba(255,255,255,0.08); }

.limiter {
    width: 80%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* code block/listings */
.listing {
    width: 90%;
    max-width: 900px;
    border-radius: 5px;
    font-size: 10pt;
}

/* replaces obsolete <tt> */
.fixed {
    font-weight: normal;
    font-style:  normal;
    font-size:   10pt;
    font-family: Menlo, Consolas, Monaco, 'Andale Mono', monospace;
}

ul {
    list-style:  disc;
    margin-left: 32px;
    margin-bottom: 20px;
}

ol {
    list-style:  decimal;
    margin-left: 32px;
    margin-bottom: 20px;
}

.li-plain { list-style: none; margin-left: 0px; }

div.figure {
    width: 100%;
}

img.figure {
    width: 80%;
    max-width: 620px;
    height: auto;
    padding: 0px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 0;
}

.thumb {
    vertical-align:middle;
    height:40px;
    width:40px;
    margin: 0 3px;
    border-radius: 50%;
    border: 2px solid #37a67a; /* green */
}

/* search field */
#searchform {
    box-sizing: border-box;
    border-radius: 2px;
    display: block;
    position: relative;
    height: 2.8em;
    background-color: #FFF;
    border: 1px solid #D0D0D0;
    padding: 0em 6.5em 0em 0.75em;
}
#searchtext {
    padding: 0px;
    margin:  0px;
    height: 2.3em;
    font-family: OpenSans-Light, sans-serif;
    font-size: 14pt;
    width: 100%;
    border: none;
    outline: none;
}
#searchbutton {
    font-family: OpenSans-Light, sans-serif;
    height: 2.3em;
    width: 6em;
    border-radius: 2px;
    background-color: #cccccc;
    color: white;
    font-size: 11pt;
    position: absolute;
    top: 5px;
    right: 5px;
}
#searchbutton:hover {
    background-color: #008060;
}

/* font sizes and types */
.font-1    { font-size:  8pt; }
.font-2    { font-size: 10pt; }
.font-3    { font-size: 11pt; }
.font-4    { font-size: 12pt; }
.smallcaps { font-variant: small-caps; }

/* upper/lower padding */
.pad0   { padding: 0px;  }
.pad1   { padding: 4px;  }
.pad2   { padding: 8px;  }
.pad3   { padding:16px;  }
.pad4   { padding:32px;  }

.pad0x  { padding-left: 0px; padding-right: 0px; }
.pad1x  { padding-left: 4px; padding-right: 4px; }
.pad2x  { padding-left: 8px; padding-right: 8px; }
.pad3x  { padding-left:16px; padding-right:16px; }
.pad4x  { padding-left:32px; padding-right:32px; }

.pad0y  { padding-top: 0px; padding-bottom: 0px; }
.pad1y  { padding-top: 4px; padding-bottom: 4px; }
.pad2y  { padding-top: 8px; padding-bottom: 8px; }
.pad3y  { padding-top:16px; padding-bottom:16px; }
.pad4y  { padding-top:32px; padding-bottom:32px; }

/* column widths, row height, etc.
 * Note that the full maximum width is 1200px, so we break the
 * page into twelfths. The ...
 */
.col0   { width:  4.16666666666667%; max-width:  50px; float:left;  }
.col1   { width:  8.33333333333333%; max-width: 100px; float:left;  }
.col2   { width: 16.66666666666667%; max-width: 200px; float:left;  }
.col3   { width: 25.00000000000000%; max-width: 300px; float:left;  }
.col4   { width: 33.33333333333334%; max-width: 400px; float:left;  }
.col5   { width: 41.66666666666666%; max-width: 500px; float:left;  }
.col6   { width: 50.00000000000000%; max-width: 600px; float:left;  }
.col7   { width: 58.33333333333334%; max-width: 700px; float:left;  }
.col8   { width: 66.66666666666667%; max-width: 800px; float:left;  }
.col9   { width: 75.00000000000000%; max-width: 900px; float:left;  }
.col10  { width: 83.33333333333333%; max-width:1000px; float:left;  }
.col11  { width: 91.66666666666667%; max-width:1100px; float:left;  }
.col12  { width:100%;                display: block;                }

.row0   { height:  40px;    }
.row1   { height:  80px;    }
.row2   { height: 120px;    }
.row3   { height: 160px;    }
.row4   { height: 200px;    }
.row5   { height: 240px;    }
.row6   { height: 280px;    }
.row7   { height: 320px;    }
.row8   { height: 360px;    }
.row9   { height: 400px;    }
.row10  { height: 440px;    }
.row11  { height: 480px;    }
.row12  { height: 520px;    }
.row13  { height: 560px;    }
.row14  { height: 600px;    }
.row15  { height: 640px;    }
.row16  { height: 680px;    }

/* force zero margin */
.margin0         { margin:  0px; }

/* left margin for floating elements */
.margin-left-0   { margin-left:  0.00000000000000%; }
.margin-left-1   { margin-left:  8.33333333333333%; }
.margin-left-2   { margin-left: 16.66666666666667%; }
.margin-left-3   { margin-left: 25.00000000000000%; }
.margin-left-4   { margin-left: 33.33333333333334%; }
.margin-left-5   { margin-left: 41.66666666666666%; }
.margin-left-6   { margin-left: 50.00000000000000%; }
.margin-left-7   { margin-left: 58.33333333333334%; }
.margin-left-8   { margin-left: 66.66666666666667%; }
.margin-left-9   { margin-left: 75.00000000000000%; }
.margin-left-10  { margin-left: 83.33333333333333%; }
.margin-left-11  { margin-left: 91.66666666666667%; }
.margin-left-12  { margin-left:100.00000000000000%; }

/* right margin for floating elements */
.margin-right-0   { margin-right:  0.00000000000000%; }
.margin-right-1   { margin-right:  8.33333333333333%; }
.margin-right-2   { margin-right: 16.66666666666667%; }
.margin-right-3   { margin-right: 25.00000000000000%; }
.margin-right-4   { margin-right: 33.33333333333334%; }
.margin-right-5   { margin-right: 41.66666666666666%; }
.margin-right-6   { margin-right: 50.00000000000000%; }
.margin-right-7   { margin-right: 58.33333333333334%; }
.margin-right-8   { margin-right: 66.66666666666667%; }
.margin-right-9   { margin-right: 75.00000000000000%; }
.margin-right-10  { margin-right: 83.33333333333333%; }
.margin-right-11  { margin-right: 91.66666666666667%; }
.margin-right-12  { margin-right:100.00000000000000%; }

/* top-margin */
.margin-top-0   { margin-top:  0px; }
.margin-top-1   { margin-top:  5px; }
.margin-top-2   { margin-top: 10px; }
.margin-top-3   { margin-top: 20px; }
.margin-top-4   { margin-top: 40px; }
.margin-top-5   { margin-top: 80px; }

/* bottom-margin */
.margin-bottom-0   { margin-bottom:  0px; }
.margin-bottom-1   { margin-bottom:  5px; }
.margin-bottom-2   { margin-bottom: 10px; }
.margin-bottom-3   { margin-bottom: 20px; }
.margin-bottom-4   { margin-bottom: 40px; }
.margin-bottom-5   { margin-bottom: 80px; }