/********************************************
   WEBSITE:     http://www.katiemerris.com/
   DATE:        Jan-25th-2010
 *******************************************/ 
 
/********************************************
   HTML ELEMENTS
********************************************/ 
 
* { margin: 0; padding: 0px; }

html, body { 
margin: 0;
padding: 0px;
background: #040510 url(/images/bg.jpg) no-repeat top center;
} 

a:active, a:focus {outline: 0;}

h1 {font: 20px Georgia, 'Times New Roman', Serif; color: white; text-transform: uppercase; font-weight: lighter; margin-bottom: 10px}


/* --------------BACK TO TOP-----------*/
#toTop {  
width:170px;
height: 52px;   
background: url(/images/backtotop.png) no-repeat;    
position:fixed; /* this is the magic */  
bottom:100px; /* together with this to put the div at the bottom*/  
right:0px;  
cursor:pointer;   
}  

/* ----------Centered Container Or the Layout--------------------- */
#container { 
min-height: 100%; 
height: auto !important; 
height: 100%; 
margin: 0 auto -4em; /* make sure this matches in the body footer DIV */
width: 960px;
} 

/* --------------PAPER CRANE------------- */
#crane { background: url(/images/papercrane.png) no-repeat; width: 407px; height: 183px; position: absolute; margin-left: 212px; }


/* --------------HEADER------------- */
#header { color: white; height: 156px;}


/* --------------LOGO IN HEADER *always use this*------------- */
.logolink, #swap {
background-image: url('/images/logo.png');
background-repeat: no-repeat;
height: 156px;
width: 212px;
float: left
}
 
.logolink a { float: left;  }
 
.rollover { display: block; } /* Allow setting widths and heights */
.rollover img { width: 100%; height: 100%; border: 0; } /* only set width and height once */
.rollover:hover { visibility: visible; /* for IE */ } /* sets any property for the :hover state */
.rollover:hover img { visibility: hidden; } /* 'rolls over' the image */


/* ---------------------NAVBAR ----------------------------- */
#nav  ul#navigation { display: block; width: 300px; height: 18px; float: right; margin-top: 70px;}

#nav  ul#navigation li {float: left; margin-right: 30px; list-style-type: none;}
#nav  ul#navigation li.last {margin-right: 0px;}
#nav  ul#navigation li a, li.last a { display: block; height: 30px;}


/* NAVIGATION MENU --- ABOUT 
#nav  ul#navigation li a#about-nav:link, #nav  ul#navigation li a#about-nav:visited {
width: 70px;
background: url(images/nav_off.png) 0px 0px no-repeat;
text-indent: -9999px;
}

#nav  ul#navigation li a#about-nav:hover, #nav  ul#navigation li a#about-nav:active {
background: url(images/nav_on.png) 0px 0px no-repeat;
}

/* NAVIGATION MENU --- PORTFOLIO 
#nav  ul#navigation li a#port-nav:link, #nav  ul#navigation li a#port-nav:visited {
width: 100px;
background: url(images/nav_off.png) -104px 0px no-repeat;
text-indent: -9999px;
}

#nav  ul#navigation li a#port-nav:hover, #nav  ul#navigation li a#port-nav:active {
background: url(images/nav_on.png) -104px 0px no-repeat;
}
	
/* NAVIGATION MENU --- CONTACT 
#nav  ul#navigation li a#contact-nav:link, #nav  ul#navigation li a#contact-nav:visited {
width: 70px;
background: url(images/nav_off.png) -230px 0px no-repeat;
text-indent: -9999px;
}

#nav  ul#navigation li a#contact-nav:hover, #nav  ul#navigation li a#contact-nav:active {
background: url(images/nav_on.png) -230px 0px no-repeat;
}

*/

a.scrollover {
/* Default Colour/Styles here */
   color: #b7daf5;
   }
   a.scrollover em:first-line {
      /* Rollover Colour/Styles here */
      color: #ee0133;
   }

/* --------------MISSION------------- */
#mission {
background: url(/images/alphabg.png) repeat;
border-top: 1px solid #4d5563;
border-bottom: 1px solid #4d5563;
margin-bottom: 32px;
padding: 26px 0px 26px 21px
}

#mission p { background-image: url('/images/mission.png');
background-repeat: no-repeat;
height: 178px;
width: 919px;
}

/* --------------MAIN CONTENT, LEFT NAVIGATION----------------*/
#main { min-height: 100%; height: auto !important; height: 100%; }


/* --------------SKILL SET----------------*/
#main .skillset {
padding: 0px;
margin: 0px;
margin-left: 706px;
margin-right: 0px;
height: auto;
color: white;
}

#main .skillset p { background: url(/images/skillset.png) no-repeat; height: 298px; width: 235px;}


/* --------------ABOUT ME----------------*/
#main .aboutme { float:left; width: 604px; margin: 0px; padding-left: 21px;}
#main .aboutme p { color: #a9adb1; font: 12px 'Helvetica Neue',Helvetica, Arial, Sans-Serif; color: #a9adb1; margin-bottom: 16px; line-height: 16px; }
#main .aboutme img { float:  left; padding-right: 14px }


/* --------------PORTFOLIO----------------*/
#portfolio { padding: 10px; margin-bottom: 8px; padding-left: 21px }
#portfolio a img {border: 1px solid #393e48}
#portfolio a { text-decoration: none}
#portfolio img { margin: 0px 8px 8px 0px;}


/* --------------FOOTER------------- */

.clear { clear: both;}

#footer, .push { 
clear: both;
width: 960px;
height: 4em; /* make sure this matches in the body container DIV */
bottom: 0;
left: 0;
margin: 0 auto; 
position: relative;
} 

#footer {
background: url(/images/alphabg.png) repeat;
border-top: 1px solid #4d5563;
border-bottom: 1px solid #4d5563;
height: 204px;
height: auto;
margin-bottom: 150px
}


#footer .content { 
width: 960px; 
margin: 0 auto; 
background: url(/images/footerbg.png) no-repeat top center;
height: 304px;
}

/* --------------FOOTER LEFT------------- */
#footer .left { float: left; width: 324px; height: 181px; margin-top: 58px; margin-left: 20px}

.images { height: 181px;}
.images a { float: left; }

#contactswap {background: url(/images/contact_on.png) no-repeat;  width: 324px;  height: 181px; }


/* --------------FOOTER RIGHT------------- */
#footer .right { float: right; width: 322px; border-left: 1px solid #4d5563; margin-top: 10px}

#footer .flickr, .head, .viewmore {margin-left: 40px}
#footer .head { background: url(/images/flickrhead.gif) no-repeat; width: 75px; height: 21px; margin-bottom: 12px;}

#footer .flickr { padding: 0px; text-indent: -9999px }
#footer .flickr img { margin-right: 11px; margin-bottom: 11px; float: left; border: #2f3435 4px solid;}
#footer .flickr a:hover img { border: white 4px solid}
#footer .flickr li { list-style-type: none}

.viewmore { height: 52px; }
.viewmore a { float: left; }

#button {background: url(/images/viewmore_on.png) no-repeat;  width: 270px;  height: 52px; border: 0px }


/* --------------COPYRIGHT INFO------------- */
#copyright { float: right; width: 300px; height: 20px; margin-top: 24px }
#copyright p {text-align: right; color: #7d8086; font: 11px 'Helvetica Neue Light',Helvetica, Arial, Sans-Serif; line-height: 16px}
#copyright a {color: #ee0133}