/**********************************************************************************************

	Title: My Graffiti Theme
	Theme: Hege my personal blog
	Author: Hege Røkenes hege@rokenes.com www.hege.rokenes.com
	Date: 2010

***********************************************************************************************

	1. Global Reset
	2. General Elements
	3. Layout
	4. Layout elements
    5. Global typography
		
***********************************************************************************************
    
    Color Scheme
    Orange: #ff6600
    Blue: #5a8cbf
    Brown: #6c5100
    Light gray: #6e6e6e
    Dark gray: #282828 (backgound)
    Darkest gray: #1c1c1c (secondary content backround)

***********************************************************************************************/

/* 1. Global Reset
-----------------------------------------------------------------------------------------------
===============================================================================================*/	
@media screen {
	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, images, ins, kbd,q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td  
	{
	    margin: 0; 
	    padding: 0; 
	    border: 0; 
	    outline: 0; 
	    font-weight: inherit; 
	    font-style: inherit; 
	    font-size: 100%; 
	    font-family: inherit; 
	    vertical-align: baseline;
	    }

	ol, ul {
		list-style: none;
	    }
	
	table {
		border-collapse: separate; 
		border-spacing: 0;
	    }

	caption, th, td {
		text-align: left; 
		font-weight: normal;
	    }
	
	header, hgroup, aricle, aside, footer, section, nav { display: block; }


/* 2. General Elements
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

html{}

body {
	font-family: Calibri, Tahoma, Arial, Verdana, sans-serif;
	background-color: #282828;
	color: #222;
    }

hr { display: none; }

hr.stars, div.stars {
    display: block;
    background-image: url(images/hrStars.png) !important;
    background-repeat: no-repeat;
    background-position: top left;
    border: 0 none;
    height: 24px;
    margin: 5px 0;
    }
    
#useful-content hr.stars, #useful-content div.stars { margin-left: 8px; }
    
strong { font-weight: bold; }
	
em, i, figcaption { font-style: italic; }

figcaption { clear: both; }

address { font-style: normal; }

input, textarea, select {}

a {
	color: #000;
	text-decoration: underline;
    }

a:visited {}

a:hover, a:focus { text-decoration: none; }

a:active {}

a img, a:hover img, a:active img { border: 1px solid Black; }


/* 3. LAYOUT 
-----------------------------------------------------------------------------------------------
===============================================================================================*/	
nav {
    text-align: center;
    margin-top: 255px;
    }
    
header {
    width: 1082px;
    height: 474px;
    background-image: url(images/main-top.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	position: absolute;
	top: -330px;
	left: -112px;
    }

#wrapper {
    margin: 0 auto;
    width: 856px;
    background-color: #6e6e6e;
    padding-bottom: 12px;
    border-bottom: solid 3px #1c1c1c;
    background-image: url(images/wrapper-bg.png);
    background-repeat: repeat-y;
    position: relative;
    top: 330px;
    min-height: 730px;
    }
    
    #content {
        position: relative;
        height: auto;
        background-color: #fff;
        margin: 0 8px 15px 8px;
        padding: 10px 25px;
        width: 92%;
        }
        
        .article { padding: 10px 0; }
        
        .aricle h2 {
            font-size: 14px;
            font-weight: bold;
            }
        
    /* design only */
    #middle {
        background-image: url(images/middle-bg.jpg);
        background-repeat: no-repeat;
        border: 2px solid red!important;
        height: 96px;
        margin-left: auto;
        margin-right: auto;
        background-position: center;
        position: relative;
        }
    
    footer {
        padding-left: 14px;
        padding-right: 14px;
        margin-top: 100px;
        margin-left: auto;
        margin-right: auto;
        width: 827px;
        position: relative;
        top: 356px;
        background-image: url(images/wrapper-bg.png);
        background-repeat: repeat-y;
        z-index: 2;
        }
        
        /* design only */   
        #footer-bg {
            background-image: url(images/footer-bg.jpg);
            background-position: center top;
            background-repeat: no-repeat;
            height: 750px;
            display: block;
            width: 1158px;
            position: absolute;
            top: -85px;
            left: -132px;
            z-index: -1;
            }

