/*
 * @notes   Main Style Sheet for mattkirk.us
 * @author  Matt Kirk
 * ------------------------------------------------*/
html {
    margin:0;
    padding:0;
    overflow:-moz-scrollbars-vertical; /** @note always show vertical scrollbar in firefox */
    overflow-x: auto;
}

body {
    font: normal 13px arial, sans-serif;
    color: #212121;
}

p {
    line-height: 17px;
}

.container_12 .grid_8 {
    min-height: 100px;
}


/* masthead
 ------------------------------------------------*/
div#masthead {
    height: 97px;
    background: url(../images/backgrounds/top-bg-white.png) repeat-x left top;
}

body.home div#masthead {
    height: 97px;
    background: url(../images/backgrounds/top-bg.png) repeat-x left top;
}
    
    div#logo {
        margin: 25px 0 0;
        float: left;
    }
    
    div#nav {
        float: right;
		margin: 20px 40px 0 0;
    }
        div#nav li {
            display: inline;
            float: left;
            margin: 0 10px 0 0;
            padding:0;
        }
            div#nav li a {
                display: block;
                padding: 12px 18px;
            }
                div#nav li#portfolio a {
                    background:transparent url(../images/nav/nav-port.png) no-repeat left 10px;
                    line-height:20px;
                    overflow:hidden;
                    text-indent:-999px;
                    width: 70px;
                }
                
                div#nav li#portfolio a:hover {
                    background-position: left -31px;
                }
                
                div#nav li#portfolio a.here {
                    background-position: left -31px;
                }
                
                div#nav li#blog a {
                    background:transparent url(../images/nav/nav-blog.png) no-repeat left 10px;
                    line-height:20px;
                    overflow:hidden;
                    text-indent:-999px;
                    width: 70px;
                }
                
                div#nav li#blog a:hover {
                    background-position: left -30px;
                }
                
                div#nav li#blog a.here {
                    background-position: left -30px;
                }



/* greeting
 ------------------------------------------------*/
div#greeting {
    background: url(../images/backgrounds/blue-bg.png) repeat-x left bottom;
}	

body.home div#greeting {
    height: 300px;
}	
	div#greeting div.container_12 {
		position: relative;
	}
	
    div#page-intro {
        margin: 10px 0;
        float: left;
        width: 550px;
    }
	
	body.home div#page-intro {
        margin: 50px 0 0;
        float: left;
        width: 550px;
    }

	div#page-intro p {
		margin: 40px 0 0;
		font: bold 17px arial, sans-serif;
		color: #064E5F;
	}
    
    div#pic {
        position: absolute;
        right: 65px;
        top: 81px;
    }


/* content
 ------------------------------------------------*/
div#content {
    background: url(../images/backgrounds/tan-bg.png) repeat left top;
    padding: 0 0 0;
}

