/* =================================================================================== */
/* Global                                                                              */
/* =================================================================================== */

/*add display attributes for the semantic tags*/
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
	display:block;
}
body {
	margin:0 auto;
	width:1024px;
	padding:0;
	background:#000000;
	width:1024px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	color:#585858;
}
h2, h3, h4 {
	color: #63D7FD; /* panelTitle font color*/
}
ol, ul {
	list-style:none;
}
a {
	text-decoration: none;
	color:#FFFFFF;	
}
a:hover {
	color: #63D7FD;
}
.whiteFont:hover{ /*keeps list items with no links white - may eventually add links to content about where I have lived*/
	color:#FFFFFF;	
}
.grayFont, .text{
	color:#585858;	
}
.syllabus, .grayFont{
	font-size:12px; /*changes size of content panel text*/
}

/* =================================================================================== */
/* Page Header                                                                         */
/* =================================================================================== */

/* Header Logo & Title =========================================== */

#pageHeader { /*Header background image*/
  	margin:0px auto; 	
	width:1024px; 
	height:195px; 
	background-color:#313131;
  	background-image:url("../../images/site/header.jpg"); 
  	background-repeat:no-repeat;
}
#title_content {
	float:left;
}
#logo {
	float:left;
	position:absolute;	
	height:160px;
	width:145px;
	margin-left:50px;
	margin-top:20px;
	z-index:2;
}
#title_content h2 {
	padding-top:11px;  /*adjusts top margin of top line in title by adjusting height of tag - use with height in page_title to adjust gap between lines of text*/
	padding-left:40px; 
	font:18px Verdana, Arial, Helvetica, sans-serif;
	color:#000000;
	z-index:3;
	margin-left:170px;  /*adjust position of title tag left and right*/	
	margin-top:45px;  /*adjust position of title tag up and down*/
}
.page_title {
  	background-image:url("../../images/site/clouds.jpg"); 
  	background-repeat:no-repeat;
	height:63px;
	width:260px;
	opacity:0.75;
	border:thick solid #313131;
	margin-bottom:-108px; /*move title lower text up and down*/
}
.faded { /*adjust opacity and position of "THE" and "OF" in title*/
	font-family: /*"Trebuchet MS",*/ Verdana, Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	opacity:0.5;
	margin-left:-12px;	
}
.portfolio {
	color:#313131;
}
.name {
	font-size:22px;
	margin-bottom:50px;
}
.titleWhite { /*adjust size and color of name in title*/
	font-size:32px;
	color:#ffffff;
}

/* Header Search ================================================= */

#search{
	position:relative; 	
}
.search{
	position:absolute; 
	top:25px; 
	right:50px; 
	height: 56px;
	font-size:12px;
	color:#FFFFFF;
}
#searchField{
	float:left;
	width:125px;
	background:#FFFFFF;
	color:#313131;
	opacity:0.65;
	margin-bottom:5px;
}
#searchSubmit{
	position:relative;
	padding:0;
	top:-24px; 	
	float:right;
	width:50px;
	height: 25px; /*height of find button*/
	opacity:0.75;
}
#searchSubmit:hover{
	color:#63D7FD;	
}
#searchLabel{
	top:0px; 
	right:0px; 
	height: 25px;
	color:#FFFFFF;
}

/* Header Links ================================================== */

#social_media
{
	padding-right:55px;
	padding-bottom: 0px;
}
#social_media ul
{
	list-style: none;
	padding: 100px 0px 0px 0px;
	float: right;
	margin:0;
}
#social_media ul li
{
	display: inline;
}
#social_media ul li:hover{
	color:#63D7FD;	
}
/*#linkedIn {
	add after LinkedIn account created
}*/

#deviantArt{
	position:relative;	
	right:-5px;	
	text-align:center;
	color:#FFFFFF;
}
#deviantArt img{
	height:50px;
	padding-left:5px;
	margin-bottom:5px;	
}
#linkedIn{
	position:relative;	
	right:0px;	
	text-align:center;
	color:#FFFFFF;		
}
#linkedIn img{
	height:50px;
	padding-left:5px;
	margin-bottom:0px;	
}
#contactLogo{
	position:relative;
	text-align:center;
	color:#FFFFFF;
}
#contactLogo img{
	height:50px; /*image height*/
	padding-left:5px; /*move icon left and right*/
	margin-bottom:0px; /*move text up and down*/
}
/* =================================================================================== */
/* Main Content                                                                        */
/* =================================================================================== */

#main {
	background-color:#585858;
	background-image:url("../../images/site/bg_content.jpg");
  	background-repeat:repeat; 	
}

/* Navigation ==================================================== */

#navigation{  /*defines navigation menu background and layout */
	float:left;
	margin:0;	
	width:100%;
	height:65px;
	padding:0;
}
nav ul li {
	display: inline;
	float:left;
	text-align:center;
	background-color:#585858;
  	background-image:url("../../images/site/nav_bg.png");	
	opacity:0.75;		
}
nav ul li a {  /*defines button text color and list layout */
	font-size:24px;
	display:block;
	text-decoration:none;
	height:50px;	
	padding-top:15px;
}
nav ul li a:hover {  /*defines background at hover */
	background-color:#000000;
	background:url("../../images/site/nav_active.png");
}
.navSide {  /*defines menu side spacer size*/
	width:62px;
	height:65px;
	background-color:#313131;
	background:url("../../images/site/nav_bg.png");	
	opacity:0.75;
}
.tabButton {  /*defines menu button size */
	width:180px;	
	height:65px;
	opacity:0.75;
}
.inactive { /*defines background image on inactive menu buttons*/
	background-color:#313131;
	background:url("../../images/site/nav_bg.png");
	opacity:0.75;
	height:65px;
}
.active { /*defines background image on active menu buttons*/
	background-color:#000000;
	background:url("../../images/site/nav_active.png");
	height:65px;
	opacity:0.75;
}
.active a { /*defines text color on active menu buttons*/
	color:#63D7FD;	
	opacity:1.0;
}

/* Content ======================================================== */

#contentWrapper {
	width:1024px; 
	height:685px; /*685 px for equal gap at bottom of page before footer*/
	float:left;
}

/* ==================================================================================== */
/* Page Footer                                                                          */
/* ==================================================================================== */

footer {
	width:1024px; 
	height:75px; 
	background-color:#313131;
  	background-image:url("../../images/site/footer.jpg");
  	background-repeat:no-repeat; 
  	margin:0px auto; 
}
#copyright{
	width:250px;
	float:left;
	margin-top:40px;
	margin-left:412px;
}
.adjustRight{
	float:right;	
	margin-top:25px;
	margin-right:25px;
}

/* ==================================================================================== */
/* Home Page Section                                                                    */
/* ==================================================================================== */

#homeContent{
	margin:0 auto;
	background-color:#000000;
	background:url("../../images/site/home1.png") no-repeat center center;
	height:625px;
	width:900px
}

/* ==================================================================================== */
/* About me Page Section                                                                */
/* ==================================================================================== */

#aboutContainer{
	display:table;
	margin-top:35px;
}
#aboutContent{
	display:table-cell;
	width:64%;
	float:left;
}
#aboutContent p, #resumeContent p{
	font-size:16px;	
	margin-top:-5px;	
}
#aboutAside{
	display:table-cell;
	width:34%;	
	background:#1F1F1F;	
	float:right;
	margin-top:0px; /*adjusts up/down location of about aside*/
}
#aboutAside h2{
	margin-left:-15px;	
}
#aboutAside h4{ /*adjust left/right of aside blue headers*/
	margin-left:20px;
}
#aboutAside ul{
	margin-top:-20px;
}
#aboutAside li{
	font-size:12px;
	margin-left:-20px;
	margin-right:10px;
}
#aboutAside li a, #aboutAside p{
	font-size:14px;	
}
#me{  /*picture of me*/
	float:left;
	padding:0px 15px 0px 0px;
}

/* ==================================================================================== */
/* Resume Page Section                                                                  */
/* ==================================================================================== */

.itemWrapper {
	position:relative;
	padding:10px 10px 20px 20px; /*20 20 20 20*/
	margin:0px 0px 20px 0px;
	background:#1F1F1F;
}
.itemWrapper h1{
	color:#63D7FD;	
}
.itemWrapper h3{
	font-size:120%;
}
.resumeBackground {
	position:absolute;
	top:0px;
	left:0px;
}
.clear {
	clear:both;
	height:1px;
	width:100%;
}

/* Resume Header ================================================== */

#resumeHeader {	
	height:110px;
	padding:0px 20px;
	background:#1F1F1F;
}
.headerWrapper {
	margin:35px 0px 20px 0px;
}
#resumeName, .icon, #buttons, #buttons ul, .button, #contactInfo {
	position:relative;
}
#resumeName {
	float:left;	
	font-size:40px;
	color:#FFFFFF;
	margin:10px 0px 5px 0px;
	padding-bottom:5px;
}
.icon {
	margin-right:10px;
}
#buttons {
	float:right;
}
#buttons ul {
	margin-top:25px;
}
.button {
	float:left;	
	font-size:18px;
	margin-right:-10px;
}
.button a {
	display:block;
	padding:6px 12px;
}
#contactInfo {
	text-align:left; /*adjust e-mail on page*/
	clear:both;
	border-top:1px solid #FFFFFF;
	width:100%;
}
#contacts {
	clear:both;
	font-size:14px;
	display:table;
	margin-top:8px;	
}
#contacts ul {
	display:table-row;
}

/* Resume Body ==================================================== */

#resumeMain {
	clear:both;
	width:580px;
	height:100%;
	float:right;
	position:relative;
}
#resumeStatement{
	margin:0 auto;	
	margin:0px -5px -11px -5px;
	padding:10px 0px;
	text-align:left;
	font-style:italic;
}
.items {
	padding-left:10px;
	padding-right:20px;	
}
.items h4{
	font-weight:500;
	margin-left:-10px;
	color:#63D7FD;
	padding-left:10px;	
}
.items h4 small {
	font-size:12px;
	float:right;
	margin-top:5px;
}
.bullets{
	list-style:circle; /*adds bulletpoints to list*/
	margin-left:5px;	
}
.items p {
	padding-left:10px;
}
.items ul{
	margin-top:-15px; /*adjust gap between main blue titles and list items*/
}
.items ul li{ 
	font-size:14px;	
	margin-left:-30px; /*adjust indent on main list items*/
}
.items p{
	font-size:14px;
	margin-top:-15px; /*adjust gap between main blue titles and paragraphs*/
}

/* Resume Sidebar ================================================= */

#sidebar {
	width:180px;
	float:left;
}
#sidebar h3{
	margin-top:20px;
	position:relative;
}
#sidebar ul {
	margin-top:-22px; /*adjusts gap between sidebar blue header and list items*/
}
#sidebar li {
	padding:4px 0px;
	margin-left:-30px;
	margin-top:-10px; /*adjust gap between sidebar list items*/
}
.photoMe{
	padding:30px 0px 0px 0px;
	margin-bottom:-10px;
}

/* Resume Footer ================================================== */

#resumeFooter {
	clear:both;
	width:100%;
	/*overflow:hidden;*/
	height:30px;
}

/* ==================================================================================== */
/* Interests Page Section                                                               */
/* ==================================================================================== */

.text{
	float:left;	
	font-size:16px;
}
.textCol{
	width:40%;
	float:left;
	padding:10px;
	margin-left:7%;
	margin-bottom:10px;	
}
.textCol1{
	width:40%;
	float:left;
	padding:10px;
	margin-left:3%;
	margin-bottom:10px;
}
.textCol2{
	width:85%;
	float:left;
	margin-left:7%;
	padding:10px;	
	margin-bottom:10px;
}

/* Galleries ====================================================== */