/* Layout Frontpage, is inside #container
-----------------------------------------------------------------------------------------------
===============================================================================================*/	
    #frontpage {
        background-color:#fff;
        display: table;
        margin:0 0 0 -25px;
        width:74%;
        height: 100%;
        }
        
    #personal-content {
        position: relative;
        background-color: #fff;
        top: 0;
        float: left;
        width: 34.5%;
        padding-right: 6px;
        margin-top:0;
        padding-top: 0;
        }
        
        #personal-content div {
            background-color: #fff;
            display: block;
            padding-bottom: 20px;
            padding-top: 10px;
            }

    #useful-content {
        top: 0;
        background-color: #fff;
        float: right;
        width: 34.5%;
        margin-top: 0px;
        padding: 10px 6px 20px 8px;
        }
        
        #useful-content div {
            background-color: #fff;
            display: block;
            padding-bottom: 20px;
            padding-top: 5px;
            }
        
    aside {
        position: absolute;
        top: 0;
        background-color: #6e6e6e;
        height: 100%;
        right: 0;
        width: 27.9%;
        float: right;
        margin-top: 0px;
        padding-top: 0px;
        }
        
        .ie6 aside section, .ie6 aside div { width: 220px; }    
  
/* 3.1	Accessibility menu
-----------------------------------------------------------------------------------------------*/	

	#accessibility-links {
		position: absolute;
		left: -9000em;
		text-align: left;
	    }
	
	#site-title, #tagline, .twitter-title, h2#admin-links {
	    position: absolute;
		left: -9000em;
		text-align: left;
	    }

/* 3.2	Masthead
-----------------------------------------------------------------------------------------------*/	
	
	.tagline {
		float: left;
		clear: left;
		margin: 0;
		padding: 0px;
		position: relative;
		overflow: hidden;
	    }
	    
		.logo {
			position: absolute;
			left: 0;
			top: 0;
		    }

/* 3.3	Navigation
-----------------------------------------------------------------------------------------------*/
    nav, #sub-navigation {font-size: 0.8em;}
    
    nav li, #sub-navigation li {
        display: inline;
        height: 25px;
        text-transform: uppercase;
        }
 
    nav li a, #sub-navigation li a {
        padding-left: 5px;
        padding-right: 5px;
        text-decoration: none;
        color: #2a2a2a;
        }    
        
    nav li a:hover, #sub-navigation li a:hover { background-color: #5a8cbf; }    
    
    #sub-navigation {
        text-align: center;
        padding-top: 20px;
        font-weight: bold;
        }

/* 3.3	Primary Content
-----------------------------------------------------------------------------------------------*/	
    .default {}
    
    div.entry-content { margin-bottom: 50px; }
    
    .entry-content h2 {
        font-size: 20px;
        font-weight: bold;
        margin-top: 20px;
        }
    
    .entry-content ul {
        list-style-image: url(images/star-list-point.png);
        padding-left: 40px;
        }
        
        .entry-content ul li {}

        /*Category view */
        ol.hfeed { margin-top: 20px; }
        
        #datePublished {
            float: right;
            font-style: italic;
            }
            
            h2.entry-title { font-size: 1.2em!important; }     

            hr.categoryPost {
                display: block;
                margin-top: 30px;
                margin-bottom: 30px;
                color: #5a8cbf;
                }
                
            ul.post-links {
                padding:0;
                margin: 0;
                list-style-type: none;
                }    
                
            embed { margin-bottom: 20px; }
            
            ol.extramargin { padding-top: 30px; }