body.home div#content {
    padding: 20px 0 40px;
}

	div.tier {
		margin: 35px 0;
		float: left;
	}
	
	div.section-intro {
		background: url(../images/lines/line-horz.png) no-repeat center bottom;
		padding: 0 0 7px;
		margin: 30px 0 14px;
		float: left;
		width: 100%;
	}
    
    p.section-intro-p {
        font-size: 15px;
    }
	
	div.featured-item {
		float: left;
        margin: 0 0 14px;
        padding: 0 0 14px;
        width: 100%;
        background: url(../images/lines/line-horz.png) no-repeat center bottom;
	}
        div.last {
            background: none;
        }
	
	div.featured-img {
		background: url(../images/lines/featured-frame.png) no-repeat left top;
		padding: 3px;
	}

    div#skills p {
        margin-bottom: 7px;
    }

    
    
    /* homepage blog
    ------------------------------------------------*/
    div#hp-blog div.grid_12 {
		margin-bottom: 55px;
        position: relative;
	}
	
	div.entry {
        
    }
        div.entry p {
            margin: 0 0 14px;
        }
        
        div.entry a {
            color: #C53A11;
        }
        
        div.title a {
            font-size: 18px;
            font-weight: bold;
            color: #C63D14;
			letter-spacing: -.4px;
			text-decoration: none;
        }
            div.title a:hover {
                text-decoration: underline;
            }
        
        div.date {
            font-size: 10px;
            text-transform: uppercase;
            margin: 0 0 14px;
			color: #777;
        }
        
        div#blog-meta {
            background: transparent url(../images/lines/line-horz.png) no-repeat scroll center top;
            padding: 21px 0 0;
        }
        
        div#recent-entries, div#port-items {
            float: left;
            width: 100%;
        }
            li.recent-entry, li.port-item {
                float: left;
                width: 100%;
                background: transparent url(../images/lines/line-horz.png) no-repeat scroll center bottom;
                padding: 0 0 7px;
                margin: 0 0 7px;
            }
                li.last {
                    background: none;
                }
            
            li.recent-entry div.comments {
                font-size: 10px;
                text-transform: uppercase;
				text-align: right;
				color: #777;
            }
                div#recent-entries li.recent-entry div.comments a {
                    color: #079DC2;
                    margin: 0 0 0 3px;
                    text-decoration: none;
                }
                    div#recent-entries li.recent-entry div.comments a:hover {
                        text-decoration: underline;
                    }
                    
            li.recent-entry div.title a {
                font-size: 14px;
            }   

        div.comment-total {
            font-size: 11px;
        }
		
		div.comment-total a {
			text-decoration: none;
            color: #079DC2;
            text-transform: uppercase;
		}
		
		span.comment-total  {
			color: #777;
		}
        
        #hp-blog {
            position: relative;
        }
        
        #hp-blog .grid_4 {
            background: transparent url(http://mattkirk.us/themes/site_themes/mattkirk/redesign/images/lines/line-horz.png) no-repeat left bottom;
            padding: 0 0 7px;
            margin: 0 0 7px;
        }
            #hp-blog .last {
                background: none;
            }
            
            #hp-blog ul, #hp-blog li {
                height: 130px;
            }
            
        #hp-blog li.recent-entry {
                background: none;
                margin: 0;
                padding: 0;
                float: none;
            }
            
            
        div#hp-blog div.title {
            margin: 0 0 4px;
        }
            div#hp-blog div.title a {
                font-size: 14px;
            }
            
        #hp-blog div.middle {
            margin: 0;
            padding: 0 10px;
        }
        
        #hp-blog div.controls {
            position: absolute;
            top: 30px;
            right: 0;
        }
        
        #hp-blog span.pagination {
            margin: 0 5px;
            height: 19px;
        }
        
        #hp-blog span.pagination a {
            background: url(http://mattkirk.us/themes/site_themes/mattkirk/redesign/images/slide.png) no-repeat 50% 50%;
            float: left;
            width: 8px;
            margin: 0 2px;
            height: 19px;
        }
        
        #hp-blog span.pagination a.activeSlide {
            background: url(http://mattkirk.us/themes/site_themes/mattkirk/redesign/images/active-slide.png) no-repeat 50% 50%;
        }
        
        #hp-blog span.prev {
            float: left;
            margin: 0 3px 0 0;
        }
        
        /*#hp-blog #recent-entries li {
            background: transparent url(http://mattkirk.us/themes/site_themes/mattkirk/redesign/images/lines/doubleline-vert.png) repeat-y scroll center top;
        }
            #hp-blog ul, #hp-blog li {
                height: 60px;
            }
            
        #hp-blog div.middle {
            margin: 0;
            padding: 0 10px;
        }
        
        #hp-blog div.controls {
            position: absolute;
            top: 30px;
            right: 0;
        }
        
        #hp-blog span.pagination {
            margin: 0 5px;
            height: 19px;
        }
        
        #hp-blog span.pagination a {
            background: url(http://mattkirk.us/themes/site_themes/mattkirk/redesign/images/slide.png) no-repeat 50% 50%;
            float: left;
            width: 8px;
            margin: 0 2px;
            height: 19px;
        }
        
        #hp-blog span.pagination a.activeSlide {
            background: url(http://mattkirk.us/themes/site_themes/mattkirk/redesign/images/active-slide.png) no-repeat 50% 50%;
        }
        
        #hp-blog span.prev {
            float: left;
            margin: 0 3px 0 0;
        }*/


/* comment page
 ------------------------------------------------*/