#drawings, #mods, #remods{
	position:relative;
	float:left;
	width:100%;
}
.galleryTitle{ 
	font:11px lighter Verdana, Arial, Helvetica, sans-serif; /*adjusts inner panel content titles*/
	padding-left:15px;
}
/*#3D, #drawings, #mods, #remods{
	margin-right:0px;	adjusts gap between images
}*/

.gallery{
	float:left;
	width: 100%;	
}

/* Figures ======================================================== */

.figureText{
	width:150px;
	float:left;	
}
figure{ /*adds magnify lens over image and shadowbox around it*/
	padding:4px;
	background:#FFFFFF url("../../images/site/icon_magnify.png") no-repeat center center;
	float:left;
	margin-bottom:40px; /*adjust distance between "rows" of images*/
	position:relative;
	color:#585858; /*changes text color below images*/
}
figure img{
	float:left;
}
figure img:hover{
	opacity:0.25;
}
figure figcaption{ /*text below image*/
	position:absolute;
	bottom:0px;
	margin-bottom:-25px; /*adjust distance of caption from image*/
	width:100%;
	text-align:center; /*aligns text location*/
}

/* Lists ========================================================== */

.list{
	width:100%;
	padding:0;	
	margin-left:30px; /*adjusts gallery list from left to right*/
}
.list li{
	display:inline;
	float:left;	
	margin-right:44px;
	margin-bottom:17px;
}
.height175{
	height:175px;
}

/* Align mod pictures horizontal center ============================ */

.vertalign{
	position:relative;
	top:16px;
}
.vertalign1{
	position:relative;
	top:27px;
}
.vertalign2{
	position:relative;
	top:31px;
}

/* ==================================================================================== */
/* Education Page Section                                                               */
/* ==================================================================================== */

/* Content Panels ================================================= */

.carousel li img{
	padding-left:5px;	/*moves image in panel to center*/
}
#panels{
  	background:#000000;
  	background-repeat:repeat;		
	opacity:.75;   /*adjusts overall panel background transparenty */
}
.panelTitle {
	font: 24px Verdana, Arial, Helvetica, sans-serif;
	padding-left:25px;
	margin-top:-20px; /*adjusts gap between top of panel and header*/
}
.titleBorder{
	font-size:14px;
	border-top:#585858 solid thin;
	border-bottom:#585858 solid thin;
}
.courseLine1{
	color:#585858;
	text-align:center;
}
.courseLine2{
	color:#585858;
	text-align:center;
}
.panelContent{
	margin-top:25px; /*adjust in conjunction with li margin below - they must be the same*/
	margin-left:-59px;
}
.panelContent li{
	margin-top:-25px;
	line-height:.95em; /*adjust lineheight*/
}
.panelContent li a{
	padding-left:20px; /*moves text left/right*/
	font-size:14px;
}
.panelContent li p{
	padding-left:20px; /*moves text left/right*/
	margin-top:0px;
	margin-bottom:0px;
	font-size:14px;
}

/* Carousel ======================================================= */

#wrapper {
	width: 845px;
	margin: 0px auto;
	margin-top:27px; /*margin at top of wrapper*/
	margin-left:-53px;  /*adjusts wrapper left and right*/
	line-height: 1em; /*changes overall lineheight*/
}
#wrapper .d-carousel ul li {
	background-color: #1F1F1F;
	padding: 15px;
	width: 160px; /*175px - width of individual panels*/ 
	margin-left:4px; /*adjusts carousel left and right*/
}
.jcarousel-direction-rtl {
	direction: rtl;
}
.d-carousel h4 {
	margin: 5px 0px;
}
.d-carousel .jcarousel-container {
	display: block;
	overflow: hidden;
	margin-bottom: 20px;
}
.d-carousel .jcarousel-item {
	width: 190px;
	height: 350px; /*height of individual panels - adjust with height below*/
}
.d-carousel .jcarousel-container-horizontal {
	width: 813px; /*DON'T CHANGE - width of carousel area*/ 
	height: 365px; /*adjust in conjuction with height above*/
	padding: 0 45px;
}
.d-carousel .jcarousel-item-horizontal {
	margin-left: 3px;
	margin-bottom: 3px;
	margin-top: 3px;
	margin-right: 11px;
}
.d-carousel .jcarousel-next-horizontal {
	position: absolute;
	top: 149px;
	right: 0;
	width: 25px;
	height: 25px;
	cursor: pointer;
	background: transparent url("../../images/site/blog-arrows.jpg") no-repeat top right;
}
.d-carousel .jcarousel-direction-rtl .jcarousel-next-horizontal {
	left: 5px;
	right: auto;
	background-image: url("../../images/site/blog-arrows.jpg");
}
.d-carousel .jcarousel-next-horizontal:hover {
	background-position: bottom right;
}
.d-carousel .jcarousel-prev-horizontal {
	position: absolute;
	top: 149px;
	left: 0;
	margin-left: 3px;
	width: 25px;
	height: 25px;
	cursor: pointer;
	background: transparent url("../../images/site/blog-arrows.jpg") no-repeat top left;
}
.d-carousel .jcarousel-direction-rtl .jcarousel-prev-horizontal {
	left: auto;
	right: 5px;
	background-image: url("../../images/site//blog-arrows.jpg");
}
.d-carousel .jcarousel-prev-horizontal:hover {
	background-position: bottom left;
}