/* 3.4	Secondary content
-----------------------------------------------------------------------------------------------*/	
	#icons, .secondary-content-section { margin:8px 5px 6px 8px; }
    
    #icons { padding: 0px 0px 0px 10px; }
    
    #icons a img { border: 0 none!important; }
	
	.secondary-content-section {
	    background-color: #1c1c1c;
	    color: White;
	    padding: 10px;
	    }

    .secondary-content-section a {
        color: #fff;
        text-decoration: none;        
        }

        .secondary-content-section a:hover { 
            text-decoration: underline;
            }

    .secondary-content-section h3 { font-weight: bold; }
    
    .secondary-content-section p {
        padding: 0;
        font-size: 0.8em;
        }
        
    .secondary-content-section #offline-projects {}
    
    .section { margin-top: 12px; }
    
    .secondary-content-section ul li {
        list-style-image: url(images/bullet-2.gif);
        list-style-position: inside;
        }
        
    .randomFolio {
        width: 195px;
        border: none;
        }
    
    /* Footer
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

    hr.footer {
	    margin: 5px 0px 5px 0px;
	    clear: both;
	    visibility: visible !important;
	    }
	
	div#footer-sidebar {
        width: 100%;
        height: auto;
        margin-left: 5px;
        display: table;
        clear: both;
        }
                
        div#footer-sidebar .section {
            width: 31%;
            float: left;
            display: block;
            margin-top: 15px;
            margin-left: 10px;
            }
            
            #footer-sidebar a {
                color: White;
                text-decoration: none;
                }
                
            #footer-sidebar a:hover{
                color: White;
                text-decoration: underline;
                }
        
        #footer-sidebar div.section ul{
            padding-left: 15px;
            list-style-image: url(images/star-list-point.png);
            list-style-position: outside;
            }
           
        #admin-links {}
         
        div#site-info {
             color: #2a2a2a;
             font-size: 0.7em;
             margin-top: 10px;
             margin-left: 15px;
             padding-top: 30px;
             }
             
            #site-info span {
                position: absolute;
                bottom: 5px;
                left: 145px;
                }
                 
                div#site-info a { text-decoration: none; }
                div#site-info a:hover { text-decoration: underline; }
                #graffiti_logo {}
                
                
                /* search */
                #search_form {
		            height:32px;
		            width: 250px;
		            width: 100%;
		            text-align: right;
		            margin-top: 10px;
		            position: relative;
	                }
	                
		            .search label { left: -999em; }
            		
		            .search_input {
		                font-style: italic;
			            padding: 2px;
			            margin: 0!important;
			            position: absolute;
			            right: 100px;
			            top: 3px;
		                }
		                
		            #search_form .submit { 
		                margin-right: 7px; 
		                margin-top: 4px;
		                }
		         /*search */   
                
    #flickr-badge {
        float: right;
        padding: 0px;
        margin-right: 10px;
        margin-top: 50px;
        }

    #about {
        background-color: Transparent;
        width:80%;
        margin: 30px 0 30px 15px;
        float: left;
        }
        
/* Twitter
-----------------------------------------------------------------------------------------------*/	        
    #twitter_div {
	    display: table;
	    width: 815px;
	    height: 23px;
	    margin-top: 12px;
	    margin-left: 142px;
	    font-size: 0.7em;
	    }
	
	ul#twitter_update_list {
        display: block;
        width: 79%;
        float: left;
	    }
	    
	    ul#twitter_update_list li span {
	        display:block; 
	        width: 100%; 
	        }
	    ul#twitter_update_list li > a { float: right; }
	
	#twitter_div span {
	    display: inline;
	    float: left;
	    }
	
	#twitter-logo {
	    float: right;
	    margin-right: 10px;
	    display: inline;
	    padding-top: 1px;
	    }

/* 4. Layout elements
-----------------------------------------------------------------------------------------------
===============================================================================================*/
/* contact form */

#contact_form {
    position: relative;
    height: 160px;
    }
    
    #contact_form div { font-size: 110%; }
    
    #contact_form .subject, #contact_form .name, 
    #contact_form .email, #contact_form .message, #contact_form .form_buttons 
        { position: absolute; } 
    
    #contact_form .subject, #contact_form .name, #contact_form .email, #contact_form .form_buttons {
        right: 0;
        width: 49%;
        }
    
    #contact_form .subject { display: none; }
        
    #contact_form .name { }
    #contact_form .email { top: 25px; }
    #contact_form .form_buttons { top: 55px; }
    #contact_form .message { width: 49%; }
    #contactbutton { float: right; }
    #email, #name { width: 99%; }

#contact_form #message, #contact_form #email, #contact_form #name {
    background-repeat: no-repeat;
    background-position: bottom left;
    border: 1px solid #000;
    }
    
