* {margin : 0; padding :0;}
a img {border : none;}
a {text-decoration : none;color : #731012;border-bottom : 1px dotted #731012; padding : 0 0 1px 0;}
a:hover {border-bottom-style : solid}
ul {list-style : none;margin : 0 0 0 65px;padding : 0 0 0 15px;}

html,body {height:100%}
html {background : #731012;}
body {
  height : 100%; 
  font: 62.5%/1.8 Verdana, Arial, sans-serif;
  margin: 0 auto;
  color : #222;
  display : table;
  position : relative;
  width : 100%;
}

body.last {background : #731012 url(../images/simplicityMatters1.png) 50% 50% no-repeat;;}

acronym {font-style : italic;}
acronym:hover {cursor: help} 

p {font-size : 1em; width : 60%;margin : 10px 0 0 65px;text-align : justify}
p img {
  display : block;
  float : left;
  margin : 0 20px 10px 0;
  padding : 0;
  border : none; 
}

p.clear {clear : both;}

h1 {margin : 0 0 0 65px;}	
.scrollLink {margin : 0 0 10px 65px;display : block; overflow : hidden;padding : 5px 0 0 0;outline: none;border: none;}
.scrollLink:hover {border : none;}

#wrapper {display : table-cell;vertical-align : middle;}

#mC {
  width : 960px; 
  height : 550px;
  background : url(../images/simplicityMatters.png) 0 98% no-repeat;
  padding : 20px 0 0 15px;
  position : relative;
  margin : 0 auto;
}

#mC img.slogan {
  position : absolute;
  top : 0;
  right : 0;
}	

#borderContainer {
  background : #5B0101;
  overflow : hidden;
  margin : 0 auto;
}

#mainContainer {
  margin : 10px auto;
  height : 530px;
  width : 940px;
  background : #fff;
  position : relative;
  overflow: auto;
}

body.js #mainContainer {overflow: hidden}

#contentContainer .content {
  float : left;
  width : 960px;
  height : 550px;
  overflow : hidden;
  position : relative;
  z-index : 10;  
}	

.ajaxLoader {
  height : 100px;
  width : 100px;
  background : #fff url(../images/loading.gif) 50% 50% no-repeat;;
  border : 3px solid #222323;
  position : absolute;
  z-index : 23124234;
  top : 225px;
  left: 430px;
  display : none;
}

ul#mainMenu {
  position : absolute;
  overflow : hidden;
  z-index : 1000;
  top: 0px;
  left : 0px;
  font-family : Verdana, Arial, Tahoma, sans-serif;
}

body.js ul#mainMenu {display : none;}

ul#mainMenu li {float : left; margin : 0 1px;}
ul#mainMenu li a {color : #fff;padding : 5px 10px;text-transform : uppercase;border : none;}
ul#mainMenu li a:hover {background : #5B0101;outline: none;}
ul#mainMenu li a.active {color : #5B0101;outline: none;background : #fff;}


img.bg {margin : 0; position : absolute;right : 15px;bottom : 0;}

div.transparentDiv {
  position : absolute;
  top : 0;
  left : 0;
  z-index : 10;
  background : transparent url(../images/transparent.png);
  border : none;
  width : 100%;
  height : 100%;
}

img.bigImage {
  position : absolute;
  border : 5px solid #fff;
  z-index : 1000;
  top : 70px;
  left : 270px;
}

ul.experience {list-style : square;}
ul.experience li {margin : 3px 0 3px 0;}

img.bigImage:hover {cursor : pointer;}

ul.skills {list-style:none;font-family : Georgia;padding : 0 0 0 20px;width : 565px;border-left : 5px solid #731012;margin : 10px 0 0 65px;}
ul.skills li {display: inline;;margin : 0 15px 0 0;font-size : 1.2em;border : 3px solid #fff;}
p.tooltip {position : absolute;top:0;left:0;color : #fff;background : #222; z-index : 100;padding : 5px 10px;display : inline;}
ul.skills li.good {font-size : 1em;font-style:italic;}
ul.skills li.v-good {font-size : 1.4em;}
ul.skills li.vv-good {font-size : 1.8em;}
ul.skills li.vvv-good {font-size : 2em;font-weight : bold;text-transform : uppercase;}
ul.skills li.active {border : 3px solid #731012;cursor : help;color : #731012;}


ul.contactDetails {margin : 15px 0 15px 65px;padding : 10px 0 0 20px;border-left : 2px solid #731012}

ul.externalServices {margin : 20px 0 0 35px;}
ul.externalServices li {float : left;margin : 0 15px;}

.resume {float : left;border : 1px dashed #731012;width : 390px;margin : 10px 0;text-align : center;padding : 5px 0;font-style : italic}
.final {padding : 60px 0 20px 0;}
.thanks {text-align : right}
.thanks span {border-top : 1px solid #731012;padding : 5px 10px;margin : 10px 0 0 ;}

p.skillDetails {text-transform : uppercase;letter-spacing : 0.1em;font-style : italic;color : #a0a0a0;}
p.skillDetails.details {color : #731012;font-style : normal; font-weight : bold;letter-spacing: 0;text-transform : none;}


/* accordion */

#portfolioList  {
	width: 560px;
	border: 1px solid #c9c9c9;
	margin : 0 0 0 65px;
	padding : 1px 1px 0 1px;
}

#porfolioList div {padding :0;margin :0;}

#portfolioList h3 {
  background : #731012;
	display:block;
	padding:2px 10px 2px 10px;
	margin: 0 0 1px 0;
	position : relative;
  text-transform : uppercase;
  color : #fff;
	font-size : 1em;
}

#portfolioList h3 span {
  position : absolute;
  right : 10px;
top : 3px;
  color : #731012;
  font-size : 0.9em;
}

body.js #portfolioList h3:hover {cursor: pointer;}
	
body.js #portfolioList h3:hover span{
color : #fff;
cursor:pointer;
font-weight : normal;
font-style : italic;

}
body.js  #portfolioList h3.selected {
	font-weight : bold;
font-style : italic;
	background-color: #2E2E2E;
}

body.js #portfolioList h3.selected span {color : #2E2E2E;}

body.js #portfolioList h3.selected:hover {cursor : auto;}


#portfolioList ul {padding : 20px 0 15px 20px;margin:0;overflow : hidden;}
#portfolioList ul li {float : left;margin : 0 20px 15px 0;}
#portfolioList ul li a {padding : 5px 5px 0 5px;border : 5px solid #ddd;background : none;display : block;}
#portfolioList ul li a:hover {border : 5px solid #731012}
#portfolioList ul li a img {width : 30px;height : 30px;border : 1px solid #c9c9c9;;}
#portfolioList ul li a:hover img {border-color : #731012}