div#comments-top {
    float: left;
    width: 100%;
}

div#comments-bottom-wrap {
    float: left;
    width: 100%;
    background: transparent url(../images/backgrounds/comment-bg-top.png) repeat-x scroll center top;
    padding: 2px 0 0;
}

div#comments-bottom {
    float: left;
    width: 100%;
    background: transparent url(../images/backgrounds/comment-bg.png) repeat scroll center top;
}

div#comments {
    margin-bottom: 70px;
}
    div#comments h3 {
        width: 960px;
    }

div#comments a {
    color: #079DC2;
    text-decoration: none;
}

div#comment-list {
    margin: 7px 0 0;
}
    div.comment-count {
        background: transparent url(../images/comment-bubble-large-blue.png) no-repeat center center;
        height: 40px;
    }
        div.comment-count p {
            font-size: 16px;
            font-weight: bold;
            color: #fff;
            margin: 12px 0 0;
            text-align: center;
        }
    
    div.comment-entry {
        margin: 0 0 28px;
        float: left;
        width: 100%;
    }
        div.comment-entry div.grid_4, div.comment-entry div.grid_8 {
            background: transparent url(../images/lines/line-horz-tan.png) no-repeat scroll left top;
            padding: 7px 0 0;
        }
    
    div#comment-list div.posted {
        background: transparent url(../images/comment-bubble-small-blue-l.png) no-repeat right top;
        height: 25px;
        padding: 7px 0 0;
        color: #777;
        font-size: 11px;
        text-transform: uppercase;
        text-align: left;
    }
 
div#blog-entry a {
    color: #C63D14;
    text-decoration: none;
}
    div#blog-entry a:hover {
        text-decoration: underline;
    }

div#no-comment-form {
    padding: 21px 0 0;
    margin: 21px 0 0;
    float: left;
}

div#comment-form {
    /*background: transparent url(../images/lines/line-horz-tan.png) no-repeat scroll center top;*/
    padding: 21px 0 0;
    margin: 21px 0 0;
    float: left;
}
    div#comment-form h3, div#no-comment-form h3 {
        width: 960px;
    }
    
    div#comment-form div.input, div#no-comment-form div.input {
        margin: 0 0 7px;
    }
    
    div#comment-form div.input label, div#no-comment-form div.input label {
        display: block;
        font-size: 11px;
        color: #777;
        text-transform: uppercase;
        font-weight: normal;
    }
    
    div#comment-form input.text, div#no-comment-form input.text {
        border: 1px solid #aaa;
        width: 290px;
        padding: 5px;
    }
    
    div#comment-form div.captcha img, div#no-comment-form div.captcha img {
        float: left;
        margin: 0 7px 0 0;
    }
    
    div#comment-form div.captcha input.text, div#no-comment-form div.captcha input.text {
        float: right;
        width: 140px;
    }
    
    div#comment-form textarea, div#no-comment-form textarea {
        border: 1px solid #aaa;
        width: 606px;
		padding: 7px;
    }
    
    span#comment-submit {
		margin-bottom: 14px;
        margin: 0;
        width: 294px;
        height: 47px;
	}
        span#comment-submit button {
            width: 297px;
        }
	
	span#comment-clear {
        float: right;
        width: 140px;
        margin: 0;
        height: 45px;
	}
        span#comment-clear button {
            width: 140px;
        }

div#comment-preview {
    float: left;
    margin: 21px 0;
    padding: 21px 14px;
    background: url(../images/backgrounds/blue-bg.png) repeat left top;
    width: 904px;
    border: 1px solid #08667c;
}
    div#comment-preview div.grid_8 {
        background: none;
        color: #fff;
        min-height: 0;
    }
    
    div#comment-preview div.grid_4 {
        width: 260px;
        background: none;
    }
	
	div#comment-preview div.posted {
		color: #026077;
        font-size: 11px;
        text-transform: uppercase;
        text-align: left;
	}
        div#comment-preview div.posted a {
            color: #fff;
        }

div#blog-entries a {
    color: #C63D14;
    text-decoration: none;
}
    div#blog-entries a:hover {
        text-decoration: underline;
    }
    
