/* MrJEPatrick.com - Stylesheet created by Jeremy Patrick - 02/02/2013 */

/* 1420px WIDE */
/*******************************************************************************
 * General Purpose styles
 ******************************************************************************/

    body {
            margin: 0px;
            padding: 0px;
            background-image: url('images/stitchBlocks.jpg');
            background-repeat: repeat;
			color: #231F20;
    }

        /*******************************************************************************
         * Menu Controls styles
         ******************************************************************************/

            .label {
                    background-color: #FFFFFF;
                    text-align: center;
                    font-family: "Lucida Blackletter", "Times New Roman";
                    box-shadow: 0px 0px 6px #888;
                    font-size: 16pt;
                    position:relative;
                    display: block;
                    margin:auto;
                    z-index: 395;
            }
			#expExpand, #eduExpand{
				position:absolute;
				height:37px;
				width:37px;
				background-color: #848484;
				z-index: 309;
				border-radius: 5px;
				-moz-border-radius: 5px;
				overflow: hidden;
				cursor:pointer;
				text-align: center;
				color: #FFF;
				font-weight: bold;
			}
			#expExpand:hover, #eduExpand:hover{
				background-color: #adadad;
			}
			.minimizeBtn > span{
				position: absolute;
				top: 16px;
				left: 8px;
				height: 5px;
				width: 21px;
				background-color: #FFF;
				border-radius: 1px;
			}
            .minimizeBtn {
				line-height: 1.8rem;
				font-size: 2rem;
            }
			.maximizeBtn > span:first-of-type{
				position: absolute;
				top: 16px;
				left: 8px;
				height: 5px;
				width: 21px;
				background-color: #FFF;
				border-radius: 1px;
			}
			.maximizeBtn > span:last-of-type{
				position: absolute;
				top: 8px;
				left: 16px;
				height: 21px;
				width: 5px;
				background-color: #FFF;
				border-radius: 1px;
			}
            .maximizeBtn {
				line-height: 2.2rem;
				font-size: 2rem;
            }
			
            .downArrow {
                position: absolute;
                height:37px;
                width:37px;
                background-color: #848484;
                z-index: 305;
                border-radius: 5px;
                -moz-border-radius: 5px;
                /*left: 813px;*/
                overflow: hidden;
                bottom: 1px;
                right: 30px;
				cursor:pointer;
				text-align: center;
				background-image: url(images/downArrow.svg);
				background-repeat: no-repeat;
				background-position: center;
            }
            .downArrow:hover {
				background-color:#adadad;
			}
			
            .upArrow {
                position: absolute;
                height:37px;
                width:37px;
                background-color: #848484;
                z-index: 306;
                border-radius: 5px;
                -moz-border-radius: 5px;
                /*left: 813px;*/
                overflow: hidden;
                bottom: 1px;
                right: 30px;
				cursor:pointer;
				text-align: center;
				background-image: url(images/upArrow.svg);
				background-repeat: no-repeat;
				background-position: center;
            }
            .upArrow:hover {
				background-color:#adadad;
			}

