@charset "UTF-8";
/* CSS Document */
/* all the lovely bits for Flaming Spade Productions */

body:before { /* sexy little top shadow */ content: ""; position: fixed; top: -10px; left: -10px; width: 110%; height: 10px;  -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -ms-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -o-box-shadow: 0px 0px 10px rgba(0,0,0,.8); box-shadow: 0px 0px 10px rgba(0,0,0,.8);  z-index: 100;  }

p, h1, h2, h3, blockquote, ul, li {
	font-family: 'VerbCond Extralight', Helvetica, Arial, Sans-Serif;
	
	}

a {
    outline: none;
}

a:link {
	text-decoration:none;
	color:#999;}
a:visited {
	text-decoration:none;
	color:#999;}
a:hover {
	background-color:#CCC;
	text-decoration:underline;
	color:#000;}
a:active {
	text-decoration:underline;
	color:#333333;}

.light {
	color:#666;
	font-family: 'Fruktur', cursive;
}

.primary {
	font-family: 'Fruktur', cursive;
}

blockquote {
	text-align:left;
}

img {
    border: none;
}
	
img.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }	
	


/* This makes everything nice and centered in the browser */
#wraper { 
	position:relative;
	top:0px;
	left:0px;
	width:1120px;
	height:2700px;
	margin:auto;
	z-index:2;
}

#wrapperliner {
	position:absolute;
	width:inherit;
	height:inherit;
	z-index:2;
}
	
#logo {
	position:absolute;
	top:130px;
	left:300px;
	height:216px;
	width:115px;
	z-index:4;
	background-image:url(/img/fsp.gif);
}

#logo2 {
	position:absolute;
	top:130px;
	left:0px;
	height:379px;
	width:1100px;
	z-index:4;
	background-image:url(/img/fspls.gif);

}

#social-float {
	position:fixed;
	top:675px;
	left:20px;
	height:40px;
	width:50px;
	z-index:10;
}

#mast {
	position:absolute;
	top:0px;
	left:0px;
	width:inherit;
	height:300px;
	text-align:center;
	z-index:2;
}

#mast2 {
	position:absolute;
	top:250px;
	left:400px;
	z-index:5;
}

#grade {
	position:absolute;
	top:250px;
	left:0px;
	width:inherit;
	height:150px;
	z-index:2;
	background-image:url(/img/grade4.gif);
	background-image:repeat-x;
}

#midlo-nav {
	position:absolute;
	top:544px;
	left:150px;
	width:820px;
	height:50px;
	z-index:5;
	border-style:solid;
	border-color:#999999;
    border-width:6px;
	border-radius: 20px 40px 20px 40px;
}

#about-nav {
	position:absolute;
	top:10px;
	left:75px;
	width:107px;
	height:35px;
	z-index:4;
}

#projects-nav {
	position:absolute;
	top:10px;
	left:350px;
	width:139px;
	height:35px;
	z-index:4;
}


#shop-nav {
	position:absolute;
	top:10px;
	left:670px;
	width:93px;
	height:35px;
	z-index:4;
}

#midlo-nav-r {
	position:absolute;
	top:545px;
	left:151px;
	width:820px;
	height:50px;
	z-index:4;
	line-height:10px;
	text-align:center;
	border-style:solid;
	border-color:#000;
    border-width:6px;
	border-radius: 20px 40px 20px 40px;
}

#about {
	position:absolute;
	top:900px;
	left:50px;
	height:450px;
	width:1020px;
	text-align:center;
	z-index:4;
}

#about-spread {
	position:absolute;
	top:105px;
	left:75px;
	height:300px;
	width:875px;
	z-index:5;
}

#projects {
	position:absolute;
	top:1350px;
	left:50px;
	width:1020px;
	height:800px;
	text-align:center;
	z-index:4;
}

#projects-sales {
	position:absolute;
	top:550px;
	left:50px;
	width:1020px;
	height:1200px;
	text-align:center;
	z-index:4;
}