#blog-entries .entry {
    margin: 0 0 35px;
    padding: 0 0 21px;
    float: left;
    background: url(../images/lines/line-horz.png) no-repeat center bottom;
    width: 620px;
}
    #blog-entries .last {
        background: none;
    }

#blog-entries .entry .comments {
    color: #777;
    font-size: 10px;
    text-transform: uppercase;
    margin: 14px 0 0;
}

    #blog-entries .entry .comments a {
        color: #079DC2;
        text-decoration: none;
    }
        #blog-entries .entry .comments a:hover {
            text-decoration: underline;
        }
        
#blog-entries .entry h2 {
    width: 620px;
}


div#sidebar-blog-meta {
    
}

    div.sidebar-blog-meta-tier {
        float: left;
        width: 100%;
        margin: 0 0 28px;
    }
        div.sidebar-blog-meta-tier ul {
            margin: 7px 0 0;
        }
        
    /*div#monthly-archives a {
        font-size: 11px;
        text-transform: uppercase;
        color: #777;
    }
        div#monthly-archives a:hover {
            text-decoration: underline;
            color: #079DC2;
        }*/
        
#blog-entry .current-entry {
    color: #6c6c6c;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: -.4px;
}

div.entry-pagination {
    margin: 21px 0;
    clear: both;
}
     
div.entry-pagination p.prev {
    float: left;
    width: 240px;
}
    div.entry-pagination p.prev a {
        display: block;
        font-weight: bold;
    }
    
    div.entry-pagination p.prev span.arrow {
        background: transparent url(../images/buttons/prev-next-arrows.png) no-repeat left top;
        height: 20px;
        width: 25px;
        float: left;
    }

div.entry-pagination p.next {
    float: right;
    width: 240px;
	text-align: right
}
    div.entry-pagination p.next a {
        display: block;
        font-weight: bold;
    }
	
	div.entry-pagination p.next span.arrow {
        background: transparent url(../images/buttons/prev-next-arrows.png) no-repeat -25px top;
        height: 20px;
        width: 25px;
        float: right;
    }
        
div.entry-pagination p.back-to-main {
    float: left;
    width: 100%;
    clear: both;
}

p.back-to-main {
    margin: 0 0 28px;
}

/* status
 ------------------------------------------------*/
div#status {
    height: 42px;
    background: url(../images/backgrounds/status-bg.png) repeat-x left top;
}	
    
    div#project-status {
        padding: 13px 0 0;
        float: left;
        width: 650px;
    }
	
	div#toggle-wrap {
		position: relative;
		float: right;
	}
	
    div#contact-toggle {
        position: absolute;
        right: 30px;
        top: -4px;
        width: 293px;
        height: 46px;
        background: url(../images/form/contact-toggle.png) no-repeat left top;
    }
        div#contact-toggle a {
            background-image: url(../images/form/contact-arrow.png);
            background-repeat: no-repeat;
            line-height:45px;
            display: block;
            overflow:hidden;
            text-indent:-999px;
            width: 293px;
			margin: 1px 0 0;
        }
            div#contact-toggle a.down {
                background-position: center 17px;
            }
            
            div#contact-toggle a.up {
                background-position: center -45px;
            }



/* contact
 ------------------------------------------------*/