/*******************************************************************************
 * Contact area styles
 ******************************************************************************/

    #contact:hover {
			color: #231F20;
			background-color: rgb(244, 244, 244);
	}
    #contact {
			color: #231F20;
            position:absolute;
            width:auto;
            height:auto;
            z-index:750;
            top: -10px;
            right: 60px;
            background-color: #FFFFFF;
            font-family: "Bookman Old Style","Times New Roman";
            font-size: 20pt;
            text-align: center;
            overflow: hidden;
            box-shadow: 0px 0px 5px #888;
            border-radius: 5px;
            -moz-border-radius: 5px;
            padding: 20px;
            cursor: pointer;
    }
    #contactText {
            position:relative;
            top: 18px;
            margin-bottom:10px;
            z-index:10;
    }
    #contactHeader {
			margin: 0 auto;
            width: 100%;
            /*max-width: 1420px;*/
            height: 0px;
            background-color: #F4F4F4;/*#939393;*/
            /*background-image: url('images/stitchBlocks.jpg');*/
            /*color: #FFFFFF;*/
            position: relative;
            top: 0px;
            z-index: 1100;
            visibility: visible;
            overflow: hidden;
    }
    #contactBoxLabel {
            position: absolute;
            width:calc(100% - 90px);
            height: 36px;
            top:15px;
            right: 15px;
            z-index: 300;
            background-color: #FFF;
            border-radius: 5px;
            -moz-border-radius: 5px;
            padding: 10px 30px 1px 30px;
            font-size:18pt;
            font-weight: bold;
            font-family: "Times New Roman";
            margin-bottom:13px;
    }
    #contactBox {
            position: absolute;
            width:calc(100% - 90px);
            height: 156px;
            top: 74px;
            right: 15px;
            z-index: 300;
            background-color: #FFF;
            border-radius: 5px;
            -moz-border-radius: 5px;
            padding: 20px 30px 5px 30px;
            font-family: "Times New Roman";
			overflow:hidden;
    }
    #contactInfo img{
		margin-top: 1px;
		margin-left: -1px;
		width:275px;
		height:130px;
		max-width:100%;
	}
    #contactInfo{
            position: relative;
            z-index: 1300;
            height: 151px;
            width: 250px;
    }
    #profileImage{
		/*box-shadow: 0px 0px 5px #888;*/
		z-index:1500;
		width:103px;
		height:120px;
		margin-top:10px;
		display:none;
    }

/*******************************************************************************
 * Nameplate styles
 ******************************************************************************/

    #titlebar {
            position:relative;
            /*max-width:1420px;*/
            width:100%;
            height:27px;
            background-color: #848484/*231F20*/;
			margin: 0 auto;
    }
    #titlebar a {
            font-weight: normal;
    }
    #nameplate {
			margin: 0 auto;
            position:relative;
            width:100%;
			/*max-width: 1420px;*/
            height:145px;
            z-index:500;
            overflow:hidden;
            background-color: #EAEAEA;
            box-shadow: 0px 0px 3px #888;
    }
    #nameContainer{
		max-width:577px;
		width:100%;
		height: 100%;
    }
    #dotsDiv{
		position: relative;
		width:50%;
		max-width:108px;
		display:none;
    }
    #nameDiv{
		position: relative;
		width: 469px;
		max-width: calc(100% - 30px);
		padding:0px 15px 0px 15px;
		display: flex;
		align-items: center;
		height: 100%;
    }
	#nameDiv > img{
		width:100%;
		height:auto;
	}

/*******************************************************************************
 * Main display panel styles
 ******************************************************************************/

    #content {
			/*margin: 0 auto;*/
            position:relative;
            /*max-width:1420px;*/
            width:100%;
            height:406px;
            z-index:300;
    }
    
        /*******************************************************************************
         * Updates Sidebar styles
         ******************************************************************************/

            #updatesContainer {
				position:relative;
				width:300px;
				height:376px;
				z-index:350;
				padding:0px 30px 30px 30px;
				float:left;
				/*left: 1060px;*/
				background-color: #FAFAFA;
				/*box-shadow: 0px 0px 4px #888;*/
				max-width: calc(100% - 60px);
            }
            #updatesHeader {
                    position:relative;
                    height:auto;
                    width:auto;
                    display: inline-block;
            }
            .updates {
				position:relative;
				width:auto;
				height:auto;
				background-color:#FFFFFF;
				color: #231F20;
				border-radius: 5px;
				-moz-border-radius: 5px;
				padding: 20px;
				margin-bottom: 13px;
				float: left;
            }
			.updates h3{
			    margin-top: 0px;
				color: #231F20;
				text-decoration: none!important;
			}
			.featuredImage{
				display:inline-block;
			    height: auto;
				width: 300px;
				max-width: 100%;
				float: left;
			}
            #updatesExpand{
				position:absolute;
				height: 60px;
				width: calc(100% - 60px);
				z-index:380;
				bottom: 0px;
				text-align: center;
            }
            #updatesExpandBar{
                    position: absolute;
                    z-index: 390;
                    height:20px;
                    width:100%;
                    top: 20px;
                    background-color:#DDDDDD;/*848484*/
                    border-radius: 5px;
                    -moz-border-radius: 5px;
            }
            #updatesLabel {
					display:none;
                    top:15px;
                    width:69px;
                    height:30px;
					cursor:pointer;
            }

/*******************************************************************************
 * Skills bar styles
 ******************************************************************************/
    #skills {
			margin: 0 auto;
			display: inline-block;
			position: relative;
			/* max-width: 1420px; */
			width: 100%;
			height: auto;
			z-index: 400;
			background-color: #FAFAFA;
			box-shadow: 0px 0px 5px #888;
    }
    #skillsExpandCenter{
            position: absolute;
            z-index: 492;
            height:4px;
            width:auto;
            max-width:1384px;/*1420*/
            left: 18px;
            top: 44px;
    }
    #skillsExpandBar{
              position: relative;
			  /* display: inline-block; */
			  z-index: 490;
			  height: 20px;
			  /* max-width: 1384px; */
			  margin: 0px 18px;
			  background-color: #DDDDDD;
			  border-radius: 5px;
			  -moz-border-radius: 5px;
			  overflow: visible!important;
    }
    #skillstop {
              position: relative;
			  /* max-width: 1420px; */
			  width: 100%;
			  height: 14px;
			  margin: 0px 0px 22px 0px;
			  z-index: 485;
			  background-color: #CCCCCC;
    }
    #skillsbottom {
              position: relative;
			  /* max-width: 1420px; */
			  width: 100%;
			  height: 14px;
			  z-index: 480;
			  background-color: #CCCCCC;
			  margin: 22px 0px 0px 0px;
    }
    #skillsLabel {
            position: relative;
			z-index: 495;
			width: 61px;
			height: 30px;
			top: -6px;
			cursor: pointer;
    }

/*******************************************************************************
 * "Lower" styles
 ******************************************************************************/
    #lower {
			margin: 0 auto;
            position:relative;
            /*max-width:1420px;*/
            width:100%;
            height: auto;
            z-index:200;
            background-color: #DDDDDD;
			display: inline-block;
            /*overflow:auto;*/
            /*box-shadow: 0px 0px 11px #444;*/
    }

        /*******************************************************************************
         * Pop icon styles
         ******************************************************************************/
            
            #icons {
				position:relative;
				max-width:812px;
				min-height:573px;
				height:auto;
				overflow:hidden;
				margin: 22px 19px 22px 19px;
            }
                /*Outer div*/
                .popBox {
                        position:relative;
                        width:169px;
                        height:139px;
                        z-index:107;
                        background-color: #FFF;
                        border-radius: 5px;
                        -moz-border-radius: 5px;
                        text-align: center;
                        margin: 26px 17px 26px 17px;
                        float:left;
                        color: #CCCCCC;
                        font-size: 8pt;
                }
                /*Inner photo div*/
                .popIcon {
                        position:absolute;
                        width:113px;
                        height:93px;
                        z-index:120;
                        background-color: #EAEAEA;
                        border-radius: 5px;
                        -moz-border-radius: 5px;
                        top: 23px;
                        left: 28px;
                        overflow: hidden;
                }

                /*******************************************************************************
                 * Inner Text Headers
                 ******************************************************************************/
                    .popTopLeft {
                        position: absolute;
                        z-index: 400;
                        top:5px;
                        left: 10px;
                    }
                    .popTopRight {
                        position: absolute;
                        z-index: 400;
                        top:5px;
                        right: 10px;
                    }
                    .popBottomLeft {
                        position: absolute;
                        z-index: 400;
                        bottom:5px;
                        left: 10px;
                    }
                    .popBottomRight {
                        position: absolute;
                        z-index: 400;
                        bottom:5px;
                        right: 10px;
                    }
                    
        /*******************************************************************************
         * Icons Expand styles
         ******************************************************************************/
            #iconExpand {
                    position:relative;
                    width: 100%;
                    max-width:850px;
                    height:45px;
                    z-index:285;
                    left:0px;
                    text-align: center;
                    /*background-color: #FAFAFA;*/
					display:inline-block;
            }
            #iconExpandBar{
                    position: relative;
					z-index: 290;
					height: 20px;
					/* width: 100%; */
					max-width: 814px;
					left: 0px;
					margin-top: 22px;
					background-color: #CCCCCC;
					border-radius: 5px;
					-moz-border-radius: 5px;
					top: 0px;
            }
            #iconLabel {
					display:none;
                    width:61px;
                    height:30px;
                    z-index:295;
                    top: -5px;
					cursor:pointer;
            }
			
        /*******************************************************************************
         * Qualifications column styles
         ******************************************************************************/
            #qualifications {
				position: relative;
				height: auto;
				width: 100%;
            }
                #credentialHeader {
                    top:-38px;
                    padding-top:25px;
                    padding-bottom:1px;
                    margin-bottom:-25px;
                }
                .creditItem h4 {
                    font-size: 18pt;
                    font-weight: normal;
                    display: inline;
                    color: #CCCCCC;
                    line-height: 36px;
                }
                .creditItem {
					position:relative;
					height:auto;
					width: calc(100% - 134px);
					background-color:#FFFFFF;
					border-radius: 5px;
					-moz-border-radius: 5px;
					margin: 0px 37px 13px 37px;
					padding: 10px 30px 30px 30px;
					overflow:hidden;
                }

                #expExpand, #eduExpand, #volExpand {
                    position: absolute;
                    top: 1px;
                    right: 30px;
                }

                .credAddressLeft {
                    position: relative;
                    text-align: left;
                    font-size: 8pt;
                    color: silver;
                    width:100%;
                }
                .credAddressRight {
                    position: absolute;
                    z-index: 200;
                    top:0px;
                    right: 0px;
                    text-align: right;
                    color: silver;
                }

