/* Make HTML 5 elements display block-level for consistent styling */  
header, nav, article, footer, address {   
    display: block;   
} 

body {
  font-family: ColaborateLightRegular, Arial, Helvetica, sans-serif;
  font-size: 1em;
  line-height: 1.618em;
  color: black;
  font-weight: 100;
  display:block;
  }
  
/* Header Styles */

header {padding-top:10px;text-align: center; }

#name {
	font-size: 1.8em;
	line-height: 1em;
	letter-spacing: -0.05em;
	font-family: ColaborateThinRegular, Arial, Helvetica, sans-serif;
	font-weight: 100;
	text-transform: capitalize;
	margin-bottom:5px;
	margin-top:10px;
}

#name a {text-decoration: none; color:black}
#name.me a:hover {text-decoration: none; color:#9f7ab6}
#name.cal a:hover {text-decoration: none; color:#18453b}
#name.css a:hover {text-decoration: none; color:#388df4}
#name.check a:hover {text-decoration: none; color:#709d98}
#name.mm a:hover {text-decoration: none; color:#2e9d28}
#name.write a:hover {text-decoration: none; color:#cc1317}

.lastname {
	font-family:ColaborateBoldRegular, Arial, Helvetica, sans-serif;
	  font-weight: bold;

}
#blurb {
	text-align: justify;
	padding:10px 0 30px 0;
	width: 90%;
	max-width:900px;
	font-size: 1em;
	margin:auto;
}


/********** Nav ***********/

#header {width:100%;}

nav.me a.current {color:#9f7ab6}


nav.me {color:#9f7ab6}
nav.cal {color:#548654}
nav.css {color:#388df4}
nav.check {color:#709d98}
nav.mm {color:#2e9d28}
nav.write {color:#cc1317}
nav ul { 
	list-style: none; 
	margin: 0; 
	padding: 0; 
	display:inline;
}
nav li{ 
	display:inline; 
	line-height: 2.5em;
	padding:0;
}

nav li a {width:auto; padding-right:.1em; padding-left:.1em; display:inline-block;}

nav {
	text-align: center; 
	background-color: black; 
	padding-top:.2em; 
	font-family: ColaborateThinRegular, Arial, Helvetica, sans-serif;  
	font-weight:100;
	z-index: 1000;
}
nav a, a:visited {
	color: white; 
	font-size:1.5em; 
	text-decoration: none;
}

p.ugh a, a:visited {
	color: white; 
	font-size:1em; 
	text-decoration: none;
}

p.ugh a:hover {	font-weight:normal!important; }

nav.me a:hover {color: #9f7ab6; font-weight: bold;}
nav.cal a:hover {color: #548654; font-weight: bold;}
nav.css a:hover {color: #388df4; font-weight: bold;}
nav.check a:hover {color: #709d98; font-weight: bold;}
nav.mm a:hover {color: #2e9d28; font-weight: bold;}
nav.write a:hover {color: #cc1317; font-weight: bold;}

.social {
	padding:.2em 0 0 0;
	margin:0;
	z-index: 10;
}

.social a  {
  text-decoration: none;
  -o-transition:.25s;
  -ms-transition:.25s;
  -moz-transition:.25s;
  -webkit-transition:.25s;
  transition:.25s;
}

.social img  {
	display: inline;
	}

.social a {
	opacity: 1.0;
}

.social a:hover {
	opacity: .6;
	color:purple;
}

.social p {display: inline; }


#name img {
  height: 75px;
  margin-bottom: -15px;
  text-align: center;
  -webkit-transition: 0.5s ease-in;
  -moz-transition: 0.5s ease-in;
  transition:  0.5s ease-in;
}

#name img:hover {
    -webkit-transform: rotate(-360deg) translate3d( 0, 0, 0);
     -moz-transform: rotate(-360deg);
       -o-transform: rotate(-360deg);
      -ms-transform: rotate(-360deg);
          transform: rotate(-360deg);
}

#logo {display: none; }


/******************* Content *******************/

#main {
	margin:auto;
	padding-top:30px;
}

#port {
	max-width:1000px;
	margin:auto;
	padding-top:10px;
	
}

#main p {padding: .5em 0;}

#resume ul{padding: 0 0 10px 50px;}

#aboutme {
	width: 99%;
	margin-right: 0%;
	float: none;
}

img.aboutme {
	width: 99%;
	margin-top: 0;
	float:none;
}

.clear {clear: both;}

/**********Portfolio Tabs ***************/

.ui-tabs .ui-tabs-nav li { 
	list-style: none; 
	float: left; 
	position: relative; 
	width: 25%;
	top: 1px; 
	border-bottom: 0 !important; 
	padding: 0; 
	white-space: nowrap; 
}
#tabs ul {
	margin:10px 0;
	padding:0;
}


.ui-tabs-nav h3{
  color: #333;
  margin: 0 auto;
  font-size: .8em;
  text-align: center;
 
}

.ui-tabs-nav a {
  display: block;
  background-color: #dddddd;
  color: #333;
   padding: 6% 0 8%;
  -webkit-transition: background-color 0.15s ease-in;
  -moz-transition: background-color 0.15s ease-in;
  transition: background-color 0.15s ease-in;
  text-decoration: none;
}

.cal .ui-tabs-nav a:hover,
.cal .ui-tabs-nav a:active,
.cal .ui-tabs-nav, .cal .ui-tabs-selected a {
 	 background-color:#18453b;
 	 color:white;

}

.css .ui-tabs-nav a:hover,
.css .ui-tabs-nav a:active,
.css .ui-tabs-nav, .css .ui-tabs-selected a {
 	 background-color:#388df4;
 	 color:white;

}


.check .ui-tabs-nav a:hover,
.check .ui-tabs-nav a:active,
.check .ui-tabs-nav, .check .ui-tabs-selected a {
 	 background-color:#709d98;
 	 color:white;

}


.mm .ui-tabs-nav a:hover,
.mm .ui-tabs-nav a:active,
.mm .ui-tabs-nav, .mm .ui-tabs-selected a {
 	 background-color:#2e9d28;
 	 color:white;

}

.write .ui-tabs-nav a:active,
.write .ui-tabs-nav, .write .ui-tabs-selected a {
 	 background-color:#cc1317;
 	 color:white;

}

.ui-tabs-nav p{
  font-size: 0.875em;
  display: none;
}


.ui-tabs-nav a:hover h3,
.ui-tabs-nav a:active h3,
.ui-tabs-nav .ui-tabs-selected a h3 {
  color: #fff;
}


.ui-tabs 
.ui-tabs-nav li a, 
.ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { 
	cursor: pointer; 
} 

.portimage {float: right; width: 30%; margin: 0 1% 1% 1%; border: thin solid #bbb;}
.portimage2 {float: right; clear: right; width: 30%; margin: 0 1% 1% 1%; border: thin solid #bbb;}
.code {float: left; clear: right; width: 99%; margin: 0 1% 1% 1%; border: thin solid #bbb;}
.final {width: 99%; margin: 0 1% 1% 1%; border: thin solid #bbb;}

/* Where the content goes */
.ui-tabs .ui-tabs-panel { 
	display: block; 
	border-width: 0; 
	padding: 1em 1.4em; 
	background: none; 
	clear:both;
}


.ui-tabs .ui-tabs-hide { 
	display: none !important; 
}


 


/******************* Footer *******************/

footer {width:100%; clear:both; text-align: center; padding-top:1em; border-top:thin solid #ccc; margin-top:1em;}
footer p{display: inline}
footer img {padding: 0 1em 1em 1em}
footer a {
	opacity: 1;
}

footer a:hover {
	opacity: .6;
}



/* Font and link Stylings */

p.lovely {  
    padding:10px;  
    margin:0;  
}

.fullonly {display:none;}

strong {font-family: ColaborateBoldRegular, Arial, Helvetica, sans-serif; font-weight:bold;}
strong.me {font-family: ColaborateMediumRegular, Arial, Helvetica, sans-serif; color: #9f7ab6;}
strong.cal {font-family: ColaborateMediumRegular, Arial, Helvetica, sans-serif; color: #18453b;}
strong.css {font-family: ColaborateMediumRegular, Arial, Helvetica, sans-serif; color: #388df4;}
strong.check {font-family: ColaborateMediumRegular, Arial, Helvetica, sans-serif; color: #709d98;}
strong.mm {font-family: ColaborateMediumRegular, Arial, Helvetica, sans-serif; color: #2e9d28;}
strong.write {font-family: ColaborateMediumRegular, Arial, Helvetica, sans-serif; color: #cc1317;}



#main.me a{color: #9f7ab6; text-decoration:none;}
#main.cal a{color: #18453b; text-decoration:none;}
#main.css a{color: #388df4; text-decoration:none;}
#main.check a{color: #709d98; text-decoration:none;}
#main.mm a{color: #2e9d28; text-decoration:none;}
#main.write a{color: #cc1317; text-decoration:none;}
#main a:hover {color:#bbb;}

h1 {color:black; line-height: 1.2;}
h4 {font-size: 1.5em; font-family: ColaborateRegular, Arial, Helvetica, sans-serif;}

clear {clear:both; }





/* Font Size Control Media Queries */

@media screen and (min-width:500px) {
	h1, h2 { font-size: 2.8em; }
	p { font-size: 1em; line-height: 1.2; }
	#name {font-size: 2.8em;}
	#logo {display:inline; }
	.ui-tabs-nav h3{ font-size: 1.2em;}
	#blurb {	font-size: 1em; }
	nav li a {width:3em; display:inline-block;}
	.code {float: left; clear: right; width: 50%; margin: 0 1% 1% 0; border: thin solid #bbb;}
	#aboutme {
	width: 99%;
	margin-right: 0%;
	float: none;
	}

	img.aboutme {
	max-width: 90%;
	margin: auto;
	}




}
@media screen and (min-width:600px) {
	h1, h2 { font-size: 3em; }
	#name {font-size: 4em;}
	#experience, #skills, #education {float:none; width:100%;}
	#resume h3 {float:none;  width:100%;}
	#blurb {	font-size: 1.1em; }
	nav li a {width:4em; display:inline-block;}
	img.aboutme {
	width: 80%;
	margin: auto;
	}
	
}

@media screen and (min-width:700px) {
	p { font-size: 1em; }
	#name {font-size: 4em;}
	#main {width:100%;}
	#experience, #skills, #education{float:right; width:75%;}
	#resume h3 {float:left; color:#bbb; font-size: 2em; width:25%; clear:both; }
	.fullonly {display:block;}
	#blurb {	font-size: 1.2em; }
	nav li a {width:4.5em; display:inline-block;}
	#aboutme {
	width: 58%;
	margin-right: 2%;
	float: left;
	}

	img.aboutme {
	width: 40%;
	margin-top: 2%;
	float:right;
	}

}
@media screen and (min-width:800px) {
	h1, h2 { font-size: 3em; }
	p { font-size: 1em; }
	#name {font-size: 4.5em;}
	#main {width:80%;}
	.ui-tabs-nav h3{ font-size: 1.5em;}
}


@media screen and (min-width: 900px) {
  
  .ui-tabs-nav a {
    padding: 6% 0 12% 0;
  }

  .ui-tabs-nav p{
    display: inline;
  }

  .ui-tabs-nav h3{
    margin: 0 auto;
    font-size: 1.8em;
  }
  
 }

@media screen and (min-width:1000px) {
	h1, h2{ font-size: 3.25em; }
	p { font-size: 1em; }	

}
@media screen and (min-width:1200px) {
	p { font-size: 1em; }	

}
@media screen and (min-width:1400px) {
	p { font-size: 1em; }	

}
@media screen and (min-width:1600px) {
	h1, h2 { font-size: 4em; }	
}