/* set the page background color and default font */
body{
    background-color:#eef2f7;
    font-family:Arial, Helvetica, sans-serif
    margin:30px;
}

/* main page heading - center and color */
h1{
    text-align:center;
    color:#1f3c88;
    margin-bottom:20px;
}

/* Override the default CSS for jquery ui tabs
     - To find the right object names I used the developer console and downloaded the base css for tabs 
       from the jquery site so I could look at what they are doing in the default css file 
*/
/* tab container - modified size and appearance */
#tabs{
    width:900px;
    margin:auto;
    border-radius:15px;             /* rounds the corners */
    box-shadow:0px 4px 10px #999; /* adds shadow to tab container*/
}


/* add background color behind the tabs */

.ui-tabs-nav{
    background:#1f3c88;
    border:none;
    border-radius: 15px 15px 0px 0px; /* make the tab background color have rounded corners to match the tab container */
}

/* round and space out the tab buttons */
.ui-tabs .ui-tabs-nav li{
    border-radius:10px 10px 0 0; 
    margin-right:5px;
}

/* tab text styles - color and font*/
.ui-tabs-nav a{
    color:white;
    font-weight:bold;
    text-decoration:none;
}

/* change tab text when mouse hovers over it */
.ui-tabs-nav a:hover{
    color:#443aca;
}


/* highlight currently selected tab */
.ui-tabs .ui-tabs-nav li.ui-tabs-active{
    background:#4a69bd;
    border:none;
}


/* styles for the content inside each tab */
.ui-tabs-panel{
    background:white;
    padding:20px;
    min-height:350px;
    font-size:1.1em;
    line-height:1.6;
}


/* modify the size and spacing of linkedin icon - could add more but I deleted facebook forever ago */
.social{
    width:100px;
    margin-right:10px;
    transition:0.3s;
}

/* enlarge icon on mouse hover */
.social:hover{
    transform:scale(1.15);
}


/* add spacing between project list items */
ul li{
    margin-bottom:10px;
}