div#contact {
    height: 210px;
    background: url(../images/backgrounds/yellow-bg.png) repeat-x left top;
	overflow: hidden;
}
	
    div#contact div.container_12 div.grid_4 {
        margin-top: 40px;
    }
    
    div#contact div.omega {
        text-align: right;
    }
	
	div.text {
		margin: 0 0 20px;
	}
	
	div.input {
		float: left;
        width: 100%;
	}
	
	div.input label {
		display: block;
		font: bold 15px arial, sans-serif;
		margin: 0 0 4px;
        color: #c22f02;
	}
	
	span.error {
		font-size: 11px;
		color: #000;
		display: none;
		margin: 0 0 0 7px;
	}
	
	div.name {
		margin: 0 0 18px;
	}
	
	div.name input, div.email input {
		background: transparent;
		border: none;
		padding: 8px;
		width: 296px;
	}
	
	span.text {
		background: url(../images/form/text-input-bg.png) no-repeat left top;
		float: left;
	}
	
	div.message textarea {
		background: transparent;
		width: 285px;
		height: 85px;
		border: none;
		padding: 8px;
        font: 12px/15px normal arial, sans-serif;
	}
	
	span.textarea {
		background: url(../images/form/message-bg.png) no-repeat left top;
		float: left;
	}
	
	div#contact div.buttons {
		margin: 20px 0 0;
	}
	
	span.button {
		float: left;
		width: 297px;
		height: 43px;
		margin: 0 0 0 8px;
        padding: 0;
	}
	
	span#submit {
		/*background: url(../images/buttons/send-btn.png) no-repeat left top;*/
		margin-bottom: 14px;
	}
	
	span#clear {
		/*background: url(../images/buttons/clear-btn.png) no-repeat left top;*/
	}
	
	button {
		background: transparent;
		border: 0;
		cursor: pointer;
		outline: none;
		width: 294px;
		height: 47px;
	}
		button:focus {
			outline: none;
		}
		
	p.company {
		display: none;
	}
	
	div#target {
		text-align: center;
		font-size: 18px;
		margin: 14px 0;
		padding: 50px 0 0;
	}
	

/* footer
 ------------------------------------------------*/
div#footer {
    height: 284px;
    background: url(../images/backgrounds/footer-bg.png) repeat left top;
}
	div#footer div.container_12 {
		text-align: center;
	}
		div#footer img#btt {
			margin: 30px 0 0;
			cursor: pointer;
		}
		
	div.git {
		background: url(../images/git/get-in-touch-bg.jpg) no-repeat left top;
		margin-top: 40px;
		position: relative;
		height: 41px;
	}
		div.git img {
			position: absolute;
			top: 0;
			left: 10px;
		}
		
		div.git p {
			text-align: center;
			font: bold 16px arial,sans-serif;
			color: #eaeaea;
			text-align: right;
			margin: 10px 60px 0 0;
		}
            div.git a {
                color: #eaeaea;
                text-decoration: none;
            }
            
            div.git a:hover {
                text-decoration: underline;
                color: #C63D14;
            }
        
		
		div#skype img {
		}
		
		div#git-email img {
		}
		
		div#phone img {
			top: -10px;
			left: 20px;
		}
		
	div#footer div.omega {
        background-position: right top;
    }


div.loading {
	position: absolute;
	left: -9000px;
	display: block;
}





/* Portfolio Page
 ------------------------------------------------*/
body.portfolio div#content div.container_12 {
    min-height: 800px;
}

body.portfolio div#content div.container_12 div.tier {
    display: none;
}

body.portfolio div.tier {
    background: url(../images/lines/line-vert.png) 580px top repeat-y;
}

div#portfolio-item-frame li.frame-li {
    display: none;
    width: 520px;
    position: relative;
}

div.port-thumb-frame {
    overflow: hidden;
    height: 70px;
    border: 1px solid #ccc;
}

div#portfolio-slideshow {
    position: relative;
}

div.port-head-left {
    float: left;
    width: 350px;
}

div#portfolio-item-frame h2 {
    font-size: 28px;
}

div#portfolio-item-frame div.controls {
    float: left;
    margin: 0 0 14px;
    clear: left;
}
    div#portfolio-item-frame div.controls a {
        display: block;
        height: 14px;
        width: 14px;
        padding: 4px;
        background: #838383;
        color: #fff;
        text-decoration: none;
        margin: 0 4px 0 0;
        text-align: center;
        float: left;
    }
    
    div#portfolio-item-frame div.controls a.activeSlide {
        background: #C63D14;
    }

div.port-img-desc {
    margin: 14px 0;
}

div.port-head-right {
    float: right;
    width: 150px;
}

ul.portfolio-role li {
    text-align: right;
}


li.frame-li div.slides img {
    border: 1px solid #ddd;
}

p.url-link {
    margin: 7px 0;
    color: #C63D14;
}
    p.url-link a {
        color: #C63D14;
        text-decoration: none;
    }
        p.url-link a:hover {
            text-decoration: underline;
        }


/*
 ------------------------------------------------*/
div.img-left {
    float: left;
    margin: 14px 14px 14px 0;
}