/* @group CSS reset */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
img, ins, kbd, q, samp, small, strike, strong, sub, sup, tt, var,
b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,
caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, 
footer, header, hgroup, menu, nav, section, time, mark, audio, video {
    margin:          0;
    padding:         0;
    border:          0;
    outline:         0;
    font-size:       100%;
    vertical-align:  baseline;
    background:      transparent;
}

article, aside, dialog, figure, footer, header, hgroup, menu,
nav, section, time, mark, audio, video {display: block;}

body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
cite {font-style: normal;}

/* remember to define focus styles! */
:focus {outline: 0;}

/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}

/* tables still need 'cellspacing="0"' in the markup
table {
    border-collapse: collapse;
    border-spacing:  0;
}*/

/*@end*/

/* @group Universal */

*:link,
*:visited,
*:hover,
*:active,
*:focus {
    -webkit-transition:
        color .25s linear,
        background-color .25s linear,
        border-color .25s linear;
    -moz-transition:
        color .25s linear,
        background-color .25s linear,
        border-color .25s linear;
	-o-transition:
	    color .25s linear,
	    background-color .25s linear,
	    border-color .25s linear;
    transition:
        color .25s linear,
        background-color .25s linear,
        border-color .25s linear;
}

/* Float clearing */

.group::after { 
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
* html .group { 
height: 1%;
}
:first-child + html .group { 
min-height: 1px;
}
a:active { 
position: relative;
top: 1px;
}

/*@end*/


body {
    background: url(img/html_bg2.png) 0 300px;
}

time {
    display: inline;
}

strong {
    color: #fff;
}

hr {
	margin: 1em 2em 1em 1em;
}

#wrapper {
    padding: 3em 0;
 
    background: -webkit-gradient(linear, left center, left bottom, from(transparent), to(rgba(0, 0, 0, .7)));
    background: -moz-linear-gradient(center bottom, rgba(0, 0, 0, .7), transparent);
	background: linear-gradient(center bottom, rgba(0, 0, 0, .7), transparent);
}

#content {
    position: relative;
    background: #444;
    color: #ccc;
    font-family: Georgia, serif;
	font-size: .9em;
    width: 700px;
    margin: 0em auto;
    padding: 2em;
    
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid #333;

    -moz-box-shadow: 0px 5px 15px rgba(0, 0, 0, .7);
    -webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, .7);
    box-shadow: 0px 5px 15px rgba(0, 0, 0, .7);
}

abbr {
    border-bottom: 1px dotted #ddd;
    cursor:help;
}

.clear {
    clear: both;
}

h1,
h2 {
    font-family: Helvetica, Arial, sans-serif;
}

h1, h1 a, h2 {
    color: #111;
    text-shadow: 1px 1px 2px #555;
    font-size: 1.7em;
}

h1 {
    padding: 2em 0 1em;
}

h2 {
    font-size: 1.5em;
    padding: 1em 0 .5em;
}

nav a {
    display: inline-block;
    margin: 5px 0;
    background: #333;
    padding: .2em .5em;
    
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 3px solid #333;

    font-variant: small-caps;
    letter-spacing: .08em;
}

nav {
    margin: .5em 0 2em;
}

nav a:hover {
    background: #222;
    text-decoration: none;
}

#hresume p {
    line-height: 1.3;
    margin: .5em 1em;
}

.vcalendar {
    line-height: 1.2;
}

a {
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

li,
dt,
dd {
    margin: .5em 2em;
    width: 45em;
}

dt {
    font-weight: bold;
}

dd {
    margin-bottom: 1em;
}

.icon {
    vertical-align: -4px;
}

#portfolio img {
    float: right;
    overflow: hidden;
    
    background: #333;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 2px solid #333;
    
    padding: 5px;
    margin: -.6em -2.5em 1.5em 1em;
}

footer {
    position: relative; /* JS:ää varten */
        
    background: #333;
    padding: 1em 2em;
    margin: 2em 1em 1em;
    font-size: .8em;
    float: left;
 
    width: 34em;
   
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 3px solid #333;
}

.given-name,
.family-name {
    font-size: 1.3em;
    font-weight: bold;
    line-height: 1.5;
}

.dtstart,
.dtend {
    font-weight: bold;
}

.vcard p{
    margin: -.5em 0;
}

.vevent .vcard {
    display: block;
}

.photo {
    position: absolute;
    top: .4em;
    right: .5em;
    
    float: right;
    background: #333;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 2px solid #333;
    
    padding: 5px;
}

:focus {
	background: #222;
/*    background: #000;*/
/*    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 3px solid #000;
*/}

::-moz-selection {background: #222;}
::selection {background: #222;}

/*  Skip-linkit  */

#skip a, #skip a:hover, #skip a:visited {
    position: absolute;
    left: 0;
    top: -500px;
    width:1px; 
    height:1px; 
    overflow:hidden;
}

#skip a:active, #skip a:focus {
    position: static;
    width:auto; 
    height:auto;
}

.intelligentLink {
	position: absolute;
	top: 1em;
	left: 1em;
	display: block;
}