/*

frogs.css stylesheet

Author:	Paul C. Rogers II
Date:	December 4, 2015

*/



/*

Color Pallete

	Gray: light to dark:

	rgb(168,171,172);
	rgb(131,136,138);
	rgb(104,111,114);
	rgb(80,89,93);
	rgb(57,67,72);

*/



/* Defualt Styles */



* {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 1em;
	margin: 0px;
	padding: 0px;
	box-sizing: content-box;
}



/* Header Styles */



header {
	background-color: rgb(80,89,93);
	background: -webkit-linear-gradient(30deg, black  , rgb(57,67,72) ,rgb(104,111,114) , rgb(57,67,72) , black  );
	background: -moz-linear-gradient(30deg, black  , rgb(57,67,72) ,rgb(104,111,114) , rgb(57,67,72) , black  );
	background: -o-linear-gradient(30deg, black  , rgb(57,67,72) ,rgb(104,111,114) , rgb(57,67,72) , black  );
	background: linear-gradient(30deg, black  , rgb(57,67,72) ,rgb(104,111,114) , rgb(57,67,72) , black  );
	
	border-bottom: black 6px solid;
	height: 90px;
	width: 100%;
	min-width: 300px;
	position: fixed;
	z-index: 30;
}

header img {
	width: 450px;
	margin: 0px auto;
	float: left;
}


/* Nav Styles */

nav {
	display: block;
}

nav ul {
	margin: 0px;
	}

nav ul a li {
	display: block;
	float: left;
	text-align: center;
	color: black;
	font-size: 1.3em;
	font: black;
	font-family: Arial;
	font-weight: bold;
	width: 20%;
	min-width: 130px;
	height: 60px;
	line-height: 3em;
	margin: 15px 3%;
	list-style-type: none;
	text-decoration: none;
	background-color: rgb(168,171,172);
	background: -webkit-linear-gradient(30deg, rgba(80,89,93,0.9)  , rgb(149,157,161) 90%);
	background: -moz-linear-gradient(30deg, rgba(80,89,93,0.9)  , rgb(149,157,161) 90%);
	background: -o-linear-gradient(30deg, rgba(80,89,93,0.9)  , rgb(149,157,161) 90%);
	background: linear-gradient(30deg, rgba(80,89,93,0.9)  , rgb(149,157,161) 90%);
	
	outline: 1px solid black;
}

nav ul a:link, nav ul a:visited {
	color: black;
}

nav ul li:hover {
	display: block;
	float: left;
	text-align: center;
	height: 60px;
	list-style-type: none;
	background-color: rgb(168,171,172);
	background: -webkit-linear-gradient(30deg, gray  , rgb(186,186,187) 90%);
	background: -moz-linear-gradient(30deg, gray  , rgb(186,186,187) 90%);
	background: -o-linear-gradient(30deg, gray  , rgb(186,186,187) 90%);
	background: linear-gradient(30deg, gray  , rgb(186,186,187) 90%);
}



/* Body Styles */



body {
	background-color: rgba(131,136,138,0.5);
	background: -webkit-linear-gradient( rgba(186,186,187,0.7) , rgba(104,111,114,0.7)  , rgba(186,186,187,0.7) );
	background: -moz-linear-gradient( rgba(186,186,187,0.7) , rgba(104,111,114,0.7)  , rgba(186,186,187,0.7) );
	background: -o-linear-gradient( rgba(186,186,187,0.7) , rgba(104,111,114,0.7)  , rgba(186,186,187,0.7) );
	background: linear-gradient( rgba(186,186,187,0.7) , rgba(104,111,114,0.7)  , rgba(186,186,187,0.7) );
}



/* Section Styles */



section {
	margin: 0px;
	/*padding: 5px;*/
	text-align: center;
}

section.main {
	padding-top: 100px;
	min-width: 550px;
}

section.tabSection {
	width: 90%;
	margin: 20px auto;
	/*height: 550px;*/
}

block.main {
	display: block;
	margin: 0px auto;
}

block.main p {
	width: 85%;
	margin: 2px auto;
	float: center;
	font-size: 1.2em;
	text-indent: 50px;
	text-align: justify;
}





/* styles */



h1 {
	color: black;
}

h1.Home {
	font-size: 1.5em;
	width: 700px;
	margin: 0px auto;
}

div.caption {
	float: right;
	margin-top: 70px;
	margin-right: 50px;
	width: 400px;;
	height: 80px;
	display: block;
	/*outline: 1px solid red;*/
	position: absolute;
	bottom: 2px;
	left: 10px;
}

