﻿
/* text formatting */
p.sans {
    font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: rgba(130,130,130,1.00);
}

/*p.sanscenter {
    font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: rgba(0,130,0,1.00);
	text-align: center
}*/



/*instead of .w3-white -- added border on right side of nav area (4/4/19 decided to delete border)
.portwhite {
	color:#000!important;
	background-color:#fff!important;
	border-right: 1px inset;
	border-right-color: rgba(0,0,0,0.50)
}
*/

/* 4/4/19 - This sidebar/menu has semi-transparent background */
.PP-sidebar{height:100%;width:200px;background-color:rgba(255,255,255,0.90);position:fixed!important;z-index:1;overflow:auto}
@media (min-width:993px){.w3-modal-content{width:900px}.w3-hide-large{display:none!important}.PP-sidebar.w3-collapse{display:block!important}}
@media (max-width:992px){.PP-sidebar.w3-collapse{display:none}.w3-main{margin-left:0!important;margin-right:0!important}}

/* alternate holder for the header (instead of w3-white line 203 in w3_PP.css) */
.header {
	position: fixed;
	width: 100%;
	height: 105px;
	z-index: 100;
	top:0;
	background-color: rgba(255,255,255,0.95);
	/*padding: 15px 0px 0px 15px;*/
	color:rgba(70,70,70,1.00);
}



ul {
	list-style-type: none;
	margin: 35px 0px 0px 0px;
	padding: 0;
	overflow: hidden;
	/*background-color: rgba(200,200,200,1.0);*/
}

li {
    float: left;
}

li a {
    display: block;
    font-size: 18px;
	color: rgba(75,75,75,1.00);
    text-align: center;
    padding: 0px 0px 0px 20px;
    text-decoration: none;
}

li a:hover {
    color: rgba(200,200,200,1.00);
	/*background-color: rgba(20,20,20,1.00);*/
}




/* button for text under images on home page */
.button {
    /*background-color: rgba(0,246,0,1.00);*/
    border: none;
    /*color: white;*/
    padding: 0px 25px 10px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    /*font-size: 16px;*/
    /*margin: 4px 2px;*/
    cursor: pointer;
}




/* images on portfolio pages */
.img-responsive {
	display: block;
	max-width: 100%;
	height: auto;
}



/*  drop down menu  */
.overlay {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-y: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: left;
    margin-top: 20px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}


/* scroll to top button */
a.back-to-top {
	display: none;
	width: 60px;
	height: 60px;
	text-indent: -9999px;
	position: fixed;
	z-index: 100;
	right: 20px;
	bottom: 20px;
	background: /*rgba(0,0,0,.50)*/ url("LINKS/Arrow_Up_Thin_Gray.png") no-repeat center 50%;
	/*-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;*/
}

a:hover.back-to-top {
	background-color: rgba(200,200,200,0.25);
}



.padding-16{
	background-color: rgba(130,130,130,1.00);
	padding-bottom:16px
}



/* this aligns the non-clickable text on the list of personal projects to the clickable text on the list. it's the text of the page the viewer is on, so if you're on medals.html that text is not clickable in the list of personal projects. this style is only on personal projects pages.  */
.pp-padding{
	/*display: none;*/
	text-decoration:none;
	padding:2px 0px 2px 25px!important
}

.pp-button{
	/*display: none;*/
	text-decoration:none;
	padding:2px 0px 2px 25px!important
}

.pp-button:hover{
	color: white;
	/*background: url("LINKS/Nav_Home_gray_12x12px.png") no-repeat left;*/
	/*color:rgba(255,255,255,1.00);*/
	background-color:#ccc
}/* 1/17/18 changed the hover color from "#000" to rgba(255,255,255,1) */

.pp-bar-item{
	width:100%;
	border:none;
	outline:none;
	display:block
}