/*body------------------------------------------------------------------------------------------*/

* {padding: 0; margin: 0;} 

body {
	font: 80%/160% Arial, Helvetica, sans-serif;
	background-image:url(images/gullback.jpg);
	background-repeat:no-repeat;
	background-position:top;
	background-color:#000000;
}

img { border: none; margin:5px;}


/* main site------------------------------------------------------------------------------------*/

#sitemain {
	height: 800px;
	width: 960px;
	margin: 0 auto;
	position: relative;
	color:#000000;
}


 #header {height:150px;
} 

/*side nav-------------------------------------------------------------------------------------*/


nav {
	float: left;
	width: 100px;
	padding: 4px 20px 15px 20px;
	display: inline-block;
}

#sidenav {
	width: 12em;
	color: #333;
	background-position:center;
	background-position:right;
	background-repeat:no-repeat;
	z-index:4;
}

#sidenav li {width: 100px;}

#sidenav a, nav a:visited {	
text-align: right;
text-decoration: none;}

#sidenav a:hover {
	text-decoration: underline;
	color: red;
}

#sidenav li a {
		display: block;
		color: #fff;
		text-decoration: none;
		padding: 10px 10px 10px 0.5em;
		background-position:center; 
		background-repeat: no-repeat;
		color: #fff;
		text-decoration: none;
		width: 100%;
		}
		

/* video nav ---------------------------------------------------------------------------------- */

#vidnav {
	float:left;
	display:inline-block;
	list-style: none;
	font-family: Arial, Helvetica, Sans-Serif;
	color:#FFFFFF;
}

#vidnav li {
	background: none;
	float: left;
	padding: 20px;
	width: 100px;
	height:100px;
	text-align: center;
}

#vidnav a, nav a:visited {
	text-decoration: none;
	color: #ffffff;
}
#vidnav a:hover {
	text-decoration: underline;
	color: red;
}

#vidnav ul, li {list-style-type: none;}

#vidnav li a {
		display: block;
		color: #fff;
		text-decoration: none;
		width: 100%;
		height:100%;
		padding: 5px 5px 5px 0.5em;
		background-position:center; 
		background-repeat: no-repeat;
		color: #fff;
		text-decoration: none;
		width: 100%;
		}

.hiddentext {display:none;}		
		
#nav-kamppi a{
		background-image:url(images/kamppi.png);
		background-repeat: no-repeat;
}

#nav-tentacles a{
background-image: url(images/tenticon.png);
	background-repeat: no-repeat;
}

#nav-awc a{
background-image: url(images/awc.png);
	background-repeat: no-repeat;
}



/* resizes sidenav if text is wider------------------------------------------------------------ */

html>body #sidenav li a {
		width: auto;
		}


/* background images for side nav-------------------------------------------------------------- */


#sidenav-home a{
background-image: url(images/home1.png);
	background-repeat: no-repeat;
}


#sidenav-2d a{
background-image: url(images/2d.png);
	background-repeat: no-repeat;
}


#sidenav-3d a{
background-image: url(images/3d.png);
	background-repeat: no-repeat;
}


#sidenav-video a{
background-image: url(images/video.png);
	background-repeat: no-repeat;
}


#sidenav-blog a{
background-image: url(images/blog.png);
	background-repeat: no-repeat;
}


#sidenav-links a{
background-image: url(images/links.png);
	background-repeat: no-repeat;
}


#sidenav-wip a{
background-image: url(images/wip.png);
	background-repeat: no-repeat;
}


#sidenav-contact a{
background-image: url(images/contact.png);
	background-repeat: no-repeat;
}


#sidenav-downloads a{
background-image: url(images/gullicon.png);
	background-repeat: no-repeat;
}


#sidenav-tutorials a{
background-image: url(images/tuticon.png);
	background-repeat: no-repeat;
}


/* index page------------------------------------------------------------- */


#floatleft {
 float:left;
 margin-right: 3px;
 margin-top: 30px;
 display: inline;

 }

#intromessage {
	float:left;
	color:#FFFFFF;
	font:1em Arial, Helvetica, sans-serif;
	line-height: 130%;
	letter-spacing:1px;
	font-size:13px;
	width:460px;
	display: inline-block ;
}

#intromessage p {
padding:10px 0px 0px 0px;
}

.caps {
color:white;
float:left;
font: Arial, Helvetica, sans-serif;
font-size:4em;
line-height:.8em;
padding:5px 5px 0px 0px;
}



/* video page --------------------------------------------------------------------------*/

#video {
	float:left;
	padding:0 50px 50px 30px;
	color:white;
	font:1em Arial, Helvetica, sans-serif;
	line-height: 160%;
	letter-spacing:1px;
	font-size:14px;
}



/* placing-------------------------------------------------------------------------- */


#mainarea {
	float:left;
	Color:white;
	width: 435px;
}

form.contact fieldset {
	border:2px solid;
	padding:10px;
}
		
form.contact legend {
font-weight:bold;
font-size:small;
padding:5px;
}	

form.contact label.fixedwidth {
display: block;
width: 240px;
float: left;
}