/* Education  ===================================================== */

.EDCC{
	background-image:url("../../images/site/EDCC.jpg");
	background-repeat:no-repeat;
	background-position:center bottom;
}
.education{
	width:100%;
	margin-top:20px;
}
.left{
	float:left;	
}
.right{
	float:right;
}
.eduContent{
	margin-top:0px; /*adjust in conjunction with li margin below - they must be the same*/
	margin-left:-25px;
	margin-bottom:-15px; /*adjusts margin at bottom of list*/
}
.eduContent ul{
	padding-bottom:10px;	
}
.eduContent li a{
	padding-left:25px; /*moves text left/right*/
	font-size:14px;
	line-height:1.2em;
}
.eduContent li p{
	padding-left:25px; /*moves text left/right*/
	margin-top:0px;
	margin-bottom:0px;
	font-size:14px;
	line-height:1.2em;
}
.indent li a{
	padding-left:25px;	
}
.titleBar{
	text-align:left;
}	
.titleBar a{
	color:#585858;	
}
.showme {
	float:left;
  	width:365px; /*adjust width of degree/cert accordions on education tab*/
  	margin:.5em .5em;
	padding:0px;
  	font: 14px Verdana, Arial, Helvetica, sans-serif;
	background:#000000;
}
.showme h2{
	margin:0;
	padding:4px;
	padding-left:15px;
	background:#000000;	
	font-weight:lighter;
	font-size:18px;
	color:#FFFFFF;
}
.showme h3 {
  	margin: 0;
  	padding:4px;
  	padding-left:15px;
  	background: #1F1F1F;
	font-weight:lighter;
	font-size:16px;
	color:#63D7FD;
}
.showme h3:hover {
	color: #FFFFFF;
	cursor:pointer;
	font-size:18px;
}
.showme div {
  	padding: .5em .25em;
}
.hoverGray:hover{
  	background: #313131;
}
.close:hover{
	background:#313131 url("../../images/site/arrowUp.png") no-repeat center center;
	padding-left:250px;
	padding-right:25px;
}

/* ==================================================================================== */
/* Default Page                                                               */
/* ==================================================================================== */

#defaultBlack{
	background:#000000;	
}
#defaultPage{
	margin: 0 auto;
	margin-top:50px;
	background:url("../../images/site/default1.png") no-repeat center center;
	height:800px;
	width:962px;
}

#defaultMessage{
	float:left;
	width:362px;
	background:#585858;
	border:thick outset #000000;
	margin-left:275px;
	margin-top:50px;
	font:36px bold;
	padding:10px 25px;
	color: #FFFFFF; 
}

.redirectPage{
	float:left;
	border:thick outset #000000;
	background:#F00;
	margin-top:553px;
	margin-left:350px;
	padding:10px;
	font:24px bold;
	color: #FFFFFF; 	
}
.redirectPage:hover{
	background:#313131;	
}