/*GLOBAL STYLE RESET*/
html, body { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p, blockquote, 
pre, a, abbr, acronym, address, cite, 
code, img, small, strike, strong, em, sub, 
sup, tt, dd, dl, dt, li, ol, ul, fieldset, 
form, label, legend, button, table, caption, 
tbody, tfoot, thead, tr, th, td { 
  margin: 0; padding: 0; border: 0; 
  font-weight: normal; font-style: normal; 
  font-size: 100%; line-height: 1; 
  font-family: inherit; text-align: left;
}
table { border-collapse: collapse; border-spacing: 0; }
ol, ul { list-style: none; }
button, input, select, textarea { padding: 0; border: 0; outline: 0; }
a { text-decoration: none; }

/*Default Body Settings */
body {
  margin: 0;
  font-family: 'Droid Sans', Helvetica, Arial, sans-serif;
  background-color: #F0F0F0;
  color: #2960A3; /*font color*/
  border-top: 7px solid #2960A3;
}

/*overall container settings*/
.container {
  margin: 0 auto;
  width: 820px;
}

.clear  { clear: both; }


/*Header Settings (both left and right sections)*/
.header_left{
  font-family: 'Raleway', Helvetica, Arial, sans-serif;
  height:101px;
  width:410px;
  float:left;
}
.header_right{
  height:101px;
  width:410px;
  float:right;
}
.header_left h1{
  margin-top: 25px;
  font-size: 46px; 
  line-height: 40px;
} 
.header_left h2{
  padding-left: 5px;
  font-size: 13px; 
  line-height: 9px;
  color:#87afe1;
} 

/*top right navigation area (icons) settings*/
.nav li{
  position:relative;
  padding:25px 0px 0px 5px;
  float:right;
}
.nav li .transition-icon{
  height: 50px; width: 50px; /*make the icon description same size as icon*/
  opacity: 0; /*make the icon description initially invisible*/
  background: rgba(110,150,200,0.6);  /*create background of icon description slightly transparent so you can still see screenshot */

  -moz-border-radius: 3px; /*mozilla rounded corners*/
  -webkit-border-radius: 3px; /*safari and chrome rounded corners*/
  -o-border-radius: 3px; /*opera rounded corners*/
  -ms-border-radius: 3px; /*MSFT ie rounded corners */
  -khtml-border-radius: 3px; /*Konqueror rounded corners */
  border-radius: 3px;

  /*ease in transition effect over 0.25s*/
  -webkit-transition: opacity 0.25s ease-in;
  -moz-transition: opacity 0.25s ease-in;
  -o-transition: opacity 0.25s ease-in;
  transition: opacity 0.25s ease-in;
}
.nav li:hover .transition-icon { 
  opacity: 1; /*make the icon description fully visible*/
}
.nav li .transition-icon { 
  position: absolute; top: 25px; left: 5px; 
}


/* middle project area settings */

/*shared image settings*/
.projects img, .project-image img{
  -moz-border-radius: 3px; /*mozilla rounded corners*/
  -webkit-border-radius: 3px; /*safari and chrome rounded corners*/
  -o-border-radius: 3px; /*opera rounded corners*/
  -ms-border-radius: 3px; /*MSFT ie rounded corners */
  -khtml-border-radius: 3px; /*Konqueror rounded corners */
  border-radius: 3px;
  -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
  -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
  -o-box-shadow: 0 2px 5px rgba(0,0,0,.2);
  box-shadow: 0 2px 5px rgba(0,0,0,.2);
}

.projects img { 
  height: 300px; width: 400px; 
  border: 2px solid #A9A9A9; 
}

.projects li{
  float: left; 
  position: relative;
}

.projects li:nth-child(even) { padding: 0px 0px 8px 7px; }
.projects li:nth-child(odd) { padding: 0px 5px 8px 0px; }

.projects li .transition-project{
  height: 300px; width: 400px; /*make the project description same size as screenshot*/
  opacity: 0; /*make the project description initially invisible*/
  background: rgba(255,255,255,0.85);  /*create background of project description slightly transparent so you can still see screenshot */
  font-size: 20px; color:  #2960A3; /*settings for font size and color for project description */
   
  /*ease in transition effect over 0.3s*/
  -webkit-transition: opacity 0.3s ease-in;
  -moz-transition: opacity 0.3s ease-in;
  -o-transition: opacity 0.3s ease-in;
  transition: opacity 0.3s ease-in;
}
.projects li:hover .transition-project { 
  opacity: 1; /*make the project description fully visible*/
}

.projects li:nth-child(odd) .transition-project {
	position: absolute; top: 2px; left: 2px; 
}

.projects li:nth-child(even) .transition-project { 
  position: absolute; top: 2px; left: 9px; 
}

.projects .transition-project h1 { 
  text-align: center; 
  padding-top: 130px;
}

/*project description settings (for subpages only)*/

.project-container{
  margin-bottom: 20px;
}
.project-image{
  width:640px;
  float:left;
}
.project-description{
  width:160px;
  float:right;
}
.project-description p{
  padding-bottom: 1em;
  line-height: 1.1em;
}
.project-description a{
  color:#238E23
}
.project-description li{
  line-height: 1.3em;
}

/* footer */
footer { 
  height: 23px; 
  margin-top: 1px; 
  padding: 20px 0px 10px 0px;
  border-top: 2px solid #2960A3; 
  background: #a4a4a4;

} 

footer p{
  text-align: right; 
  font-size: 11px; 
  color:#d6e4f5;
}