/* 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;
            }
            .minimizeBtn {
                    position:absolute;
                    height:37px;
                    width:37px;
                    background-color: #848484;
                    z-index: 308;
                    border-radius: 5px;
                    -moz-border-radius: 5px;
                    /*left: 813px;*/
                    overflow: hidden;
					background-image:url("images/minus.jpg");
					cursor:pointer;
            }
            .minimizeBtn:hover {
					background-image:url("images/minusHover.jpg");
			}
            .maximizeBtn {
                    position:absolute;
                    height:37px;
                    width:37px;
                    background-color: #848484;
                    z-index: 309;
                    border-radius: 5px;
                    -moz-border-radius: 5px;
                    /*left: 813px;*/
                    overflow: hidden;
					background-image:url("images/plus.jpg");
					cursor:pointer;
            }
            .maximizeBtn:hover {
					background-image:url("images/plusHover.jpg");
			}
			
            .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;
				background-image:url("images/down.jpg");
				cursor:pointer;
            }
            .downArrow:hover {
					background-image:url("images/downHover.jpg");
			}
			
            .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;
				background-image:url("images/up.jpg");
				cursor:pointer;
            }
            .upArrow:hover {
					background-image:url("images/upHover.jpg");
			}

/*******************************************************************************
 * 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: 440px;
            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: 440px;
            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";
    }
    #contactInfo img{
		margin-top: 1px;
		margin-left: -1px;
	}
    #contactInfo{
            position: relative;
            z-index: 1300;
            right: 30px;
            height: 151px;
            width: 250px;
            float:right;
    }
    #profileImage{
            /*box-shadow: 0px 0px 5px #888;*/
            z-index:1500;
            width:103px;
            height:120px;
            margin-top:10px;
    }

/*******************************************************************************
 * 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%;
    }
    #dotsDiv{
            position: relative;
            width:50%;
            max-width:108px;
    }
    #nameDiv{
            position: relative;
            width: 469px;
            float:right;
    }

/*******************************************************************************
 * 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:right;
                    /*left: 1060px;*/
                    background-color: #FAFAFA;
                    /*box-shadow: 0px 0px 4px #888;*/
            }
            #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:125px;
				width:300px;
				float: left;
			}
            #updatesExpand{
                    position:absolute;
                    height:60px;
                    width:300px;
                    z-index:380;
                    bottom: 0px;
                    text-align: center;
            }
            #updatesExpandBar{
                    position: absolute;
                    z-index: 390;
                    height:20px;
                    width:300px;
                    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;
					min-width: 407px;
                    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: 570px;
                    float: right;
            }
                #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: 436px;
                        background-color:#FFFFFF;
                        border-radius: 5px;
                        -moz-border-radius: 5px;
                        margin: 0px 37px 13px 37px;
                        padding: 10px 30px 10px 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: center;
	}
	#skillsBox ul{
		display:inline-block;
		height: 95px;
		text-align:left;
		margin-top:25px;
	}
	#iconInstructions{
		position: absolute;
		top: 0px;
	}
	#qualificationsInstructions{
		position: absolute;
		left: 195px;
		font-size: 9pt;
		top: 50px;
	}
	.subItem{
		height: 0px;
		overflow: hidden;
		display:block;
	}
	#mapIframe{
		height:341px;
		float:left;
		width: calc(100% - 420px);
		margin:30px 30px 30px 30px;
		border: none;
		display:inline-block;
	}
	#mapInstructions{
		color: #848484;
		position: absolute;
		top: 7px;
		left: 30px;
	}