#projects-title {
	position:absolute;
	top:0px;
	left:0px;
	width:1020px;
	height:50px;
	text-align:center;
	z-index:4;
}

#cbti1 {
	position:absolute;
	top:90px;
	left:200px;
	z-index:3;
}

#cbti2 {
	position:absolute;
	top:90px;
	left:500px;
	z-index:3;
}

#projects-detail {
	position:absolute;
	top:400px;
	left:0px;
	width:1020px;
	height:350px;
	text-align:center;
	z-index:4;
}
#projects-spread {
	position:absolute;
	top:350px;
	left:75px;
	height:400px;
	width:875px;
	z-index:5;
}

#buy {
	position:absolute;
	top:2150px;
	left:50px;
	width:1020px;
	height:300px;
	text-align:center;
	z-index:4;
}

#buy-sales {
	position:absolute;
	top:1300px;
	left:50px;
	width:1020px;
	height:375px;
	text-align:center;
	z-index:6;
} 

#buy-google {
	position:absolute;
	top:45px;
	left:20px;
	width:300px;
	height:auto;
}

#buy-paypal {
	position:absolute;
	top:45px;
	left:350px;
	width:300px;
	height:auto;
}

#buy-amazon {
	position:absolute;
	top:45px;
	left:700px;
	width:300px;
	height:auto;
}
#copyright {
	position:absolute;
	top:100%;
	left:50px;
	width:1020px;
	height:60px;
	text-align:center;
	z-index:4;
}

/* drop shadow thing */
#page {
	position:absolute;
	top:880px;
	left:10px;
	height:2000px;
	width:1200px;
	z-index:-1;
}
.box {
  position: relative;
  width: 1000px;
  height: 3000px;
  background-color: #fff;
  box-shadow: 0 1px 5px rgba(0,0,0,0.25), 0 0 50px rgba(0,0,0,0.1) inset;
  border-radius: 15%     15%     15%     15% /     2%     2%     2%     2%;
}
.box:before {
    position: absolute;
    z-index: 1;
    content: "";
    top: 0px;
    right: 0px;
    width: 15%;
    height: 15%;
    border-radius: 0 20% 0 0;
    box-shadow: 10px -10px 10px rgba(0,0,0,0.5);
    -webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
     -moz-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
     -ms-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
     -o-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
     transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
    }
.box:after {
    position: absolute;
    z-index: 1;
    content: "";
    top: 0px;
    left: 0px;
    width: 15%;
    height: 15%;
    border-radius: 20% 0 0 0;
    box-shadow: -10px -10px 10px rgba(0,0,0,0.5);
    -webkit-transform: rotate(2deg) translate(14px,20px) skew(20deg);
     -moz-transform: rotate(2deg) translate(14px,20px) skew(20deg);
     -ms-transform: rotate(2deg) translate(14px,20px) skew(20deg);
     -o-transform: rotate(2deg) translate(14px,20px) skew(20deg);
     transform: rotate(2deg) translate(14px,20px) skew(20deg);
    }
	
/* stroll to top thing */
#message a
{
    /* display: block before hiding */
    display: block;
    display: none;
  
    /* link is above all other elements */
    z-index: 999; 
  
    /* link doesn't hide text behind it */
    opacity: .6;
  
    /* link stays at same place on page */
    position: fixed;
  
    /* link goes at the bottom of the page */
    top: 90%;
    margin-top: -80px; /* = height + preferred bottom margin */
  
    /* link is centered */
    left: 15%;
    margin-left: -160px; /* = half of width */
  
    /* round the corners (to your preference) 
    -moz-border-radius: 24px;
    -webkit-border-radius: 24px;*/
	border-radius: 14px;
  
    /* make it big and easy to see (size, style to preferences) */
    width: 108px;
    height: 108px;
    text-align: center;
	color:#FFFFFF;
}