/* --------------------------------------------------------------      Blueprint CSS Framework Screen Styles   * Version:   0.6 (21.9.2007)   * Website:   http://code.google.com/p/blueprintcss/   See Readme file in this directory for further instructions.   -------------------------------------------------------------- */

@import 'lib/reset.css';
@import 'lib/forms.css';


/* ---------------------------- For positiong elements -------------------- */
body {
	width: 100%;
	
    background: url(./themes/site_themes/default/bg9.jpg) #eec repeat-x top left;	
    text-align: center;	/* Delete when IE6 is finally gone */
	font-family: Times New Roman, Times, serif;
    font-size: 100%; /* standardised at 16px */
    font-size: 1em;
    line-height: 1.125em; /* standardised at 18px */      
} 
div, ul {
	border: none;
}

h1 {
	color: #000;
}
h2 {	
        width: 95%;
        font-size: 164%;/*font-size: 1.875em;*/
        line-height: 1.125em;
        text-transform: uppercase;
        letter-spacing: -0.025em;
        color: #220;
        
        border-top: 2px dashed #aa8;       
}
#portfolio h2 a:hover  {
        color: #900;
}
h3 {
	margin: 0.75em 0 0 0;

	line-height: 140%;

        font-size: 1.5em;
        color: #900;
}
p {
	color: #220;
    font-size: 1.0625em;
}
ul, dl {
	color: #000;
}
a {
	text-decoration: none;
	color: #900;
	
	
} 
a:hover {
	color: #004;

}
p > a {
	border-bottom: 2px dashed #aa8;
}
p > a:hover {
	border-bottom: 2px solid #900;
}
br {
	clear: both;
}
a:active, a:focus {outline: 0;}

em {
	color: #000;
	font-weight: bold;
}
acronym {
        border-bottom: 1px dashed #aa8;
}
a + a {
        margin: 0 0.5em;
}
::selection {
	background: #cca; /* Safari */
	}
::-moz-selection {
	background: #cca; /* Firefox */
}
/* -------------------------------- Wrapper ------------------------- */

#wrapper {
	position: relative;
	top: 2em;
	left: 2%;
	
	max-width: 1100px;
	min-width: 750px;
	width: 95%;
	
	text-align: left; /* Delete when IE6 is finally gone */	
}
#content {
	margin-left: 8%;
	width: 92%;
}

/* ------------------------------- Header --------------------------- */
#header {
	position: relative;
	margin: 0 2%;
	margin-top: 3em;
	
        width: 95%;
        height: 13em;
        border-top: 2px dashed #aa8; 
	
} 
#header h1 {
	
	font-size: 3.75em;
	
	width: 75%;
}
#header h1 a em {
	font-size: 126%;
	font-style: normal;
	font-weight: normal;
	color: #000;
}
#header h1 a { 
	position: relative;
	top: -0.75em;
	left: -0.75em; 
       
	height: 2.5em;
    padding: 0.25em 0.75em;    
    
	background: url(../images/title-stamp-new.png) no-repeat;
    color: #000;
	letter-spacing: -1px;
    text-transform: uppercase;   
    text-indent: -9000px;
	overflow: hidden; 
	display: block; 
	border: none;
	
        
} 
	
	
/* ---------------------------- Navigation ---------------------------- */
#nav {	
        position: absolute;
        top: 1.5em;
	left: 70%;
        margin: 0;
        text-align: left;
       
		width: 27.2%;
	
        background: transparent;
		border-top: none;
        font-family: "Courier New", "Courier New", Courier, monospace;
        font-weight: bold;
		
}
	ul#nav li {	
	    margin: 0.25em 3%;
	    
		width: 95%;
		height: 1.75em;
	    list-style-type: none;
	    
		font-size: 20px;
	    line-height: 140%;
	}
		ul#nav li a {
		    display: block;
		    color: #220;
		    background: transparent;
		    padding: 0 0.2em;
		    width: 95%;
			border-bottom: 1px dashed #aa8;   
		}
			/*
			ul#nav li a[href*="about"] {
				background: url(../images/about-stamp.png) top center no-repeat;
				border: none;
				
				text-indent: -9000px;
			}
			ul#nav li a[href*="about"]:hover {
				border: none;
				
			}*/
			
			ul#nav li a:hover {
				color: #900;
				
				blackground: url(../images/bg8.jpg) #ddb 0em -2em no-repeat;
				border-bottom: 1px solid #900;
			
			        
			}
			/*ul#nav li a:hover:after {
				content: " - " attr(title) ;
				font-size: 0.875em;
				color: #000;
			}*/
			ul#nav li a:first-letter {
				font-weight: bold;
			}



