/*===================
Imports
=====================*/

@font-face {
    font-family: 'BubblegumSansRegular';
    src: url('font/BubblegumSans-Regular-webfont.eot');
    src: url('font/BubblegumSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/BubblegumSans-Regular-webfont.woff') format('woff'),
         url('font/BubblegumSans-Regular-webfont.ttf') format('truetype'),
         url('font/BubblegumSans-Regular-webfont.svg#BubblegumSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ContraRegular';
    src: url('font/contra-webfont.eot');
    src: url('font/contra-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/contra-webfont.woff') format('woff'),
         url('font/contra-webfont.ttf') format('truetype'),
         url('font/contra-webfont.svg#ContraRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ContraItalic';
    src: url('font/contra-italic-webfont.eot');
    src: url('font/contra-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/contra-italic-webfont.woff') format('woff'),
         url('font/contra-italic-webfont.ttf') format('truetype'),
         url('font/contra-italic-webfont.svg#ContraItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}


/*===================
Native Elements
=====================*/

header,nav,article,footer,section,aside,figure,figcaption{display:block}
body { 
	background-image:url(../img/mainbg.png);
	background-attachment:fixed;
	padding:0;
	margin:0;
	font-family: 'ContraRegular', Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
	font-family:'BubblegumSansRegular', Arial, sans-serif;
	padding:10px;
}

a {text-decoration:none;}

nav {
	width:100%;
	text-align:center;
	font-size:2em;
	color:#FFF;	
	padding: 5px 0 5px 0;
	z-index:500;
	background-color:#601848; 
	opacity:.9;
	filter:alpha(opacity=9);	}

nav a {
	padding:0 20px 0 20px;
	color:#FFF;
	line-height:1.5;
	}
nav a:visited {
		color:#FFF;}
nav a:hover {
	color:#FFF;
	/*text-decoration:underline;*/
	
	background-image:url(../img/underline.png);
	background-repeat: repeat-x;
	background-position:0% 100%;
}
/*===================
ID's
=====================*/
#title {padding:0 0 0 10px;}
#title h2 {font-size:3.3em; margin-bottom:-3%; padding:0 0 10px 0;}
#title p {font-family: 'ContraItalic', sans-serif; padding:0; font-size:1.2em;}

#content {padding-bottom:50px; width:100%; background-color:#FFF; font-size:15px; width:100%}
#content a {color:#7F4F74; outline: 0;}
#content a:focus {text-decoration:underline;}
#content a:hover {color:#C96635}

#backtotop {font-size:12px; padding-top:20px;}
#text{padding:0;}
#text h3 {font-size:2.2em; position:relative; left:-20px; padding: 15px 0 0 0; margin:0;}
#left-side {}
#right-side {text-align:left;}

#externalink { padding-left:20px; position:relative;}
#quotelink {list-style-image: url('../img/quoteicon.png');}
#deviantart{list-style-image: url('../img/devicon.png');}
#linkedin{list-style-image: url('../img/linkedin.png');}

#footer {
	clear: both;
	text-align:center;
	padding:50px 0 0 0;
	margin: 0;
	width: 100%;
	display: block;
}
/*===================
Classes
=====================*/
.more p{margin:auto;}
.more  p{
	background-image:url(../img/morehover.png);
	background-repeat:no-repeat;}
.more p, .more p:link, .more p:visited {
  width: 79px;
  height: 85px; }
.more:hover img{visibility:hidden;}

.ss-q-title {font-weight:bold;}
.ss-q-help, .ss-secondary-text {font-style:italic;}
.ss-q-short, .ss-q-other, .ss-q-long {
	margin:0 0 20px 0;
	width: 60%;
	border: 3px solid #ece3e9;
	padding:5px;
	background-color:#ece3e9;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;}
.ss-q-short:hover, .ss-q-other:hover, .ss-q-long:hover{background-color:#f5ccb7; border: 3px solid #f5ccb7;}
.ss-q-short, .ss-q-other {height:20px;}
.elink {position:relative; left: 10px; top:-40px;}

#externalinks img:hover{
  -webkit-animation-duration: 0.6s;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: both;
  -webkit-animation-name: swing;
  -moz-animation-duration: 0.6s;
  -moz-animation-timing-function: ease;
  -moz-animation-fill-mode: both;
  -moz-animation-name: swing;
  animation-duration: 0.6s;
  animation-timing-function: ease;
  animation-fill-mode: both;
  animation-name: swing;
}

#backtotop img:hover{
  -webkit-animation-duration: 0.70s;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: both;
  -webkit-animation-name: bounce;
  -moz-animation-duration: 0.70s;
  -moz-animation-timing-function: ease;
  -moz-animation-fill-mode: both;
  -moz-animation-name: bounce;
  animation-duration: 0.70s;
  animation-timing-function: ease;
  animation-fill-mode: both;
  animation-name: bounce;
}

/*http://designshack.net/articles/css/joshuajohnson-2/ */
.tilt {
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.tilt:hover {
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	-o-transform: rotate(-5deg);
	-ms-transform: rotate(-5deg);
	transform: rotate(-5deg);
	
}
.fancybox-custom .fancybox-skin {
	box-shadow: 0 0 50px #222;}
.bold-link{font-weight:bold; font-size:25px; text-decoration:underline;}
.emphasis{font-weight:bold; font-size:20px;}
.active {
	font-size:1.5em;
	color:#FFF;
	font-family:'BubblegumSansRegular', Arial, sans-serif;
	padding-bottom:5px;}

.active:hover {
	background-image:url(../img/underline.png);
	background-repeat: repeat-x;
	background-position:0% 80%;
		}
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */