/* =========== Basic page styles =========== */

body {
  font-family: 'Open Sans', sans-serif;
  background-color: #000;
  color: #000;
}

a:link { color: #000; }
a:visited { color: #333; }
a:hover { color: #666; }
a:active { color: #666; }

h1, h2, h3, h4, h5, h6 { color: #000; }
h1 {  }
h2 { font-size: 1.4em; margin: 0 0 15px 0; }
h3 { font-size: 1em; margin: 0; }
h4 { font-size: 0.9em; margin-bottom: 0.5em; }
h5 { font-size: 0.8em; }
h6 { font-size: 0.8em; color: #666; }


/* ============= Layout =============== */

#wrapper {
  position: relative;
  margin-left: 320px;
  overflow: hidden;
}
.phone #wrapper { margin-left: 200px; }

#content { height: 100px; }
.phone #content { font-size: 0.9em; }

#background {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.page {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  padding: 50px;
}
.phone .page { padding: 20px; }
#loading { position: absolute; top: 47%; left: 48%; }
.phone.portrait #loading { display: none !important; }
.pageContent {
  /* Fallback for web browsers that don't support RGBa */
  background-color: rgb(255,255,255);
  /* RGBa for browsers that support it */
  background-color: rgba(255,255,255,0.8);
  /* For IE 5.5 - 7 */
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ccffffff, endColorstr=#ccffffff);
  /* For IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ccffffff, endColorstr=#ccffffff)"; 
}
.pageContent h2 { padding: 20px; margin: 0; }
.phone .pageContent h2 { font-size: 1em; padding: 5px; }
.pageText { margin-top: -20px; padding: 0 20px; }
.phone .pageText { padding: 0 5px; }
.desktop .pageText, .tablet .pageText { padding: 20px; }
.pageText p { margin-top: 0; }
.pageScrollWrapper { padding-top: 20px; }

#background img { position: absolute; top: 0; left: 0; display: none; }
.phone.portrait #background, .phone.portrait .page { display: none !important; }


/* ========= Various common classes & IDs ========== */

.clearAll { clear: both !important; }
.fine { font-size: 0.8em; color: #666; }


/* ============== Messages ================ */

.notifySuccess, .message.success { color: #3a3 !important; }
.notifyInfo, .message.info { color: #33a !important; }
.notifyWarn, .message.warn { color: #b33 !important; }
.notifyError, .message.error { color: #b33 !important; }


/* =============== Sidebar ============= */

#sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 320px;
  height: 100%;
  background-color: #1c1c1c;
  background: #1c1c1c -webkit-gradient(linear, left top, left bottom, from(#343434), to(#000000));
  background: -moz-linear-gradient(top, #343434 #000000);
  background: -o-linear-gradient(top, #343434, #000000);
  background: -ms-linear-gradient(top, #343434, #000000);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#343434', endColorstr='#000000');
  z-index: 50;
}


#sidebarContent { overflow: hidden; }
#header { text-align: center; }
#header h1 { position: absolute; top: -5000px; }
#header img { width: 320px; }
#sidebarContent { position: absolute; width: 100%; }
#mainNav { list-style: none; padding: 0; }

#mainNav a.nav {
  position: relative;
  display: block;
  width: 90%;
  margin: 5px auto;
  padding: 10px 0;
  text-align: center;
  color: #bbb;
  font-weight: bold;
  text-transform: uppercase;
  
  background-color: #2e2e2e;
  background: #2e2e2e -webkit-gradient(linear, left top, left bottom, from(#2e2e2e), to(#131313));
  background: -moz-linear-gradient(top, #2e2e2e #131313);
  background: -o-linear-gradient(top, #2e2e2e, #131313);
  background: -ms-linear-gradient(top, #2e2e2e, #131313);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2e2e2e', endColorstr='#131313');
  
  border: 1px solid #000;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  
  -moz-box-shadow: inset 0 -2px 6px #000;
  -webkit-box-shadow: inset 0 -2px 6px #000;
  box-shadow: inset 0 -2px 6px #000;
  z-index: 5;
}
#sidebar a.nav:link, #sidebar a.nav:visited { color: #bbb; text-decoration: none; }
#sidebar a.nav:hover, #sidebar a.nav:active, #sidebar li.active a.nav {
  background: #07ace6;
  color: #fff;
  text-decoration: none;
}

#menuToggle { position: absolute; cursor: pointer; z-index: 40; }
.phone.portrait #menuToggle { display: none; }

#contact, #mobileContact, .sidePageContent {
  display: none;
}

/* PHONE STYLES */
.phone #header img { width: 250px; }
.phone.landscape #header img { width: 200px; }
.phone #mobileContact { display: block; }
#phone {
  display: inline-block;
  position: relative;
  top: 2px;
  left: -5px;
  width: 15px;
}
.phone.portrait #sidebar { background: transparent; }
.phone.portrait {
  background-color: #1c1c1c;
  background: #1c1c1c -webkit-gradient(linear, left top, left bottom, from(#343434), to(#000000));
  background: -moz-linear-gradient(top, #343434 #000000);
  background: -o-linear-gradient(top, #343434, #000000);
  background: -ms-linear-gradient(top, #343434, #000000);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#343434', endColorstr='#000000');
}
/* .phone.portrait #wrapper { display: none; } */


/* ==================== Project Select ================== */

#projectSelect { margin-bottom: 25px; font-size: 0.9em; }
#projectTrigger {
  width: 85%;
  display: block;
  position: relative;
  margin: 0 auto;
  border: none;
  line-height: 115%;
  text-decoration: none;
  text-align: left;
  padding: 8px;
  outline: none;
  vertical-align: middle;
  color: #666;
  font-size: 1.2em;
  
  background-color:#eee;
  background: #eee -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#e4e4e4));
  background: -moz-linear-gradient(top, #fefefe, #e4e4e4);
  background: -o-linear-gradient(top, #fefefe, #e4e4e4);
  background: -ms-linear-gradient(top, #fefefe, #e4e4e4);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefefe', endColorstr='#e4e4e4');
  
  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .75);
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .75);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .75);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  cursor: pointer;
  z-index: 5;
}
#projectTrigger .label {
  padding: 0.25em;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
}
#projectTrigger .arrow {
  position: absolute;
  top: 45%;
  right: 10px;
  width: 10px;
}

#projectSelect ul { padding: 0; list-style: none; display: none; }
#projects {
  border: 1px solid #000;
  background-color: #fff;
  width: 90%;
  margin: 0 auto;
  position: relative;
  top: -2px;
}
#projects a {
  display: inline-block;
  padding: 5px 0 5px 10px;
  font-size: 1.2em;
  text-decoration: none;
  width: 93.2%;
}
#projects h3 { width: 104%; }
#projects .projectLinks a { padding-left: 20px; }
#projects a:hover, #projects a:active {
  background-color: #4096ee;
  color: #fff;
}

.phone #projectSelect { margin-bottom: 15px; }
.phone.landscape #projectTrigger { font-size: 1.1em; padding: 4px 8px; }
.phone.portrait.large #projectTrigger { font-size: 1.5em; }
.phone.landscape #projects { font-size: 1em; width: 91.3%; }
.phone.landscape #projects a { width: 92.2%; padding: 5px 0 5px 10px !important; }
.phone.portrait #projects { width: 90%; }
.phone.portrait #projects a { width: 93%; }
.phone.portrait.large #projectTrigger .arrow { width: 25px; }

#externalContent {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000;
  z-index: 10;
}
#externalContent iframe { z-index: 15; position: absolute; top: 0; left: 0; }
#externalContent img { position: absolute; top: 0; left: 0; }


/* =============== Phone specific styles =============== */
.phone #sidebar { width: 200px; font-size: 0.85em; }
.phone #contactLink { display: none; }
.sidePageContent {
  border: 1px solid #000;
  background-color: #fff;
  position: relative;
  top: -10px;
  width: 82%;
  margin: 0 auto;
  z-index: 2;
  color: #444;
  padding: 1% 4%;
}

.phone.portrait li.active a.nav .close { display: inline-block; }
a.nav .close {
  display: none;
  width: 1.3em;
  height: 1.3em;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background-color: #fff;
  color: #333;
  position: absolute;
  top: 0.5em;
  left: 5%;
  padding: 0.2em;
  font-size: 0.8em;
}
a.nav .close.hover { background-color: #000; color: #fff; }
.noContent { font-style: italic; }

/* LARGER FORMAT PHONE STYLES */

.phone.portrait.large #header img { width: 450px; }
.phone.portrait.large #sidebar { font-size: 1.7em; }
.phone.landscape.large #sidebar { font-size: 1.3em; }
.phone.portrait.large #sidebar a.nav { font-size: 2.5em; }
.phone.portrait.large #phone { width: 50px; }
.phone.landscape.large #phone { width: 15px; }
.phone.large #menuToggle { height: 50px; }
.phone.portrait.large #menuToggle { height: 50px; }

.phone.portrait.medium #sidebar a.nav { font-size: 1.5em; }
.phone.portrait.medium #phone { width: 25px; }


/* OTHER DEVICE STYLES */

.tablet #contact, .desktop #contact { display: block; }


/* ============ Slideshow Controls =========== */
#slideControl {
  list-style: none;
  position: absolute;
  bottom: 20px;
  text-align: center;
  width: 100%;
  padding: 0;
  z-index: 5;
}
.phone.portrait #slideControl { display: none; }
.phone #slideControl { bottom: -5px; }
#slideControl li { display: inline; margin-left: -3px; }
.phone.landscape.large .slideNav img { width: 40px; }
.phone.landscape.medium .slideNav img { width: 25px; }

/* ============ Modal Dialog =========== */

.modalTest {
  margin:0px 40px 0px 0px;
  position: absolute;
  /* Fallback for web browsers that don't support RGBa */
  background-color: rgb(0,0,0);
  /* RGBa for browsers that support it */
  background-color: rgba(0,0,0,0.8);
  /* For IE 5.5 - 7 */
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000, endColorstr=#cc000000);
  /* For IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000, endColorstr=#cc000000)"; 
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  
  opacity: 0.8;
}
.modalClose{
	position:absolute;
	right:-15px;
	top:-15px;	
}
.modalTest h2 { color:#FFF;padding: 20px; margin: 0; }
.modalText { 
	color:#FFF;
	margin-top: -20px; 
	padding: 0px 20px; 
}
.sideText{	
	margin-top: 20px; 
	padding: 0px 20px; 

	
}
.modalText a:link { color: #fff; }
.modalText a:visited { color: #fff; }
.modalText a:hover { color: #999; }
.modalText a:active { color: #fff; }


.modal {
  width: 89%;
  height: 90%;
  padding: 20px;
  position: absolute;
  top: 2%;
  left: 1.5%;
  background: -moz-linear-gradient(top, #fff 0%, #ccc 100%);
  background: #ccc -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
  background: -moz-linear-gradient(top, #fff #ccc);
  background: -o-linear-gradient(top, #fff, #ccc);
  background: -ms-linear-gradient(top, #fff, #ccc);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cccccc');
  border: 1px solid #666;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  -moz-box-shadow: 2px 2px 5px #555;
  -webkit-box-shadow: 2px 2px 5px #555;
  box-shadow: 2px 2px 5px #555;
  z-index: 996;
  opacity: 0.9;
}
.modal .modalActions { text-align: center; }
.modalOk { display: none; }
.modalTitle { text-align: center; }
.modalBody { text-align: center; }
.modalContent { margin-top: 45%; }