/*
 Title: Fall/Halloween 2011 Site Portfolio Stylesheet - "Robot Head"
 Original URL: http://www.kristomo.com
 Author:Kristopher Moore (@kristomo on twitter, Kristomo on FaceBook) from Washington (the state), USA.
 Date: October 15, 2011
 
 ---
 
 Notes: Now, I'm not one to presume that my design is so unique and awesome that someone would lift my code
 and whatnot, but I figured I'd include this extra stuff just in case.
 
 This undoubtedly has its flaws, but I'm generally pleased with how it turned out - and it works as expected (more or less).
 
 If you do decide to "appropriate" anything from me, go for it, but I'd like to see how you used it or how I can improve.
 Let's learn from each other, ok? Use the contact form on my site (kristomo.com/contact.html) or the social networking stuff above to reach me.
 
 Also, I did my best to comment this for anyone picking through my CSS for whatever reason, but I'll admit
 that I did get a bit distracted at times so comments may not be great.
 
 Thanks for taking the time to visit the site and dig into things! HOORAY FOR EXPLORATION! (... What a dork I am.)
 
*/
 

 
/*------------------------------WEB FONTS!----------------------------*/

/*BebasNeue is my heading and label font.*/
@font-face {
    font-family: 'BebasNeueRegular';
    src: url('../font/BebasNeue/BebasNeue-webfont.eot');
    src: url('../font/BebasNeue/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/BebasNeue/BebasNeue-webfont.woff') format('woff'),
         url('../font/BebasNeue/BebasNeue-webfont.ttf') format('truetype'),
         url('../font/BebasNeue/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*Rokkitt is the body font*/

@font-face {
    font-family: 'RokkittRegular';
    src: url('../font/Rokkitt/Rokkitt-webfont.eot');
    src: url('../font/Rokkitt/Rokkitt-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/Rokkitt/Rokkitt-webfont.woff') format('woff'),
         url('../font/Rokkitt/Rokkitt-webfont.ttf') format('truetype'),
         url('../font/Rokkitt/Rokkitt-webfont.svg#RokkittRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*------------------------------GLOBAL ELEMENTS/TAGS/CLASSES----------------------------*/


body {
    
    background:url('../img/project_paper.png');
    overflow:auto; /*Turns on vertical scrollbar in all browsers to prevent pixel shift when page grows after dynamic content pops in. That vertical scrollbar is all hot and bothered... I have no idea what that means. I was frustrated.*/
    
}


h1 {
    font-family:"BebasNeueRegular", sans-serif;
    font-size:60px; 
    
}
    

h2 {
    font-family:"BebasNeueRegular", sans-serif;
    font-size:38px;
}

h3 {
    font-family:"BebasNeueRegular", sans-serif;
    font-size:32px;
}

h4 {
    font-family:"BebasNeueRegular", sans-serif;
    font-size:26px;
}

h5 {
    font-family:"RokkittRegular", sans-serif;
    font-size:16px;
    
}

p {
    font-family:"RokkittRegular", serif;
    font-size:16px;
}
a{
    text-decoration:none;
    color:inherit;    
}

.float_lt {
    float:left;
}

.float_rt {
    float:right;
}

.hiding { /*This conceals elements in the contact form that visitors don't need to see. */
        display:none;
    }
   
.active{
    
    color:#D68644 ;
}

.clearfix:before,
.clearfix:after {
  content: ".";    
  display: block;    
  height: 0;    
  overflow: hidden;	
}
.clearfix:after {clear: both;}
/* .clearfix {zoom: 1;} /* IE < 8 */

/*------------------------------BODY!----------------------------*/

#wrapper{
    width:960px;
    margin:15px auto; /*Why a top margin? I didn't like how the wrapper sat flush against the top of the browser window. */
}

    /*------------------------------HEADER ELEMENTS!----------------------------*/
    header {
	    padding:20px 20px 40px 20px;
	    background:url('../img/bg_main.png');
	    height:100px;
    }
 
	header hgroup {
	    color:#99B8CD;
	    text-shadow:2px 2px 2px #222;
	}
	
	    hgroup h1 span {
		font-size:34px;
	    }
 
 
    #tagline { 	/*I don't know if tagline is the right term for this, but its the thing below the title that says this is my portfolio*/
	position:relative;
	
    }
    
    
  
    
    
    nav {
	margin: -95px 0px 0 0;
	
    }
    
	nav ul { 
	    text-align:right;
	    
	}
    
    	nav ul li{
	    display:inline-block;
	    margin:0 0 0 20px;
	    vertical-align:middle;
	    
	    height:50px;
	    
	    
	}
    
	    /*------------------------------NAVIGATIONS LABELS, ICONS AND SPRITES!----------------------------*/
		
		nav a {
		    font-family:"BebasNeueRegular", sans-serif;
		    font-size:20px;
		    color:#c4df9b;
		    text-decoration:none;
		}
		
                nav a:hover {
		    color:#9ECA5C;
		}
                
		/*------------------------------NAVIGATION ICONS!----------------------------*/
		.nav_icon {
		    
		    position:relative;
		    display:block;
		    background-image:url('../img/nav_sprites.png');
		    background-repeat:no-repeat;
		    
		    text-decoration:none;
		    padding:15px 0 15px 0;
		    min-width:48px;
		    
		}
		/*------------------------------NAVIGATIONS LABELS!----------------------------*/
		.nav_label {
		    display:inline;
		    text-align:center;
		    padding:0;
		    margin:0;
		    position:relative;
		    z-index:100;
		    top:10px;
		}
		
		/*------------------------------NAVIGATION SPRITES!----------------------------*/
		nav li #menu_resume {
		    background-position:0px 0px;
		}
	    
		nav li #menu_resume:hover {
		    background-position:0px -50px;
		    
		}
	    
		nav li #menu_writing {
		    background-position:0px -100px;
		   
		}
		
		nav li #menu_writing:hover {
		    background-position:0px -150px;
		   
		}
	    
		nav li #menu_web {
		    
		    background-position:0px -200px;
		   
		}
		
		nav li #menu_web:hover {
		    background-position:0px -250px;
		   
		}
		
		nav li #menu_graphic {
		    
		    background-position:0px -300px;
		   
		}
		
		nav li #menu_graphic:hover {
		    background-position:0px -350px;
		   
		}
		
		nav li #menu_contact {
		    background-position:0px -400px;
		   
		}
		
		nav li #menu_contact:hover {
		    background-position:0px -450px;
		   
		}

    /*------------------------------MAIN CONTENT!----------------------------*/
    
    #description { /*My top/main content box. This contains the welcome and recent work boxes */
	background:url('../img/bg_main.png'); /*This is that dark brushed aluminum texture */
	padding:0 20px 100px 20px;
    }
	
        #description a {
            color:#3F7ACD;
        }
        
            #description a:hover {
                color:#274FCD;
            }
            
            #description a:visited {
                color:#815918;
            }

        #welcome, #current {
            border-radius:10px; /*Oh yeah... This doesn't actually work in any browser as it is, so if you just take the CSS, a bunch of the CSS3 stuff will probably be broken. I stumbled upon some JS that generates all the browser specific CSS3 styles when the user loads the page. I just entered the "core" CSS3 styles and cssFx did all the browser specific stuff. Huge time and sanity saver. I laughed, I cried, it was the feel good JS code of the year: http://imsky.github.com/cssFx/ */
          
        }
        
	#welcome {
	    width:420px;
	    float:left;
	    background:white;
	    position:relative;
	    margin:50px 0 0 0;
	    box-shadow:inset 2px 2px 3px 2px #bbb; 
	}
	    #welcome p {
	    position:relative;
	    bottom:32px;
	    margin:16px 16px 0 16px;
	    line-height:1.3em;
	    }
	    
       
	#current {
	    width:420px;
	    float:right;
	    background:white;
	    position:relative;
	    margin:50px 0 0 0;
	    z-index:100;
	    box-shadow:inset 2px 2px 3px 2px #bbb;
	    height:276px
	}
	
	#current ul {
	    position:relative;
	    bottom:32px;
	    margin:16px 16px 0 16px;
	    text-align:center;
	    width:388px;
	    
	}
	
	#current ul li{
	    display:inline-block;
	    width:110px;
	    height:110px;
	    
	    margin:0 0 25px 0;
	    
	    
	}
	
	#current img {
	    outline:solid 1px #cccccc;
	}
	
	#current .center {
	    margin:0 1.5em;
	}
    
	.content {
	    line-height:1.3em;    
	}
	
	#description h3 {
	    position:relative;
	    bottom:42px;
	    color:#ffffcc;
	}
	
	.content p, .content ul {
	    
	}

    /*------------------------------PORTFOLIO SECTION!----------------------------*/

    #upper {
	position:relative;
	background:url('../img/bg_alum_top.png') no-repeat;
	width:960px;
	height:90px;
	margin: -2px 0 0 0;
	z-index:100;
    }
    
    #portfolio {
	display:none;
	position:relative;
	bottom:88px;
	left:5px;
	width:950px;
	padding:90px 0 10px 0;
	height:445px; /*change this value to get the lower jaw to open far enough to show the whole .details section and to make sure there is even spacing between bottom and top*/
	background:black;
    }

    #portfolio.open {
	display:block;
    }
    
    #lower {
	position:relative;
	z-index:-100;
	background:url('../img/bg_alum_bot_b.png') no-repeat;
	height:90px;
	width:950px;
	margin:-96px auto 0 auto;
    }
    
       .details {
	position:relative;
	height:410px;
	width:475px;
	margin:0 auto;
	background:white;
	padding:16px;
	
    }
    
	.details ul {
	    position:relative;
	    width:485px;
	    left:-4px;
	    top:-4px;
	}
	
	.details li {
	    display:inline-block;
	    margin:4px;
	}
    
	.details li img {
	    vertical-align:top;
	}
    
    #portfolio h3 {
	color:#6A747C;
	margin:0 0 20px 0;
    }
    
 /*------------------------------CONTACT FORM!----------------------------*/
    #portfolio a {
            color:#3F7ACD;
        }
        
            #portfolio a:hover {
                color:#274FCD;
            }
            
            #portfolio a:visited {
                color:#815918;
            }
    
    #contact form {
       
       margin:0 auto;
    }
    
	.form_element{
	    margin:5px 0;
	}
    
	.textfield {
	    padding:0 0 0 3px;
	    width:200px;
	    
	}
    #contact {
	width:464px;
	
    }
      
    #message {
	font-family:sans-serif;
	font-size:13px;
	width:200px;	
	height:180px;
	max-width:325px;
	max-height:295px;
	padding:0 0 0 4px;
	
	
    }
    
    #writing img, #graphic img, #web img {
	    outline:solid 1px #cccccc;
	}
        
    #contact label {
	display:inline-block;
	width:100px;
	height:22px;
	text-align:right;
	margin:5px 25px 5px 0;
	vertical-align:top;
	font-family:"RokkittRegular";
	font-weight:500;
        font-size:16px;
	
    }
    
	#contact .error {
	    position:absolute;
	    padding:15px 15px;
	    display:inline;
	    margin:2px 0 0 5px;
	    background:url('../img/error.png') no-repeat;
	    content:'This field is required.';
	}
	
	#contact .ok {
	    position:absolute;
	    padding:15px 15px;
	    display:inline;
	    margin:2px 0 0 5px;
	    background:url('../img/ok.png') no-repeat;
	}
	
	#contact .redbox {
	    background:#FDCDCD;
	    border:1px solid red;
	}
	#contact .greenbox {
	    border:1px solid green;
	}
	
	#contact sup {
	    color:red;
	}
    
    
    
    #submit, #reset {
	position:relative;
	left:128px;
	top:10px;
    }

      
 
      
    #contact_success section, #contact_failure section {
	position:relative;
	display:block;
	width:420px;
	
	left:45px;
	top:-30px;
	   }
    
   #contact_success img, #contact_fail img {
    
   }
    
	#contact_success h4 {
	    color:#5ebb69;
	   
	}
    
    #contact_failure h4 {
	color:#ec2024;
	
    }
    
    #retry {
	margin:0;
    }

    /*------------------------------FOOTASTIC FOOTER!----------------------------*/

    footer {
	position:relative;
	z-index:100;
	width:910px;
	margin:0 auto;
	padding:10px 20px;
	background:url('../img/bg_main.png');
	}
	
	    footer a {
	        font-family:"BebasNeueRegular", sans-serif;
		
		color:#c4df9b;
	    }
        
            footer a:hover {
                color:#9ECA5C;
	    }
	    
            footer a.valid {
	    font-family:"RokkittRegular", serif;
		color:white;
	    }
	    
	    footer a.valid:hover {
		color:black;
	    }
            
	
	#back_top {
	    font-family:"BebasNeueRegular", sans-serif;
	    font-size:20px;
	    text-shadow:2px 2px 2px #666;
	    margin:0;
	}
	
	#footer_nav {
	    font-family:"RokkittRegular", serif;
	    font-size:16px;
	    text-shadow:2px 2px 2px #666;
	    padding:5px 0;
	}

	    #footer_nav li {
		display:inline-block;
		vertical-align:top;
		margin:0 45px 0 0;
	    }
	    
	    #footer_nav li ul{
		
		
	    }
	    
	    #footer_nav li ul li {
		display:block;
		
		margin:0 0 5px 0;
		
		height:16px;
		border:none;
	    }
	    

	    #footer_nav h5 {
		
		font-weight:600;
		
	    }

	
	hr {
	    width:910px;
	    height:0px;
	    border:1px dotted black;
	    padding:0;
	    margin:15px 0;
	}
	
	
	
	#siteinfo {
	    display:inline;
	    color:white;
	    font-size:14px;
	    
	    
	    
	}
	
	#imagesource {
	    display:block;
	    color:white;
	    font-size:10px;
	}
	
	#imagesource a {
	    font-family:"RokkittRegular", serif;
	    color:#000;
	}
	
	#imagesource a:hover {
	    color:#fff;
	}
	
	#imagesource a:visited {
	    color:#abb;
	}
	
	.valid {
	    
	    position:relative;
	    
	    left:570px;
	    
	    
	
	    /*left:360px;*/
	    
	}
	
	article.writing_sample {
	    width:650px;
	    line-height:1.3em;
	    background:white;
	    margin:0 auto;
	}

	article.writing_sample p {
	    margin:16px 0px 0 0px;	    

	}