@import url(https://fonts.googleapis.com/css?family=Ubuntu+Condensed);
html, body, ul, li, ol, p, h1, h2, h3, h4, h5, h6, img, a{margin:0;	padding: 0;}
body{font-family: 'Ubuntu Condensed', sans-serif;}
h1,h2,h3,h4{font-weight: 800;}
h2{text-align: center; margin-bottom: 10px; font-size: 35px;}
h2, h3{color: #c00;}
h4{margin-top: 10px;}
h5{font-size: 22px;}
h6{font-size: 26px; font-weight: 800;}
ul {list-style-type: none;}
hr{border-top: 1px solid #b0aaaa; margin-top: 10px; margin-bottom: 10px;}
iframe{border: none;}
footer{margin: 20px 0;}

.divider{margin: 30px auto;}

#resume{
	width: 100%;
	background-image: url(../images/skillsBG.jpg);
	background-repeat: no-repeat;
	background-position: center;
}
#resumeExperience ul{margin-left: 25px; list-style-type: disc;}

#htmlLvl, #cssLvl, #jsLvl, #phpLvl, #jQueryLvl, #mySQLLvl, #psLvl, #flashLvl, #wpLvl, #dwLvl, #aeLvl, #prLvl, #maxLvl{
	width: 100%;
	height: 15px;
	background-color: #c00;
}
#htmlLvl{width: 95%;}
#cssLvl{width: 95%;}
#jsLvl{width: 90%;}
#jQueryLvl{width: 85%;}
#phpLvl{width: 60%;}
#mySQLLvl{width: 55%;}
#psLvl{width: 95%;}
#flashLvl{width: 90%;}
#wpLvl{width: 85%;}
#dwLvl{width: 75%;}
#aeLvl{width: 65%;}
#prLvl{width: 60%;}
#maxLvl{width: 50%;}

.makeRed{color: #c00}

.skillObj img{height: 25px;}
.skillObj img{height: 25px;}
.skillGrayBG{width: 250px;height: 15px;background-color: #ccc;margin: 5px 10px;}
.skillRow{display: inline-flex; margin: 3px 5px;}
.skillRow img{margin-right: 5px;}

#iconProfile{width: 40px;height: 35px; position: absolute; left: 48%; background-image: url(../images/icons-preview.png); background-color: transparent;background-position: -921px -496px;}
#iconResume{width: 40px;height: 35px; position: absolute; left: 48%; background-image: url(../images/icons-preview.png); background-color: transparent;background-position: -386px -555px;}
#iconWeb{width: 40px;height: 35px; position: absolute; left: 48%; background-image: url(../images/icons-preview.png); background-color: transparent;background-position: -385px -681px;}
#iconApp{width: 40px;height: 35px; position: absolute; left: 48%; background-image: url(../images/icons-preview.png); background-color: transparent;background-position: -921px -496px;}
#iconRich{width: 40px;height: 35px; position: absolute; left: 48%; background-image: url(../images/icons-preview.png); background-color: transparent;background-position: -460px -680px;}
#iconContact{width: 40px;height: 35px; position: absolute; left: 48%; background-image: url(../images/icons-preview.png); background-color: transparent;background-position: -690px -559px;}

.iconNavProfile{width: 40px;height: 35px; position: absolute; left: 48%; background-image: url(../images/icons-preview-white.png); background-color: transparent;background-position: -921px -496px;}
.iconNavResume{width: 40px;height: 35px; position: absolute; left: 48%; background-image: url(../images/icons-preview-white.png); background-color: transparent;background-position: -386px -555px;}
.iconNavWeb{width: 40px;height: 35px; position: absolute; left: 48%; background-image: url(../images/icons-preview-white.png); background-color: transparent;background-position: -385px -681px;}
.iconNavApp{width: 40px;height: 35px; position: absolute; left: 48%; background-image: url(../images/icons-preview-white.png); background-color: transparent;background-position: -921px -496px;}
.iconNavRich{width: 40px;height: 35px; position: absolute; left: 48%; background-image: url(../images/icons-preview-white.png); background-color: transparent;background-position: -460px -680px;}
.iconNavContact{width: 40px;height: 35px; position: absolute; left: 48%; background-image: url(../images/icons-preview-white.png); background-color: transparent;background-position: -690px -559px;}

.borderBox{border:2px solid #b0aaaa; padding: 2px;}
#websites li img, #richmedia li img{cursor: pointer;}
#websites li img:hover, #richmedia li img:hover{opacity: 0.6;}

/* scroller stuff */
/* Container DIV - automatically generated */
.simply-scroll-container {position: relative;}

/* Clip DIV - automatically generated */
.simply-scroll-clip {position: relative;overflow: hidden;}

/* UL/OL/DIV - the element that simplyScroll is inited on
Class name automatically added to element */
.simply-scroll-list {overflow: hidden;margin: 0;padding: 0;list-style: none;}
	
.simply-scroll-list li {padding: 0;margin: 0;list-style: none;}
	
.simply-scroll-list li img {border: none;display: block;}

/* Custom class modifications - adds to / overrides above
.simply-scroll is default base class */
/* Container DIV */
.simply-scroll {width: 140px;height: 50px;margin-bottom: 1em;}

/* Clip DIV */
.simply-scroll .simply-scroll-clip {width: 360px;height: 50px;}
	
/* Explicitly set height/width of each list item */	
.simply-scroll .simply-scroll-list li {float: left; /* Horizontal scroll only */width: 140px;height: 50px;}

/* LightBox */
#lightBox{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	background-color: rgba(0, 0, 0, 0.8);
	display: none;
}

#lightBoxArea{
	position: relative;
	margin: 30px auto;
	width: 80%;
	height: 90%;
	background-color: #fff;
	/* border-radius: 10px; */
	display: none;
}
#lighBoxBorder{
	position: absolute;
	width: 98%;
	height: 98%;
	top: 1%;
	left: 1%;
	border: 3px solid #b0aaaa;
	/* border-radius: 5px; */
}
.lighboxClose{
	position: absolute;
	top: 5px;
	right: 10px;
	font-size: 20px;
	font-weight: 800;
}
.demoMade{position: absolute;top: 7px;right: 80px;}
.demoMade img{width: 40px; height: 40px;margin-top: 5px;}

.demoPiece{position: absolute; top: 10px; left: 10px;}
.demoPiece2{position: absolute; top: 290px; left: 10px;}
.demoPiece3{position: absolute; top: 420px; left: 10px;}

.demoPieceLong{position: absolute; top: 150px; left: 10px;}
.demoHTML{position: absolute; top: 10px; left: 10px;}

.siteButton{width: 100px; margin: 10px 0; padding: 5px 10px; background-color: #b0aaaa; color: #c00; text-align: center;}
.siteButton a{color: #c00; font-size: 16px; font-weight: 800;}

/* masthead */
header{
	background-image: url("../images/headerImage_825.jpg");
	background-position: center center;
	background-size: cover;
	height: 250px;
}

.masthead h1{padding: 0 0 0 4%; font-size: 48px;color: #fff;}
.masthead h2{color: #fff;text-align: left;font-size: 28px; padding-left: 4%;}

/* .nav li a{padding: 2px 15px; background-color: rgba(204,0,0,0.6);top: -27px; color: #fff;}
.nav li a:hover{color: #c00;} */
/* contact */
#contactInfo a{color: #c00; text-decoration: none;}
/* @media screen and (max-width: 992px) and (min-width: 768px) {
	.skillGrayBG{
		width: 200px;
	}
} */
.modal p{margin-bottom: 10px;}
.modal-img{height: 40px; padding: 0 5px 5px 0;}
.modal-imgPHP{height: 30px; padding: 0 5px 5px 0;}
.modal img{opacity: 1 !important; cursor: context-menu !important;}
.navbar{
	min-height: 30px;
}
.navbar-toggle{
	padding: 4px;
	margin-top: 4px;
	margin-bottom: 0;
}
.navbar-default{
	width: 100%;
	background-color: transparent;
	border-color: transparent;
	color: #fff;
	z-index: 100;
}
.navbar-default .navbar-nav .active a{
	background-color: rgba(204, 0, 0,1) !important;
	color: #fff !important;
}
.navbar-default .navbar-nav li a,
.navbar-default .navbar-nav li a:hover{
	color: #fff !important;
}
.nav li{
	background-color: rgba(204,0,0,0.6);
	color: #fff;
}
.nav li a{
	padding: 4px 15px;
}
.nav li:hover{
	background-color: rgba(204,0,0,1);
	color: #fff;
}
.btn-danger{
	background-color: rgba(204,0,0,1);
	color: #fff;
}
.btn-danger:hover, .btn-danger:active{
	background-color: rgba(204,0,0,0.7);
	color: #fff;
}
.close{font-size: 30px;}

 @media (max-width: 992px){
	.skillGrayBG{
		width: 200px;
	}
}
@media (max-width: 767px){
	.caption p{
		text-align: center;
	}
}