form.contact {
padding: 0;
margin:15px 0 30px 15px;
line-height:150%;
}

form.contact .buttonarea input {
background: black;
color: white;
font-weight: bold;
padding: 5px;
border: 1px solid white;
cursor: pointer;
}

form.contact .buttonarea {
text-align: center;
padding: 4px;
cursor: pointer;
}


/*gallery box-----------------------------------------------------------------------*/

#gallery_wrapper {
    width: 700px;
    margin: 25px auto;
}


#yoxview_picasa a, #yoxview_picasa a:visited {
	text-decoration: underline;
	color: white;
	display:inline;
}

#yoxview_picasa a:hover {
	text-decoration: underline;
	color: blue;
}


/*links page-----------------------------------------------------------------------*/

#links {
	float:left;
	width: 600px;
	position: relative;
	list-style-type: none;
	font-family: Arial, Helvetica, Sans-Serif;
	color: #333;
}

#links li a {
		border: 1px solid #ccc;
		display: block;
		color: #fff;
		text-decoration: none;
		width: 100%;
		padding: 20px 20px 20px 0.5em;
		background-position:center; 
		background-repeat: no-repeat;
		color: #fff;
		text-decoration: none;
		width: 100%;
		-webkit-box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 5px;
		-moz-box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 5px;
		}

#links a:hover {
	text-decoration: underline;
	color: red;
}

#links li {
	padding: 10px;
	width: 600px;
}



/* background images for links-------------------------------------------------------------- */

#links-closov a{
background-image: url(linkimgs/puff.jpg);
	background-repeat: no-repeat;
}

#links-bux a{
background-image: url(linkimgs/bux.jpg);
	background-repeat: no-repeat;
}

#links-matt a{
background-image: url(linkimgs/matt.jpg);
	background-repeat: no-repeat;
}

#links-dunc a{
background-image: url(linkimgs/dunc.jpg);
	background-repeat: no-repeat;
}

/* tutorial page ---------------------------   */


.hiddenclick {
padding:7px;
background-image:url(images/recover.png);
background-repeat:no-repeat;
background-position:left;
} 



/* widget css ----------------------------------  */


.widget-place {
  width: 49%;
}

.widget-placeholder {
  color: #000;
  margin: 1em;
  position:absolute;
  
}


/* widget body --------------------------------- */

.widget {
  margin: 1em;

}

  .widget-header {
    color: #000;
    padding: 0.2em;
    background-color: #ebebeb;
  }

  .widget-editbox {
    color: #000;
    margin: 0.2em;
    padding: 0.2em;
    background-color: yellow;
  }

  .widget-content {
    padding: 0.5em;
  }

 
#widget-body {
	float:left;
	width:750px;
	color:white;
	font:1em Arial, Helvetica, Sans-Serif;
	letter-spacing:1px;
	z-index: 5;
}

.widget-place {
  margin: 0;
  padding: 0;
  float: left;
  width: 33.3%;
  height: auto;
  list-style: none;
  min-height: 400px;
}

.widget-placeholder {
  border: #ffffff dashed 1px;

}

.widget {}

.widget-header {}

.widget-menu {
  }

.widget-menu a {
      margin: 0 0 0 0.5em;
    }

.widget-editbox {}
  
.widget-content {
	height:80px;
	}

.mr_craig_icon {
	float:left;
	margin:2px 5px 0 0;
	border-style:none;
}
  

/* downloads ------------------------------ */

#downloadlinks {
	float:left;
	width: 400px;
	position: relative;
	list-style-type: none;
	font-family: Arial, Helvetica, Sans-Serif;
	color: #333;
}

#downloadlinks li a {
		border: 1px solid #ccc;
		display: block;
		width: 50%;
		padding: 20px 20px 20px 0.5em;
		background-position:center; 
		background-repeat: no-repeat;
		text-decoration: none;
		-webkit-box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 5px;
		-moz-box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 5px;
		}
		
#downloadlinks li p {
		border: 1px solid #ccc;
		display: block;
		color: #fff;
		text-decoration: none;
		width: 50%;
		padding: 20px 20px 20px 0.5em;
		text-decoration: none;
		-webkit-box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 5px;
		-moz-box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 5px;
		}		

#downloadlinks p:hover {
	text-decoration: none;
}

#downloadlinks li {
	padding: 10px;
	width: 600px;
}


#download-gull a{
background-image:url(downloads/gullclick.jpg);
	background-repeat: no-repeat;
}

#download-rss a{
background-image:url(downloads/rssclick.jpg);
	background-repeat: no-repeat;
}


/* footer ----------------------------- */

.clearfloat {
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

footer {
	padding: 50px 0 0 140px;
	width:680px;
	display:block;
}

footer li {
	display:inline;
	outline-style:none;
		}
		
footer p {
	color:#FFFFFF;
	font:1em Arial, Helvetica, sans-serif;
	line-height: 160%;
	letter-spacing:1px;
	font-size:12px;
}

footer a {
	color:#CCC;
	text-decoration: underline;
		}

footer a:hover {
	text-decoration: underline;
	color: red;
}