:root { 
    display: block;
    background-color: #ffffcc;
}

.header
{
    margin: 0;
    padding: 0;
    width: 1000px;
    // background-image: url("../images/header.jpg");
}

.header-text
{
    font-family: 'Times New Roman',Times,serif;
    font-style: italic;
    font-weight: bold;
    text-align: center;
    font-size: 36pt;
    padding: 20px 0 0 0;
}
.header-sub-text
{
    padding: 0 0 20px 0;
    font-family: 'Times New Roman',Times,serif;
    font-style: italic;
    font-weight: bold;
    text-align: center;
    font-size: 24pt;
}

.footer
{
    display: block;
    padding: 15px 0;
    background-color: #e7e7e7; // #fda737;
    color: #000;
}

.footer a
{
    text-decoration: none; 
    color: #000;
    transition: color 1s;
    -webkit-transition: color 1s;
}

.footer a:hover
{
    color: #0000ff;
}

.footer-host
{
    margin: 0 120px 0 0;
    float: right;
    text-align: center;
}

.footer-built
{
    margin: 0 0 0 120px;
    float: left;
    text-align: center;
}

/*
base page layout. 1000 pixels wide, sit in the middle with an off white background
*/
.website
{
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 12pt;
    padding: 0;
    margin: 0 auto;
    display: block;
    width: 1000px;
    background-color: #fcfcff;
}

/*
Main content part of the pages, nothing fancy
*/
.content
{
    display: block;
}

.content-header
{
    text-align: center;
    font-size: 18pt;
    color: darkblue;
    font-style: italic;
}

.content-body
{
    display: block;
    color: black;
    font-size: 12pt;
    margin: 10px 25px 100px 25px;
    padding: 0;
    min-height: 500px;
}

.home-page-header
{
    display: block;
    padding: 20px 120px;
}

.home-page-text
{
    float:left;
}

.home-page-image
{
    float:left;
}

.home-page-image img
{
    padding: 5px 5px 0 0;
}

#slides-container
{
    padding: 20px 0;
    position: relative;
    top: 0;
    left: 0;
    display: block;
}

.software-slides
{
    background-color: #e7e7e7;
    color: black;
}

.pic-gallery
{
    background-color: black;
    color: white;
}

.gallery-list
{
    display:block;
}

.gallery-thumb
{
    font-family: 'Montez', cursive;
    box-shadow: 10px 10px 5px darkgray;
    background-color: white;
    color: black;
    float: left;
    margin: 10px;
    border: 1px solid darkgray;
}

.gallery-thumb:hover
{
    border-top: 2px solid darkgray;
    border-left: 2px solid darkgray;
    border-right: none;
    border-bottom: none;
    
}

.gallery-thumb a
{
    color: black;
    display: block;
    text-align: center;
    font-size: 20pt;
    text-decoration: none;
    margin: 0 0 10px 0;
}

.gallery-thumb>a>img
{
    margin: 10px;
    max-width: 185px;
}

.gallery-image
{
    margin: 0 auto;
    max-width: 800px;
}

.gallery-image img
{
    max-width: 800px;
}

.sw-image
{
    float: left;
}

.sw-image img
{
    width: 500px;
}

.sw-writeup
{
    float:left;
    margin: 0 20px;
    width: 300px;
}

.image-thumb
{
    width:100px;
    opacity: 0.5;
    filter:alpha(opacity=50);
}

.video-text
{
    margin: 10px 0;
    width: 300px;
    float: left;    
}

#slide-shortcut
{
}

#slide-shortcut ul
{
    list-style: none;
    display: block;
}

#slide-shortcut ul li
{
    display: inline;
    padding: 10px;
}

.nav-prev p
{
    position: absolute;
    left: 20px;
    top: 50%;
    height: 32px;
    width: 32px;
    background-image:url('../images/nav-left.png');
}

.nav-next p
{
    position: absolute;
    right: 20px;
    top: 50%;
    height: 32px;
    width: 32px;
    background-image:url('../images/nav-right.png');
}

.nav-prev p:hover, .nav-next p:hover
{
    cursor: pointer;
}

/*
The menu is a fairly basic unordered list of links with a bit
of styling for the hovers etc.
*/
.main-menu
{
    display: block;
    background-color: #e7e7e7; /*#ffffcc;*/
    margin: 5px auto;
    padding: 0;
}

.main-menu ul
{
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
}

.main-menu ul li
{
    padding: 0;
    display: table-cell;
    vertical-align: middle;
}

.main-menu ul li a
{
    font-size: 12pt;
    color: black;
//    display: table-cell;
    vertical-align: middle;
//    width: 100px;
    height: 3em;
    text-decoration: none;
    text-align: center;
    padding: 5px 10px 5px 10px;
    transition: color, background-color 1s;
    -webkit-transition: color, background-color 1s;
}

.main-menu ul li a:hover
{
    text-decoration: none;
    color: darkblue;
    background-color: #ffffcc;
}

.main-menu li:hover ul 
{
  display: block;
  position: absolute;
  background-color: #e7e7e7;
}

.main-menu li:hover ul li 
{
}

.main-menu li:hover a 
{ 
    color: black;
}
 
.main-menu li:hover li a:hover 
{ 
    color: darkblue;
    background-color: #ffffcc; /*#fda737;*/
}

.main-menu li ul 
{ 
    display: none;
}

/*
on the CV page we want to display the skills summary as 
a sidebar on the left
*/
.skills-layout
{
    padding: 5px;
    // background-color: #ffffcc;
    float:left;
    width: 200px;
}

.skills-layout img
{
    margin: 10px 20px;
}

.skill-category
{
    padding: 10px;
    margin: 5px;
    color: darkblue;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 10px;
    border-top: 1px solid #00cccc;
    border-bottom: 2px solid #00cccc;
    border-right: 2px solid #00cccc;
    border-left: 1px solid #00cccc;
}

.sc-heading
{
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    text-align: center;
}

.sc-detail
{
    display: block;
}

.skill
{
    float: left;
    margin-right: 10px;
}

.skill-exp
{
    float: right;
    margin-right: 5px;
    text-align: left;
}

/*
accordian styling, this is my own interpretaion of an
accordian style display, not overly fancy, but it works
*/
.accordian
{
    position: relative;
    float: right;
    border: 1px solid lightblue;
    margin: 5px;
    background-color: #e7e7e7;
    color: black;
    width: 760px;
    cursor: pointer;
}

.accordian-header
{
    position: relative;
    display: block;
}

.accordian-panel
{
    padding: 10px 5px;
    font-size: 10pt;
    color: black;
    background-color:#fcfcff;
    border-top: 1px solid lightblue;
}

.company-name
{
    font-size: 14pt;
    margin: 5px;
}

.duration
{
    font-size: 11pt;
    margin: 5px;
}

.assignment-role
{
    font-size: 11pt;
    margin: 5px;
}

.assignment-role:after
{
    position: absolute;
    content: ' ';
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #e7e7e7;
    border-bottom: none;
    right: 25px;
    bottom: -15px;
}

.active-header .assignment-role:after
{
    position: absolute;
    border-top: none;
   /* border-left: 40px solid transparent;
    border-right: 40px solid transparent;*/
    border-bottom: 10px solid #Fcfcff;
    bottom: -6px;
}


.skill-version
{
    background-color: #e7e7e7; 
    float: left;
    padding: 5px;
    margin: 5px 5px;
    border: 1px #00cccc; 
}