/* 	
RESET & LAYOUT STRUCTURE

The Settings for Portrait size are in the index.html file, head area. 

*/

@font-face {
    font-family: 'Diotima';
    /*
    src: url('/css/fonts/diotimalt-roman-webfont.eot');
    src: url('/css/fonts/diotimalt-roman-webfont.eot?#iefix') format('embedded-opentype'),
    */
    src:  url('/css/fonts/diotimalt-roman-webfont.woff') format('woff'),
         url('/css/fonts/diotimalt-roman-webfont.ttf') format('truetype'),
         url('/css/fonts/diotimalt-roman-webfont.svg#DiotimaLTRoman') format('svg');
    font-weight: normal;
    font-style: normal;
}

.image-crop {
  height:75px;
  width:100px;
  overflow:hidden;
  display: block;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,button,caption,cite,code,dfn,em,input,optgroup,option,select,textarea,th,var{font:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:baseline}sub{vertical-align:baseline}legend{color:#000}

html, body{
	width:100%;
}

#sitelinks {
  position:absolute;
  visibility: hidden;
}

#main{
	width: 680px; /* default setting - to set this you need to change the index.html code - the setting area */
	margin:0 auto;
}

#concentrator{
	width:320px; /* default setting - to set this you need to change the index.html code - the setting area */
	margin:0 auto;
	position:relative;
}

#header{
	width:100%;
	top:0;
	cursor:pointer;
	margin-bottom:20px;
	z-index: 999;
	position:relative;
}

#header h1 {
  background: white;
	opacity: 0.8;
	z-index:600;
}

#site-content{
	position:relative;
	overflow-x:visible;
	margin-top:100px;
}

.head {
  cursor: pointer;
}
#footer {
  position:fixed;
  bottom:0;
  width:100%;
  background: white;
  opacity: 0.8;
  text-align: center;
  margin:0 auto;
  font: sans;
  z-index:600;
}




.ie7 #footer sc-player, .ie8 #footer sc-player {
  position:relative;
}


#animation-cell-container{
	width: 100%;
	position:absolute;
	top:0px;
	overflow:visible;
}

#container{
	width: 100%;
	position:relative;
	overflow:hidden;
}

#container_slide{
	width: 100%;
	position:absolute;
}

.containerOnTop{
	z-index:500;
}

/*PAGES*/

.page{
	width:100%;
	position:absolute;
	top:0px;
	display:none;
}

.visiblePage{
	display:block;
}


.animation_cell{
	height:40px;
	padding-top:20px;
	width:50%;
	float:left;
	position:relative;
	cursor:pointer;
}

.blank_item{
	
}

.animation_cell_pic{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}

.menu_item{
	padding-bottom:10px;
	clear:left;
	position:relative;
	cursor:pointer;
	text-align: right;
}

.right_side{
	text-align:right;
}

.left_side{
	text-align:right;
}

/* MEnu / Animation*/



#portrait{
	position:absolute;
	display:block;
	top:0px;
	cursor:pointer;
}



/*FOOTER*/

#quotes{
	width: 100%;
	margin-top:15px;
	padding-top:20px;
	position:absolute;
	
}

.quote-item{
	font-style:italic;
	position:absolute;
	top:0px;
	width:100%;
	padding-bottom: 50px;
}

.quote-item-author{
	font-style: normal;
	width:100%;
	text-align:right;
	font-size:10px;
	opacity:0.6;
	filter:alpha(opacity=60);
}

/* misc */

.no-display{
	display:none;
}

#main-preloader{
	display:block !important;
	margin:0 auto;
	margin-top:200px;
	position:absolute;
	left:48%;
}

#giga-toggle{
	width:0%;
	height:0%;
	cursor:pointer;
	position:absolute;
	top:0px;
	left:0px;
}

/*
js - no script fallback
*/

.show_content .page{
	position:relative;
	display:block;
	margin-top:100px;
}

.show_content #wpw-wave-form{
	display:none;
}

.show_content #portrait{
	position:relative;
}


/*
	DEBUG CONSOLE
*/

#console{
	font-family: Helvetica, Arial, sans-serif;
	position:absolute;
	left:100px;
	top:0px;
	height:70px;
	z-index:8888;
	color:#666666;
}


/* TYPOGRAPHY, COLORS AND PAGE CONTENT */


/* TEXT COLOR */
/* I like to change the colors ofter, so I put them at the top. */


/* replace this with some LESS */
.row {
  clear:both;
  margin-left:-20px;
    zoom: 1;
    display: table;
    content: "";
    zoom: 1;
    *display: inline;
}

.span100 {
  width: 100px;
  float:left;
  margin:0;
  padding:0;
  margin-left:20px;
}
.span500 {
  width: 480px;
  float:left;
  margin:0;
  padding:0;
  margin-left:20px;
}

html{
	color:#756851;
	background:#ffffff;
}

body {
  overflow-x: hidden;
}

h1, h2, #footer{
	color: #ad9275;
	border-color: #ad9275;
}

h4, h5, strong, .skill, a{
	color:#281612;
	border-color:#281612;
}