#message { background-image: url(images/Message_bg.gif); } 
#email { background-image: url(images/commentEmail_bg.gif); } 
#name { background-image: url(images/commentName_bg.gif); }
#message:focus, #email:focus, #name:focus { background-image: none; } 

#contact_form .name label, 
#contact_form .email label,
#contact_form .message label
 { display:none; }

#contact_form textarea {
	color: #000;
	width: 100%;
    }

#contact_form #contact_status {
	font-size: 125%;
	padding-top: 20px;
    }
    
    #contactbutton {
        border: 0;
        background-image: url(images/btn_contactFormSend.png)!important;
        width: 90px;
        height: 23px;
        font-weight: bold;
        color: White;
        vertical-align: top;
        padding: 0;
        }
        
/* contact form */   

/* comment form */
    
div.comment-list {}

div.comment-list ol {
    padding-left: 40px;
    padding-right: 40px;
    list-style: none;
    }
    
    div.comment-list ol li.comment-count {
        margin: 0 0 20px 0; 
        padding: 0;
        }    
    
    div.comment-list ul li,div.comment-list ul {
        margin: 0!important;
        padding: 0!important;
        }

div.comment-form {
    display: block; 
    height: 100%; 
    margin-top: 30px;
    }

#comment_form { height: 100%; }  

    #comment_form h2, .comment-list h2 {
        color: #5a8cbf;
        font-weight: bold;
        font-size: 1.3em;
        text-transform: uppercase;
        }
        
    div.f1 {
        height: 230px;
        position: relative;
        }    
    
   div.f1 label.unvisible {
        width: 110px;
        display: inline-block;
        display: none;
        }
    
    input.text { width: 200px; }   
    
    #commentLoggedIn {position: absolute; right: 0px; border: 0 none collapse;}

    #author, form#comment_form #email, #url, #comment, #commentLoggedIn {
        background-position: bottom left;
        background-repeat: no-repeat;
        border: 1px solid black;
        font-weight: bold;
        position: absolute;
        right: 0;
        }
    
    #author, form#comment_form #email, #url { width: 39%; }
    
    #author { top: 25px; }
    form#comment_form #email { top: 50px; }
    #url { top: 75px; }
    
    
    #author { background-image: url(images/commentName_bg.gif); }
    
    #url { background-image: url(images/commentWebsite_bg.gif); }
    
    #comment {
        width: 59%;
        background-image: url(images/comment_bg.gif);
        left: 0;
        top: 25px;
        }
    
    #author:focus, #url:focus, #comment:focus { background-image: none; }
    
    #commentbutton {
        position: absolute;
        right: 0;
        top: 100px;
        z-index: 10;
        }  
        
    span.commentstatus {
        border: 2px solid red;
        padding: 5px;
        color: #ff6600;
        font-weight: bold;
        position: absolute;
        bottom: 10px;
        width: 98%;
    }    
    
    /* posts */
    .postImage {
        float: left; 
        margin: 0px 10px 2px 0px;
        border: 1px solid #000;
        } 