/* ------------------------ Rss Feed ----------------------- */
#subscribe {
    position: absolute;
    top: 1em;
    right: 1%;
    
    height: 9em;
    width: 11em;/*7em;*/
    
    background: url(./themes/site_themes/default/2stamp.png) no-repeat transparent;
}
#subscribe a {
    width: 100%;
    height: 100%;
    display: block;
    
    text-indent: -9999px;
}
#subscribe a:hover {
    background: url(./themes/site_themes/default/2stamp-hover.png) no-repeat transparent;
}
/* --------------------- Main Content ----------------------- */
#intro {
        clear: left;
		float: left;
		width: 63.8%;
		margin: 0 2%;
		margin-top: 0em;
                margin-bottom: 2em;
}

#intro p {
        clear: left;

        width: 95%;
	
        font-size: 1.0625em; /*1.5em;*/
		line-height: 1.125em;
         
        color: #000;       
}
#intro h2 + p:first-letter {
	float: left; 
    display: inline;
	margin: 0.05em 0.14em 0.05em 0pt;

	line-height:0.5em;
	font-size: 300%/*2.5em*/;
    color: #900;
	
} 
#skills {
	float: left;
	margin-top: 0em;
        margin-bottom: 2em;
	
	width: 31.2%; /*38.2 - 2%  */
}
        #skills h2 {
		font-size: 1.5em;
	}
	#skills h3 {
		margin-left: 7%;
	}
	#skills p {
		
		width: 80%;
		margin-left:  7%;
                margin-right: 7%;
		font-size: 0.875em;
                line-height: 140%/*1.3em*/;
	}
	#skills h2 + p:first-letter {
		float: left; 
		display:inline;
		margin: 0.05em 0.14em 0.05em 0;
	
		line-height: 0.5em; 
	    font-size: 300%/*2.5em*/;
	    color: #900;
	}

/* ------------------- Portfolio ---------------------- */

#portfolio, #about, #contact, #cv {
    clear: left;
	float: left;
	
	width: 63.8%;
	margin: 0 2%;
	padding-bottom: 2em;         
}
#portfolio h2 a {
	color: #000;
}
#portfolio dl{
	width: 88%;
	
	list-style: none;
	
	font-size: 0.875em;
}
#portfolio dl dt { 
    float: left;
    position: relative;
    z-index: 2;
    margin-top: 0.5em;

    width: 50%;
    
    font-size: 164%;
    line-height: 1.5em;
}
#portfolio dl dd a.type {
    float: right;
	margin: 0.25em 0.5em;
	
	padding-top: 1em;
	
	line-height: 1em;
	font-size: 1.125em;/*0.9375em;*/
	font-style: italic;
} 
#portfolio dl dd {
    
	width: 470px;
	
	border-bottom: 1px dashed #aa8;
}

#portfolio dl dd p.caption {
	margin-top: 1em;
	margin-left: 2%;
	
	height: 9em;
	width: 438px;
	
	line-height: 140%;	
}
#portfolio dl dd:hover, #portfolio dl dt:hover + dd {
	background: url(./themes/site_themes/default/bg8.jpg) #eec 0em 17em;
        border-bottom: 1px solid #aa8;
}
#portfolio dl dd > div {
	position: relative;
	
	width: 470px;
} 
#portfolio dl dd p.caption a {
	float: right; 
	display: inline;
	
	
	line-height: 140%;	
}
#portfolio a + a {
       margin: 0;
}
#portfolio dl dd img {  /* 470px box model length */
	background: #fff;
	border: 10px solid #ddb;
	border-bottom: 3px solid #ddb;
} 
   

/* ------------------------ Updates ------------------------ */

#updates, #other-work, #status {
	width: 31.2%; /*38.2 - 2%  */
	float: left;
	padding: 0;
         
	
}
#updates h2 {
        font-size: 1.5em;
}
#updates ul li h3 {  
	margin-top: 0.75em; /*0.75em*/	
        margin-bottom: 0.2em;
       
        line-height: 100%;


}
#updates > p {
    margin: 0 1em;
    font-size: 0.875em;
    line-height: 140%;
}
#updates p.sidelink {
	font-size: 1em;
	margin-top: 1em;	
} 
#updates p.sidelink a {
    height: 2em;
    padding: 0.35em;
    padding-left: 2.2em;
    
    
	border: none;
    display: block;
    
    font-size: 145%;
    line-height: 1em;
}
#updates p#feed a {
   background: url(./themes/site_themes/default/rss-stamp.png) no-repeat;
}
#updates p#feed a:hover {
    background: url(./themes/site_themes/default/rss-stamp.png) no-repeat left -164px;    
}
#updates p#cvlink a {
    background: url(./themes/site_themes/default/cv-stamp.png) no-repeat;
}
#updates p#cvlink a:hover {
    background: url(./themes/site_themes/default/cv-stamp.png) no-repeat left -163px;
}
#updates ul, #other-work ul, #status ul {
	width: 90%;
	list-style: none;
	
        font-size: 0.875em;
        line-height: 1.25em;
} 
#updates ul li, #other-work ul li, #status ul li {
  
	margin: 0em 1em;
	padding: 0.75em;
	padding-top: 0.1em;
        border-bottom: 1px dotted #aa8;
        
        line-height: 140%; /*1.5em;*/
        

}
#updates ul span { /* date */

    width: 100%;
    display: block;
    margin: 0 auto;
    
    color: #004;
    
    text-align: right;
    font-style: italic;
    font-size: 1.125em;
}
#updates ul li:hover, #other-work ul li:hover, #status ul li:hover {
	background: url(./themes/site_themes/default/bg8.jpg) #ddb 0em 26em;
        border-bottom: 1px solid #aa8;
}

/* ------------------------ CV page ------------------------ */

#cv dl {
      font-size: 1.0625em;
}
#cv dl dt {
      margin: 0.5em 0 0.25em;
      font-weight: bold;     
}
#cv dl dt span {
      margin-left: 0.5em;
      color: #aa8;    
}
#cv dl dt:hover span {
      color: #900;
}
#updates > h3 {
      margin-left: 5%;
      margin-right: 5%;
}

/* /////////////// Footer ////////////////// */

#footer {
    margin-top: 5em;

    height: 3em;
    
    background: url(./themes/site_themes/default/footer-bg2.jpg) repeat-x bottom;    
}
#footer p {
	text-align: center;
}
	
	
	
	
	
	
	
	
	
/* ////////////////////////For individual work //////////////////////////*/

div#introduction div#works {	
	float: left;
	height: 600px; 
}
#portfolio #piece {	
	position: relative;
        z-index: 3;
        float: left;
        
         
	width: 110px;
	height: 600px;
        
        border: 10px solid #ddb;
}
#portfolio #piece:hover  {
        position: relative;
	margin-left: 0%;
        z-index: 2;
	
        width: 800px;
	
        
        background-position: top left;
}
#portfolio .xgames-img {
       background: url(./themes/site_themes/default/xgames-new800x600.jpg) -40px 0;
}
#portfolio .xgames-img:hover  {
       background: url(./themes/site_themes/default/xgames-new800x600.jpg) top left;
}
#portfolio .who_is_skillen_v15-img {
      background: url(./themes/site_themes/default/whoisskillen800x600.jpg) -275px 0; 
}
#portfolio .who_is_skillen_v15-img:hover {
     background: url(./themes/site_themes/default/whoisskillen800x600.jpg) top left;
}
#portfolio .bet_republic-img {
      background: url(./themes/site_themes/default/betrepublic800x600.jpg) -550px 0; 
}
#portfolio .bet_republic-img:hover {
     background: url(./themes/site_themes/default/betrepublic800x600.jpg) top left;
}
#portfolio #piece a {
        display: block;

        width: 100%;
        height: 600px;
}
#portfolio #piece a span {
	position: relative;
	top: -5px;
	right: -5px;
	
	background: url(./themes/site_themes/default/arrow.jpg) no-repeat;
	height: 30px;
	width: 30px;
	display: block;
	float: right;
	
	text-indent: -9000px;
}
#portfolio #piece a.close span {
	position: relative;
	top: -10px;
	right: -10px;
	background: url(./themes/site_themes/default/arrow-lft.jpg) no-repeat;
	height: 30px;
	width: 30px;
	display: block;	
}

#portfolio > p, #about > p, #portfolio div.entry p, #portfolio div.entry ul li {
        position: relative;
	width: 71%;
        margin-left: 25%;
        z-index: 0;
        
        line-height: 140%;

        
  
}
#portfolio .entry h3 {
        margin-left: 25%;
}
#portfolio .entry ul li {
        font-size: 1.0625em;
}
#portfolio p.date {
        position: relative;
        left: -25%;
        
        color: #004;
        font-style: italic;
        font-size: 118%;
        line-height: 140%;
}
#portfolio > img {
        float: right;
        margin: 1%;
        
        border: 12px solid #cca;
        border: 2px dotted #cca;
}
#portfolio ul#links {
        margin: 1em;
        margin-left: 25%;
        width: 71%;
        font-size: 1.0625em;
        list-style-type: none;
        line-height: 140%;
}
#portfolio pre {
    margin: 1em 1em;
    padding: 15px;
    font-family: Courier New, Courier New, Courier, monospace;
    font-size: 0.75em;
    background: #ffd;
    border: 2px dashed #cca; 
}
form {
    }