article.Home {
	display: block;
	width: 90%;
	height: 550px;
	background-color: rgba(80,89,93,0.3);
	background: -webkit-linear-gradient(20deg, rgba(80,89,93,0.6)  , rgb(168,171,172) 70%);
	background: -moz-linear-gradient(20deg, rgba(80,89,93,0.6)  , rgb(168,171,172) 70%);
	background: -o-linear-gradient(20deg, rgba(80,89,93,0.6)  , rgb(168,171,172) 70%);
	background: linear-gradient(20deg, rgba(80,89,93,0.6)  , rgb(168,171,172) 70%);
	
	border: 3px black solid;
	border-radius: 7px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	
	margin: 3% auto;
	box-shadow: 13px 10px 8px rgb(80,89,93);
	-webkit-box-shadow: 13px 10px 8px rgb(80,89,93);
	-moz-box-shadow: 13px 10px 8px rgb(80,89,93);
}

img {
	height: 250px;
	display: block;
}

img#D-art {
	position: absolute;
	bottom: 30px;
	left: 30px;
}

img#blender-animation {
	position: absolute;
	bottom: 10px;
	left: 30px;
	height: 70%;
	max-width: 600px;
	max-height: 480px;
}

p {
	font-size: 1.2em;
	text-indent: 50px;
	text-align: justify;
	color: black;
	display: block;
}

p.bar {
	display: block;
	width: 98%;
	height: 5px;
	margin: 0px auto;
	background-color: rgba(57,67,72,0.8);
	border: 2px black solid;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	
	outline: red;
}

p#caption1,p#caption2,p#caption3, {
	font-size: 0.5em;
	
}

ul#blender {
	display: block;
	list-style-type: none;
	margin-top: 50px;
}

li.blender {
	display: none;
}



div.mainNav {
	width: 100%;
	height: 60px;
	box-sizing: none;
}

div#slideshow1, div#slideshow2, div#slideshow3 {
	display: none;
}

div#tabs {
	position: relative;
}

div.gallery {
	position: absolute;
	left: 20px;
	bottom: 20px;
	width: 95%;
	height: 350px;
	display: block;
}

img.mainImg {
	position: absolute;
	top: 0px;
	left: 0px;
}





#tabs {
	margin-bottom:20px;
	display: block;
	height: 500px;
	height: auto;*/
	background-color: rgb(168,171,172);
	background: -webkit-linear-gradient(30deg, gray  , rgb(186,186,187) 90%);
	background: -moz-linear-gradient(30deg, gray  , rgb(186,186,187) 90%);
	background: -o-linear-gradient(30deg, gray  , rgb(186,186,187) 90%);
	background: linear-gradient(30deg, gray  , rgb(186,186,187) 90%);
	
	border: 2px solid black;
}

.codedSites {
	min-height: 900px;
}

.skills {
	min-height: 1000px;
}

.ui-tabs-nav {
	padding: .2em .1em .2em .2em;
	float: left;
	width: 200px;
	margin-bottom: 100px;
	background-color: rgba(168,171,172,0.0);
	border: 0px;
}
.ui-tabs-nav li {
	clear: left;
	width: 100%;
	border-bottom-width: 1px !important;
	border-right-width: 0 !important;
	margin: 0 -1px .2em 0;
	background-color: red;
}
.ui-tabs-nav li a {
	display:block;
	width: 84%;
}
.ui-tabs-nav li.ui-tabs-active {
	padding-bottom: 0;
	padding-right: .1em;
	border-right-width: 1px;
}
.ui-tabs-panel {
	padding: 1em;
	float: right;
	width: 70%;
	min-height:300px;
}

footer {
	height: 50px;
	display: block;
	border-top: 2px solid black;
	background-color: rgb(80,89,93);
	background: -webkit-linear-gradient(30deg, black  , rgb(57,67,72) ,rgb(104,111,114) , rgb(57,67,72) , black  );
	background: -moz-linear-gradient(30deg, black  , rgb(57,67,72) ,rgb(104,111,114) , rgb(57,67,72) , black  );
	background: -o-linear-gradient(30deg, black  , rgb(57,67,72) ,rgb(104,111,114) , rgb(57,67,72) , black  );
	background: linear-gradient(30deg, black  , rgb(57,67,72) ,rgb(104,111,114) , rgb(57,67,72) , black  );
	position: relative;
	bottom: -50px;
	width: 100%;
	float: bottom;
}

a.contact, a.contact:active, a.contact:visited {
	font-size: 1.8em;
	color: black;
	font: black;
	text-decoration: none;
	display: block;
	margin: 0px auto;
	width:200px;
}

a.contact:hover {
	font-size: 1.9em;
	color: black;
	font: black;
	text-decoration: none;
	display: block;
	margin: 0px auto;
	width:210px;
}

form {
	border: 1px solid black;
	background-color: rgb(168,171,172);
	padding: 30px;
	margin: 50px auto;
	width: 60%;
}

fieldset {
	margin: 20px;
	padding: 20px;
}