/*------------------------------------*\
    RESET
\*------------------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0b1 | 201101 
    NOTE:WORK IN PROGRESS
    USE WITH CAUTION AND TEST WITH ABANDON */

/*html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    font:inherit;
    vertical-align:baseline;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
    display:block;
}

html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    font:inherit;
    vertical-align:baseline;
}

body {
    margin: 0px auto;
    font-family: 'Open Sans', sans-serif;
    font-size: .8em;
}
#wrapper {
    padding-top: 200px;
    margin: 0px auto;
    background: #FFFFFF;
}

.container {
    margin: 0px auto;
}
.clearfix {
    clear: both;
}

/** HEADER */

#header {
    position: fixed;
    overflow: hidden;
    padding: 10px 0px 10px 0px;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: #FFFFFF;
    text-align: center;
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    transition: height 0.3s;
    z-index: 100;
    border-bottom: 1px solid #DEDEDE;
}

#header h1 {
    letter-spacing: 3px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 2em;
}

#header p {
    margin: 0px 0px 0px 0px;
    letter-spacing: 1px;
    font-weight: 400;
    color: #8E8E8E;
}

#logo img {
    width: 150px;
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    transition: height 0.3s;
}

#header h1,
#header img,
#header p {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}


#header.header_shrink {
    padding-top: 0px;
}

#header.header_shrink img {
    width: 0px;
}

#header.header_shrink h1 {
    font-size: 1.2em;
    letter-spacing: 1px;
}
#header.header_shrink p {
    font-size: .8em;
}

/** LOGO */
#header #logo {
    width: 100%;
    margin: 0px auto;
    padding: 0px 0px 10px 0px;
}

/** BANNER */

#banner {
    overflow: hidden;
    margin: 0px auto;
}

img.banner {
    margin: 0px auto;
    width: 100%;
    width: auto\9; /* ie8 */
    height: auto;
}

#banner video {
    margin: 0px auto;
    width: 100%;
    width: auto\9; /* ie8 */
    height: auto;
}




/** TWO COLUMN */

#two-column {
    padding: 20px 50px 0px 50px;
    overflow: hidden;
    border-top: 1px solid #DEDEDE;
}

#two-column h2 {
    font-variant: small-caps;
    font-size: 1.8em;
}

#two-column #tbox1 {
    float: left;
    padding-left: 5%;
    width: 40%;
}

#two-column #tbox2 {
    float: right;
    padding-right: 5%;
    width: 40%;
}



h1, h2, h3 {
    margin: 0px;
    padding: 0px;
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    color: #101010;
}

h2 {
    padding-bottom: 30px;
    letter-spacing: -1px;
    font-size: 2em;
}

a {
    color: #2AA8D2;
    text-decoration: none;
} 

a:hover {
    text-decoration: underline;
} 

ol,ul{
    list-style:none;
}
blockquote,q{
    quotes:none;
}
blockquote:before,blockquote:after,
q:before,q:after {
    content:’’;
    content:none;
}
/* remember to define visible focus styles! 
:focus{
    outline:?????;
} */

/* remember to highlight inserts somehow! */
ins{
    text-decoration:none;
}
del{
    text-decoration:line-through;
}

table{
    border-collapse:collapse;
    border-spacing:0;
}


/** MENU */

#menu {
    float: left;
    /* Firefox */
    left: -moz-calc(50% - 250px);
    /* WebKit */
    left: -webkit-calc(50% - 250px);
    /* Opera */
    left: -o-calc(50% - 250px);
    /* Standard */
    left: calc(50% - 250px);
    width: 500px;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    position: relative;
    border-top: 1px solid #DEDEDE;
}
#menu ul {
    clear: left;
    float: left;
    list-style: none;
    margin: 0;
    padding: 10px 0px 0px 0px;
    position: relative;
    left: 50%;
    text-align: center;
}

#menu ul li {
    display: block;
    float: left;
    list-style: none;
    margin: 0;
    position: relative;
    right: 50%;
}

#menu a {
    display: block;
    padding: 0px 5px 0px 5px;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #585858;
    border: none;
    width: 80px;
}

#menu .current_page_item a {
    text-decoration: none;
    color: #2AA8D2;
}

img.floatleft {
    float: left;
    padding: 0px 10px 0px 0px;
}

img.floatright {
    float: right;
    padding: 0px 0px 0px 10px;
}

img.inline {
    display: block;
    padding: 10px 0px 10px 0px;
}

/** PAGE */

#page {
    width: 100%; 
    overflow: hidden;
    padding: 0px 0px 0px 0px;
    top: 0;
    left: 0;
}

/** CONTENT */

#content {
    /*float: left;*/
    width: 100%;
}

#cbox1 {
    text-align: center;
    margin: 0px auto;
    padding: 20px 80px 20px 80px;
}

#cbox1 h1 {
    font-size: 2.5em;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    color: #585858;
    padding: 0px 0px 10px 0px;
}

#cbox1 p {
    margin: 0px auto;
    padding: 0px 80px 10px 80px;
    font-family: 'Open Sans', sans-serif;
    color: #000000;
}   

#cbox2 {
    margin: 0px auto;
    padding: 20px 150px 20px 150px;
}

#cbox2 h1 {
    text-align: center;
    font-size: 2.5em;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    color: #585858;
    padding: 0px 0px 10px 0px;
}

#cbox2 h2 {
    font-size: 1.5em;
    font-variant: small-caps;
}

#cbox2 h3 {
    font-weight: 600; 
}

#cbox2 p {
    margin: 0px auto;
    padding: 0px 0px 10px 0px;
    font-family: 'Open Sans', sans-serif;
    color: #000000;
    text-align: justify;
}


#cbox2 li {
    padding: 15px;
    overflow: auto;
}

img.portrait {
    width: 120px;
    float: left;
    margin: 0 15px 0 0;
    border: 1px solid #000000;
}
   
/* List style 1 */

ul.style1 {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

ul.style1 li {
    padding: 10px 0px 15px 0px;
    border-top: 1px solid #E6E7DC;
}

ul.style1 .first {
    padding-top: 0px;
    border-top: none;
}

/* List style 2 */

ul.style2 {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

ul.style2 li {
    padding: 25px 0px 15px 0px;
    border-top: 1px solid #E6E7DC;
}

ul.style2 .first {
    padding-top: 0px;
    border-top: none;
}

ul.style2 h3 {
    padding: 0px 0px 10px 0px;
    font-weight: 600; 
}

ul.style2 h3 a {
    color: #101010;
}

ul.style2 a {
    text-decoration: none;
    color: #2AA8D2;
}

ul.style2 a:hover {
    text-decoration: underline;
}

/* List style grid */
ul.rig {
    list-style: none;
    font-size: 0px;
    margin-left: -2.5%; /* should match li left margin */
}
ul.rig li {
    display: inline-block;
    padding: 10px;
    margin: 0 0 2.5% 2.5%;
    background: #fff;
    text-align: left;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    /*border: 1px solid #ddd;
    box-shadow: 0 0 5px #ddd;*/
    font-size: 14px;
    font-size: .9rem;
    /*font-size: 16px;*/
    vertical-align: top;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
ul.rig li img {
    max-width: 100%;
    height: auto;
    margin: 0 0 10px;
}
ul.rig li h3 {
    margin: 0 0 0px;
    clear: left;
}
ul.rig li p {
    font-size: .8rem;
    line-height: 1.5em;
    font-weight: 300;
    color: #999;
}
/* class for 2 columns */
ul.rig.columns-2 li {
    width: 47.5%; /* this value + 2.5 should = 50% */
}
/* class for 3 columns */
ul.rig.columns-3 li {
    width: 30.83%; /* this value + 2.5 should = 33% */
}
/* class for 4 columns */
ul.rig.columns-4 li {
    width: 22.5%; /* this value + 2.5 should = 25% */
}
@media (max-width: 480px) {
    ul.grid-nav li {
        display: block;
        margin: 0 0 5px;
    }
    ul.grid-nav li a {
        display: block;
    }
    ul.rig {
        margin-left: 0;
    }
    ul.rig li {
        width: 100% !important; /* over-ride all li styles */
        margin: 0 0 20px;
    }
}
 
#footer {
    border-top: 1px solid #DEDEDE;
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 10px;
    padding-bottom: 50px;
}

#footer #footertext {
    width: 30%;
    float: right;
    text-align: right;
    vertical-align: text-top;
    color: #000000;
    font-size: 1em; 
    padding: 20px 0px 0px 0px;
}

#footer #kochlogo {
    width: 250px;
    max-width: 30%;
    float: right;
    padding: 10px 0px 0px 0px;
    margin: 0 auto;
}

#footer #mitlogo {
    width: 200px;
    max-width: 30%;
    float: right;
    padding: 0px 0px 0px 20px;
    margin: 0 auto;
}

#footer #CNGlogo {
    width: 250px;
    max-width: 20%;
    float: right;
    padding: 5px 0px 0px 10px;
    margin: 0 auto;
}

#footer #UFGIlogo {
    width: 200px;
    max-width: 15%;
    float: right;
    padding: 0px 0px 0px 10px;
    margin: 0 auto;
}

#footer #Myologylogo {
    width: 200px;
    max-width: 15%;
    float: right;
    padding: 0px 0px 0px 10px;
    margin: 0 auto;
}

#footer #mitlogo {
    width: 200px;
    max-width: 30%;
    float: right;
    padding: 0px 0px 0px 20px;
    margin: 0 auto;
}

#footer ul {
    margin: 0 auto;
    padding: 10px 0px 0px 0px;
    list-style: none;
    float: left;
    width: 30%;
}

#footer li {
    float: left;
    padding: 0px 0px 0px 0px;
    margin: 0 auto;
}

#footer a {
    padding: 0px 2px 0px 2px;
    text-decoration: none;
    border: none;
}


.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    height: 80%;
}

.video-container-small {
    position: relative;
    padding-bottom: 70%;
    padding-top: 5px; height: 0; overflow: hidden;
}
 
.video-container-small iframe,
.video-container-small object,
.video-container-small embed {
    position: absolute;
    top: 0;
    left: 0%;
    width: 100%;
    height: 100%;
}

/*------------------------------------*\
    $MAIN
\*------------------------------------*/
/* GO! */