/*This holds all of the styles that are common between both the Normal Style and Typical Style themes.*/

/*HTML5 Update for older browsers*/
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

/*Browser Reset code*/
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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    background: transparent;
}

body
{
    margin: 0;
    padding: 0;
    font: 73% "Trebuchet MS" , verdana, arial, sans-serif;
    background: #2e2e2e url('../img/coolbluemotherboard.jpg');
}

@media only screen and (max-width: 768px) {
    body { background-image: none; }
}

em { font-style: italic; }
input[type="checkbox"] { vertical-align: middle; }

#container
{
    padding : 0;
    border : 5px solid #336633;
    color : #333;
}

header > div:first-child { margin-bottom: 20px; }

/*TOP BANNER*/
#topimg
{
    height : 150px;
    padding : 0;
    margin : 0;
    background : #417c2c url(../img/topimg.jpg) no-repeat;
    background-size: cover;
    color : #333;
}

#topimgProject
{
    height : 150px;
    padding : 0;
    margin : 0;
    background : #417c2c url(../img/DNA_code_by_prkos.jpg) no-repeat;
    color : #333;
}

#topimg h1, #topimgProject h1
{
    float : left;
    margin : 10px 0 0 15px;
    font-size : 150%;
    letter-spacing: 3px;
    color : #fff;
    background : #336633;
}

/*TOP NAVIGATIONY*/
.navcontainer ul
{
    float : left;
    width : 100%;
    padding-left : 0;
    font-size : 110%;
}

.navcontainer ul li
{
    display : inline;
}

.navcontainer ul li a
{
    float : left;
    padding : 0.2em 1em;
    text-decoration : none;
}