.menu_item, .menu_item_border{
	color:#b5a188;
	border-color: #b5a188;
}

.selected_menu_item a, .selected_menu_item a:visited, .selected_menu_item, .selected_menu_item .menu_item_border, .menu_item:hover{
	color:#281612;
	border-color: #281612;
}

#navigation-primary{
	width: 150px;
	position:fixed;
	top:0px;
	text-align: right;
	overflow: hidden;
}


.menu_item a {
  color:#b5a188;
  text-decoration: none;
}

.menu_item a:hover {
  color:#281612;
  text-decoration: none;
}

/* HEADER */

#header{
	font-family: 'Diotima', Georgia, Helvetica, sans-serif;
	position: fixed;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Diotima', Georgia, Helvetica, sans-serif;
}

#header h1{
  padding-top:10px;
  color:black;
	font-size:55px;
	letter-spacing: 8px;
	text-align:center;
	border-bottom:1px solid;
	font-weight:100;
}

#header h2{
	text-align:right;
	font-size:20px;

}

#header h2 span {
	font-style: italic;
}

/* Footer */

footer#header h2 span {
	width:100%;
	position:fixed;
	bottom:0;
}


footer#footer a {
   font-family: 'Diotima', Georgia, Helvetica, sans-serif;
}

/* MENU */

.menu_item{
	font-size:15px;
	font-family: 'Diotima', Georgia, arial, serif;
	
}

.menu_item_border{
	border-bottom:1px solid;
}

.selected_menu_item .menu_item_border{
	border-bottom:1px solid;
}

h3.menu_item{
text-transform: capitalize;
}

/* MENU */

.animation_cell{

	
}

/* PAGE CONTENT */

.page{
	font-family: 'Maven Pro', arial, serif; 
	font-size:14px;	
}

h2{
	font-size:125%;
}

h3{
	font-size:115%;
}

h4{
	font-size:115%;
	margin-bottom:15px;
	border-left:2px solid;
	padding-left:10px;
}

h4{
	font-size:110%;
	margin-bottom:15px;
	border-left:2px solid;
	padding-left:10px;
}

h5{
	font-size:100%;
	margin-bottom:10px;
}

p{
	margin-bottom:15px;
}

hr{
	border:0px;
	outline: 0px;
	border-bottom:1px solid #eeeeee;
	
	padding-top:20px;
	margin-bottom:18px;
}

ul{
	margin-top:10px;
	margin-bottom:10px;
}

li{
	list-style-type:square;
	margin-left:20px;
	display:list-item;
}

br{
	clear:both;
}

strong, .skill{
	font-weight:normal;
	color:#111111;
}


/* WORK HISTORY */

.work-entry{
	margin-bottom:20px;
	padding-bottom:20px;
	position:relative;
	width:100%;
}


.work-duration{
	position:absolute;
	top:0px;
	text-align:right;
	width:100%;
	font-size:80%;
	padding-top:1%;
}

/* FEATURED PROJECTS */

.image-list{
	width:130%;
}

.image-list img{
	padding:0px;
	outline:0px;
	margin:0px;
	
	margin-right:20px;
	margin-bottom:20px;
	display:block;
	float:left;
}

.icon-list img{
	margin-right:12px;
}

.purchase {
  width:150px;
  left:-150px;
  font-size: small;
}

/*FOOTER*/


#quotes{
	font-size:12px;
	font-family: 'Maven Pro', arial, serif;
	border-top:1px solid;
}

.ie7 #quotes, .ie8 #quotes {
font-family: Georgia, serif;
}

ul.social {
    list-style: none;
    margin:0;
    padding:0;
    width:170px;
    position:absolute;
    right:5px;
    bottom: 5px;
}

ul.social li {
    list-style: none;
    display:block;
    float:left;
    margin:0 6px 0 0;
    padding:0;
}

ul.social a {
    cursor: pointer;
    text-indent:-999999px;
    display:block;
    width: 20px;
    height: 20px;
    background-image: url(../images/ui/icons/social-sprite-atlas.png);
    background-repeat: no-repeat;
}


/* @TODO Change -x -y to shorthand  as silly firefox does not recognise */

ul.social a.facebook {
    background-position-x: 0;
    background-position-y: 0;
}

ul.social a.facebook:hover {
    background-position-x: 0;
    background-position-y: -24px;
}

ul.social a.twitter {
    background-position-x: -25px;
    background-position-y: 0;
}

ul.social a.twitter:hover {
    background-position-x: -25px;
    background-position-y: -24px;
}

ul.social a.label {
    width: 86px;
    background-position-x: -48px;
    background-position-y: 0;
}

ul.social a.label:hover {
    background-position-x: -48px;
    background-position-y: -22px;
}

ul.social a.email {
    width: 20px;
    background-position-x: -135px;
    background-position-y: 0;
}

ul.social a.email:hover {
    background-position-x: -135px;
    background-position-y: -24px;
}

ul.social a.buy {
    background-position-x: -87px;
    background-position-y: 0;
}

ul.social a.buy:hover {
    background-position-x: -87px;
    background-position-y: -24px;
}