/*******************************************************************************
 * Footer styles
 ******************************************************************************/
    #footer {
            position:relative;
            width:100%;
            /*max-width: 1420px;*/
            height:520px;/*220px;*/
            z-index:100;
            background-color: #B0AFB0;
            text-align:center;
            color: white;
            font-weight: bold;
			margin: 0 auto;
			line-height: 22px;
    }
	
/*******************************************************************************
 * Other styles
 ******************************************************************************/
	.coursework{
		height:0px;
		overflow:hidden;
	}
	.expandCourse, .hideCourse{
		cursor:pointer;
		text-decoration:underline;
	}
	.courseworkSign{
		cursor:pointer;
	}
	#skillsBox{
		display: inline-block;
		background-color: #FFFFFF;
		height: 0px;
		overflow:hidden;
		width: 100%;
		margin: -17px 0px 13px 0px;
		text-align: left;
	}
	#skillsBox ul{
		display:inline-block;
		height: 95px;
		text-align:left;
		margin-top:25px;
	}
	#iconInstructions{
		position: relative;
		top: 0px;
	}
	#qualificationsInstructions{
		position: absolute;
		left: 195px;
		font-size: 9pt;
		top: 50px;
	}
	.subItem{
		height: 0px;
		overflow: hidden;
		display:block;
	}
	
	#mapInstructions{
		color: #848484;
		position: absolute;
		top: 7px;
		left: 30px;
	}
	#openStreetMap{
		width:calc(100% - 60px);
		height:342px;
		display: inline-block;
		margin: 30px;
		filter: saturate(1) brightness(0.7) contrast(2.5);
		filter: saturate(0.65) brightness(0.64) contrast(4);
	}
	@media (min-width: 530px){
		#contactBoxLabel{
			width:440px;
		}
		#contactBox{
			width:440px;
		}
		#profileImage{
			display:inline-block;
		}
		#contactInfo{
			right:30px;
			float:right;
		}
		#icons{
			min-width: 407px;
		}
	}
	@media (min-width: 600px){
		#dotsDiv{
			display:inline-block;
		}
		#nameDiv{
			float:right;
			padding:0px 0px 0px 0px;
		}
		#qualifications{
			float:right;
			width: 570px;
		}
		.creditItem{
			width:436px;
		}
	}
	@media (min-width: 768px){
		#openStreetMap{
			width:calc(100% - 420px);
		}
		#updatesContainer {
			float:right;
		}		
		#skillsBox{
			text-align: center;
		}
		#iconInstructions{
			position: absolute;
		}
	}