.navcontainer ul li a:hover, .navcontainer ul li a.current { color : #000; }

#ddlThemeSelect
{
    margin-top: 0;
    margin-bottom: 0;
}

/*MAIN CONTENT*/
.centerImage { text-align: center; }

#myPic
{
    margin: 47px 0 20px 0px;
}

#content
{
    margin: 0 0 5px 0px;
    padding : 5px;
    background : inherit;
}

#content > div:first-child { padding-left: 7px; }

@media only screen and (min-width: 768px) {
    #content > div.row > div { padding: 0 15px; }
}

#content a:link, #content a:visited, a#cphMain_hlRandLink
{
    text-decoration : none;
    /*background : inherit;*/
}

#content a:hover
{
    text-decoration: underline;
    /*background : inherit;*/
    color : #FFF;
}

input[type="submit"] {
    padding: 10px 50px;
    border-radius: 15px 7px;
    font-weight: bold;
}

input[type="submit"]:hover {
    border-style: inset;
    padding: 11px 49px 9px 51px;
    cursor: pointer;
}

input[type="submit"].aspNetDisabled {
    color: silver;
    border: none;
}

input[type="submit"].aspNetDisabled:hover {
    border: none;
    padding: 10px 50px;
    cursor: not-allowed;
}

/*SIDEBAR*/
#sidebar
{
    max-width : 160px;
    padding : 4px;
    color : #333;
    border: 1px dashed #BBB;
    border-left: none;
}

#sidebar a
{
    text-decoration: none;
}

/*SIDE MENU*/
.sidemenu ul
{
    list-style-type : none;
    text-align : left;
    padding-left: 5px;
    margin: 0;
}

.sidemenu ul li
{
    display : block;
    color : #666;
    background : inherit;
    list-style-type: none;
    padding-left : 15px;
    margin-top: 5px;
}

.sidemenu ul li:hover
{
    display : block;
    background : inherit;
    /*background : transparent url(../img/list-off.gif) no-repeat left;*/
    /*test styling*/
    list-style-type: none;
    background: #f5f5f5; /* Old browsers */
    background: -moz-linear-gradient(top,  #f5f5f5 0%, #00bb44 25%, #00bb44 74%, #f5f5f5 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(25%,#00bb44), color-stop(74%,#00bb44), color-stop(100%,#f5f5f5)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f5f5f5 0%,#00bb44 25%,#00bb44 74%,#f5f5f5 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f5f5f5 0%,#00bb44 25%,#00bb44 74%,#f5f5f5 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #f5f5f5 0%,#00bb44 25%,#00bb44 74%,#f5f5f5 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #f5f5f5 0%,#00bb44 25%,#00bb44 74%,#f5f5f5 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#f5f5f5',GradientType=0 ); /* IE6-9 */
    /*end test*/
    padding-left : 15px;
    margin-top: 5px;
}

.sidemenu ul li a
{
    font : normal 11px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
    text-decoration : none;
    color : #000;
    display: block;
}

.sidemenu ul li a:visited
{
    color: #00A;
}

.sidemenu ul li a:hover
{    
    color : #F5F5F5;
}

.sidemenu ul li a#current
{
    background : transparent url(../img/list-active.gif) no-repeat left;
    color : #666;
}

/*FOOTER*/
footer
{    
    clear: both;
    margin: 0;
    font-size: 90%;
    color: #333;
    text-align: center;
}

footer > div:first-child { padding-top: 5px; }
footer > div:last-child { padding-bottom: 5px; }

footer a:link, #footer a:visited
{
    text-decoration : none;
    background : inherit;
}

footer a:hover
{
    border-bottom : 1px dashed #eee;
    background: inherit;
}

/*TYPOGRAPHY*/
p
{
    line-height: 1.7em;
    margin : 15px;
}

h1
{
    margin-top : 10px;
    padding : 0;
    font-size : 140%;
    text-transform : uppercase;
    letter-spacing: 3px;
    color : #33FF33;
    background : inherit;
    font-weight: bold;
}

h2 {
    margin : 10px 0 0 5px;
    padding-left : 10px;
    font-size : 120%;
    font-weight: bold;
    text-transform : uppercase;
    letter-spacing : 5px;
    color : #fff;
    background : #417c2c;
}

a.projectName, a.expand { text-decoration: underline !important; }

/*CLASSES*/
.img
{
    float : left;
    padding : 10px;
    border : none;
}

.img a, .img a:hover
{
    border : none;
}

.projectImg { 
    width: 100%;
    max-width: 150px;
    max-height: 100px; 
}

    .projectImg.edit { 
        max-width:100%;
        max-height: unset;
    }
    
div.row.collapsed {
    max-height: 115px;
    overflow-y: hidden;
    transition: max-height 0.75s ease-out;
}

div.row.collapsed.expanded {
    max-height: 5000px;
    transition: max-height 1.25s linear;
}

    div.row.collapsed.expanded .expandOverlay { display: none; }
    
.expandOverlay {
    position: sticky;
    height: 15px;
    width: 100%;
    z-index: 200;
    bottom: 0;
    text-align: center;    
    padding-bottom: 3px;
}

.post
{
    padding : 3px;
    margin : 20px 10px 0 5px;
    font-size : 90%;
}

.post .date
{
    background : url(../img/clock.gif) no-repeat left center;
    padding-left : 15px;
    margin : 0 15px 0 5px;
}

.post .comments
{
    background: url(../img/comment.gif) no-repeat left center;
    padding-left : 15px;
    margin : 0 15px 0 5px;
}

.post .returnToTop
{
    padding-left : 15px;
    margin : 0 15px 0 5px;
}

ul.textList { padding-left: 25px; }
.form div[class*="col-"] { padding: 15px; }

blockquote
{
    font-weight : bold;
    font-style : italic;
    float: left;
    margin-top: 6px;
}

#randomSection
{
    font-size: 2em;
    text-align: center;
    padding-left: 5px;
}

#randomSection div.row:first-child > div:first-child { margin-top: 25px; }
#randomSection div.row:last-child > div:last-child { margin-bottom: 25px; }

.btnRandomize
{
    font-size: 2em;
}

/*CONTACT FORM POSITIONING*/
div.item > input, div.item > textarea { width: 100%; }

/*VALIDATION ERROR MESSAGES*/
.errorMessage
{
    font-style: italic;
    font-weight: bold;
}

/*PROJECT PAGE UPDATE SPAN STYLE*/
.update
{
    font-weight: bolder;
    font-size: 1.2em;
}

/*HOME PAGE ACCORDION HEADER STYLE*/
.accordionBackGround:hover
{
    box-shadow: 0.5em 0.3em 1.2em 0.1em black;
    text-decoration: none;
}

h3
{
    margin : 10px 0 0 5px;
    padding-left : 10px;
    font-size : 110%;
    font-weight: bold;
    font-variant: small-caps;
}

#login
{
    float: right;
}

        /* TOP NAVIGATION FOR MOBILE */
.hide {
    float: left;
    overflow-y: scroll;
    height: 0;
    transition: height 0.25s linear;
}

.show {
    max-height: 200px;
    height: 200px;
    transition: height 0.25s linear;
}

.navBar {
    float: left;
    width: 100%;
    height: auto;
}

#navToggle { padding: 5px 0 0 5px; }

#navToggle > input {
    width: 32px;
    height: 28px;
    max-width: 100%;
}

nav.showWhenSmall div.navcontainer ul li { 
    text-align: center;
    margin: 2px 0;
}

nav.showWhenSmall div.navcontainer ul li a { width: 100%; }
nav.showWhenSmall div.navcontainer ul { border: none; }
nav.showWhenSmall div.navcontainer div div[class*="col-xs"]:last-child ul li a { border-right: none; }

nav.showWhenSmall select { 
    float: right;
    padding: 8px 15px;
}

nav .navcontainer ul li a { padding: 1em; }

#snapHeader {
    text-align: center;
    padding: 2px;
    margin-top: 7px;
}

#snapHeader.hide { padding: 0; }

/* CONTENT SNAPPING */

.snapTop {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 5000;
}

.snapBottom {
    position: fixed;
    bottom: 5px;
    right: 5px;
    left: 5px;
}