/* 5. Typography
-----------------------------------------------------------------------------------------------
===============================================================================================*/

    body { font-family: Calibri, Verdana, Tahoma; }
    
    h1, h2, h3, h4, h5, h6 { font-weight: normal; }

    h2.footer-sidebar {
        color: #5a8cbf;
        font-weight: bold;
        font-size: 1.3em;
        text-transform: uppercase;
        }
            
    /* site header personal, useful and everything in between */   
    h1 {
        color: #6c5100;
        font-size: 40px;
        font-weight: bold;
        padding-top: 10px;
        }
        
        div.contentBg h1 {
            color: #000;
            font-size: 20px;
            font-weight: bold;
            }
        
        #secondary-content a img, #secondary-content a:hover img, #secondary-content a:active img {border: 2px solid #FFF;}
        
        #secondary-content .imgViewerFlickr {}
        
        #secondary-content h1 {
	        font-size: 18px;
	        position: absolute;
	        top: -20px;
	        left: 35px;
	        font-weight: normal;
	        }
	    
	    h1#personal a, h1#personalCategorysite a, h1#useful a, h1#personalLink a, h1#usefulLink a,  h1#usefulCategorysite a{
            color: White;
            font-size: 50px;
            position: absolute;
            top: -55px;
            text-decoration: none;
            } 
            
            h1#personalLink a {color: #5e5e5e; left: 0px;}
            
            h1#personal a, h1#personalCategorysite a, h1#useful a, h1#usefulCategorysite a{cursor: hand;}
     
        h1#personal a, h1#personalCategorysite a {padding: 0;}
            
            h1#personal a {left: -12px;}
            h1#personalCategorysite a {left: -2px;}
       
        h1#useful a, h1#usefulCategorysite a, h1#usefulLink a {
            right: -2px;
            text-align: right;
            }
            
            h1#usefulCategorysite a {right: 0px;}
            
            h1#usefulLink a {color: #5e5e5e; margin-right: 0px;}
            
        h1#secondary {
            padding: 0;
            color: #fff;
            }    
    
        /* post headers */    
    h2.projects {
        margin-bottom: 20px;
        font-size: 1.3em;
        text-transform: uppercase;
        color: #ff6600;
        font-weight: bold;
        }

    h2 a {
        padding: 0;
        font-size: 1.7em;
        line-height: 1;
        font-weight: bold;
        color: #6c5100;
        text-decoration: none;
        display: block;
        margin-top: 7px;
        }
    
    /* date and read more */    
    h4, h4 a { 
        padding: 0;
        font-size: 0.8em;
        color: #555;
        }    
        
    p {
        font-size: 1em;
        padding: 10px 0 10px 0;
        }
        
    p.post-meta {
        float: right;
        font-style: italic;
        }    
        
    #useful-content p, #useful-content h2, #useful-content h4 { padding-left: 8px; }
        
    .post-links {padding: 5px 15px;}
    
    #secondary-content p, #useful-content p, #personal-content p {}
    
/* Online-projects.post.view */
    a.weburl {
        font-size: 2em;
        font-weight: bold;
        background-color: #6c5100;
        color: White;
        display: block;
        text-align: center;
        padding-top: 10px;
        padding-bottom: 10px;
        }

/* /Online-projects.post.view */ 
    
    
/* Portfolio */
.tagsSortList { 
    margin-bottom: 20px; 
    display: table;
    }
    
.tagsSortList li { float: left; }

    .tagsSortList li a, .tagsSortList li span {
        text-decoration: none;
        padding: 2px 3px;
        margin: 0 3px 7px 0;
        color: #6e6e6e;
        font-size: 11px;
        }
        
    .tagsSortList li a:hover, .activeTag a {
        background-color: #5a8cbf;
        color: #000!important;
        }

#portfolio {
    display: table;
    width: 100%;
    }
    
    #portfolio li {
        width: 234px;
        float: left;
        height: 340px;
        margin-right: 9px;
        padding: 10px 7px;
        margin-bottom: 7px;
        position: relative;
        border: 1px solid #6e6e6e;
        }
        
        #portfolio li p, .readMore { font-size: 12px; }
            
        #portfolio li a.readMore {
            text-decoration: none;
            float: right;
            }
       
        #portfolio li h2 {
            float: left;    
            width: 180px;
            }
            
            #portfolio li h2 a { font-size: 1.4em; }
        
        #portfolio li img.employer {
            float: right;
            margin-bottom: 5px;
            }
        
        #portfolio li img.thumb {
            width: 100%;
            height: 100px;
            display: block;
            clear: both;
            margin-top: 10px;
            border: none;
            } 
            
            .projectFooter {
                position: absolute;
                bottom: 10px;
                left: 5px;
                right: 5px;
                overflow: hidden;
                }
            
                #portfolio li .weburl { font-size: 12px; }
                    
                #portfolio li .tags, #portfolio li #showAll  {
                    font-size: 10px;
                    height: 30px;
                    color: #6e6e6e;
                    }    
                    
                    #portfolio li .tags a {
                        color: #6e6e6e;
                        text-decoration: none;
                        }
                        
                    #portfolio li .tags a:hover, a.readMore:hover { text-decoration: underline; }
    
} /* closes @media screen */