#contact label, #comment_entry_form label {
    display: block;
    float: left;
    clear: left;
    
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    
    width: 25%;
}
input, textarea {
    margin-bottom: 0.5em;
    margin-top: 0.5em;
     background: url(./themes/site_themes/default/bg8.jpg) center;
     border: 2px dashed #aa8;
     width: 50%;
     clear: right;
}
textarea {
    width: 70%;
}
input:focus, input:hover, textarea:focus, textarea:hover {
    border: 2px solid #900;
    background: none;
}
input[type="submit"], input[type="submit"]:hover {
    margin-left: 25%;
    margin-right: 25%;
    clear: both;
    
    height: 30px;
    width: 250px;
    
    text-transformation: uppercase;
    color: #fff;
    background: url(./themes/site_themes/default/submit.png) center;
    cursor: pointer;
    border: none;
    text-indent: -9000px;
}
input[type="checkbox"] {
    margin-left: 0%;
    margin-right: 250px;
    
    width: 30px;
    height: 20px;

    background: none;
    border: none;
}
#updates ul li label {
    margin-right: 1em;
}
#comments {
	margin-bottom: 2em;
}
	#comments ol li {
		padding: 1em 0;
                margin-bottom: 0em;
		border-bottom: 1px dashed #cca;
                min-height: 3em;
                list-style-type: none;
	}
        #comments ol li:hover {
               background: url(./themes/site_themes/default/bg8.jpg) left -60px #cca;
        }
        #comments ol li h4 {
                float: left;
                width: 23%;
        }
        #comments ol li p {

        }
#comments ol li p + p {
	margin-left: 25%;
}
	#comments h2:first-child ol > li + li {
		background: #cca;
	}
	#comments ol li > p {
		width: 71%;
	    margin-left: 25%;
	}
#portfolio #flash {
       float: left;
       width: 425px;
}

/* -------------------------------- Other work section styles ------------------------- */

#other-work ul li {
	padding-top: 0.75em;
}
#other-work ul li a {
	font-size: 1.5em;
	line-height: 140%;
}


.title  {
/*font-size: 1.25em;
line-height: 1.75em;
background: transparent url("./themes/site_themes/default/underline.png") repeat-x left bottom;

letter-spacing: 0.25em;(/
}

/*.title:first-letter {
font-size: 3.125em;
}*/

date {
font-size: 1.25em;
font-weight: normal;
background: transparent;
color: #ccc;
}

.posted {
height: 100px;
width: 300px;
padding: 10px;
margin: auto;
/*margin-bottom: 10px;*/
color: #000;
font: 16px Georgia, Georgia, serif;
text-align: center;
background: url("./themes/site_themes/default/posted.png") no-repeat center top;

}

.sidetitle {
margin: 10px 0 10px 0;
font-size: 115%;
letter-spacing: 0.09em;
font-weight: normal;
background: transparent;
color: #666600;
}

.spacer {
clear: both;
visibility: hidden;
}

.paginate {
 font-family:		Verdana, Geneva, Tahoma, Trebuchet MS, Arial, Sans-serif;
 font-size:			12px;
 font-weight: 		normal;
 letter-spacing:	.1em;
 padding:			10px 6px 10px 4px;
 margin:			0;
 background-color:	transparent;
}

.pagecount {
 font-family:		Verdana, Geneva, Tahoma, Trebuchet MS, Arial, Sans-serif;
 font-size:			10px;
 color:				#666;
 font-weight:		normal;
 background-color: transparent;
}

.input {
border-top:        1px solid #999999;
border-left:       1px solid #999999;
background-color:  #fff;
color:             #000;
font-family:       Verdana, Geneva, Tahoma, Trebuchet MS, Arial, Sans-serif;
font-size:         11px;
height:            1.6em;
padding:           .3em 0 0 2px;
margin-top:        6px;
margin-bottom:     3px;
}

.textarea {
border-top:        1px solid #999999;
border-left:       1px solid #999999;
background-color:  #fff;
color:             #000;
font-family:       Verdana, Geneva, Tahoma, Trebuchet MS, Arial, Sans-serif;
font-size:         11px;
margin-top:        3px;
margin-bottom:     3px;
}

.checkbox {
background-color:  transparent;
margin:            3px;
padding:           0;
border:            0;
}

.submit {
background-color:  #fff;
font-family:       Arial, Verdana, Sans-serif;
font-size:         11px;
font-weight:       normal;
letter-spacing:    .1em;
padding:           1px 3px 1px 3px;
margin-top:        6px;
margin-bottom:     4px;
text-transform:    uppercase;
color:             #000;
}