/* -------------------------------- */
/*      CSS for LAURAJAVIER.COM     */
/* -------------------------------- */

@import url("reset.css");
@import url("960.css");

body, html{ height: 100%; margin: 0;height: auto; min-height: 100%; }
body{
     background: #f8f8f8;
     font-family: Georgia, Times New Roman, serif;
     font-size: 10px;
     color: #3f3621;
     line-height: 18px;
     }

#header{
     background: url('../img/headerLine.png') repeat-x bottom left;
     height: 30px;
     padding-top: 27px;
     margin-bottom: 50px;
}

#logo, #header_nav{
     float: left;
}

#logo a {
     color: #3f3621;
     font-size: 12px;
     letter-spacing: 1px;
     padding-left: 5px;
     text-transform:uppercase;
     }

#logo a:hover{ color: #1693a5; }

#logo:active{
     background-position: 0px -11px;
     height: 76px;}

#header_nav li, #header_nav a{
     color: #bfbfbf;
     display: inline;
     font-family: 'Arvo', arial, sans-serif;
     font-size: 9px;
     font-weight:normal;
     padding-left: 20px;
     letter-spacing: 1px;
     text-transform:uppercase;
}

#header_nav a:hover{
     color: #1693a5;
}

#header_nav li a.current{
	color:#1693a5;
	}

#LLJ_square{
     background: url('../img/LLJ_greySquare.png') no-repeat;
     height: 14px;
     width: 14px;
     float: right;
}

/* minimal button: teal */
button.minimal, input.minimal, button.arrowNav {
  background: #1693a5;
  border: 1px solid #0b5a65;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: inset 0 0 1px 1px #1cbcd3;
  -webkit-box-shadow: inset 0 0 1px 1px #1cbcd3;
  box-shadow: inset 0 0 1px 1px #1cbcd3;
  color: #fff;
  font-family: 'Arvo', Georgia, Times New Roman, serif;
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 1;
  margin-left: -1px;
  padding: 12px 25px 13px 25px;
  text-align: center;
}

input.minimal{width:100%}

button.minimal:hover, input.minimal:hover, button.arrowNav:hover {
  background: #137f8e;
  -moz-box-shadow: inset 0 0 1px 1px #18a3b6;
  -webkit-box-shadow: inset 0 0 1px 1px #18a3b6;
  box-shadow: inset 0 0 1px 1px #18a3b6;
  color: #d8d8d8;
  cursor: pointer;
}

button.minimal:active, input.minimal:active, button.arrowNav:active {
  background: #11707d;
  -moz-box-shadow: inset 0 0 1px 1px #1690a0;
  -webkit-box-shadow: inset 0 0 1px 1px #1690a0;
  box-shadow: inset 0 0 1px 1px #1690a0;
  color: #d2d2d2;
}

button.arrowNav{
     padding: 12px 10px 13px 10px;
}

/* end minimal button: teal */

.mainLeftText{
     width: 640px;
     margin-top: 25px;
     margin-bottom: 100px;
     }

#mainBlurb{
     margin-top: 100px;
}

#footer #nav li a.current{
	color:#1693a5;
	border-bottom: dotted 1px;
	text-decoration:none;
	padding: 5px 5px;
	}

#artHistory_splash{
     background: url('../img/artHistory_splash.png') no-repeat bottom right;
     bottom: 0;
     position: fixed;
     width: 381px;
     height: 487px;
     }

























    

    

.projectMenu h1{
     margin-left: 5px;
     }

.projectMenu li a{
     padding-left: 5px;
     color: #909090;
     font-family: Georgia, Times New Roman, serif;
     font-size: 10px;
     line-height: 18px;
     text-decoration:none;
     width:100%;
     display:block;
     }
     
.projectMenu li a.current{
     color: #1693a5;
}

.projectMenu li a:hover{
     background-color: #ffe86b;
     color: #1693a5;
}

.mapImg {
     margin-bottom: 18px;
     }

.flagImg {
     margin: 0px 6px 0px 4px;
     }

.greyButton a{
     font-family: 'Nobile', Helvetica, arial, sans-serif;
     font-weight:normal;
     color: #fff;
     font-size: 9px;
     letter-spacing: 2px;
     text-transform:uppercase;
     text-decoration:none;
     display:block;
     background:#5b5b5b;
     width: 220px;
     text-align:center;
     padding-bottom:7px;
     padding-top:10px;
     }

#superOctopus{
     background: url('../img/superOctopus.gif') no-repeat;
     width: 614px;
     height: 618px;
     /* position: fixed; */
     margin:0;
     padding: 0;
     display:block;
     float:right;
     }
     
/* #speechBubble{
     background:#ddd;
     padding: 10px;
     margin-left: 60px;
     } */
     
/* Twitter
------------------------------------------ */

#speechBubble {
	position:relative;
	padding:15px 15px 0px 15px;
	margin-top:50px;
	color:#333;
	background:#ddd;
	/* css3 */
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}

#speechBubble p {
     font-family: 'Nobile', Helvetica, arial, sans-serif;
     font-size: 9px;
     color: #909090;
     }

/* creates the triangle */
#speechBubble:after {
	content:"\00a0";
	display:block; /* reduce the damage in FF3.0 */
	position:absolute;
	z-index:-1;
	top:23px;
	left:130px;
	width:0;
	height:0;
	border:10px solid transparent;
	border-left-color:#ddd;
}

     
#snails{
     background: url('../img/snail.png')no-repeat top center;
     width: 462px; height: 462px;
     margin-top: 0px;
     display:block;
     }

.shadow700{
	border: 3px solid #dcdcdc;
     height: 234px; width: 294px;
     margin-bottom: 25px;
     }
     
.shadow519{
     height: 346px; width: 519px;
/*      border: 3px solid #dcdcdc; */
     }

#aboutBox1 a {
     background: url('../img/resume.png') no-repeat left;
     height: 131px; width: 214px;
     border: 3px solid #dcdcdc;
     display: block;
/*
        border-radius: 10px 10px 10px 10px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 0px 30px rgba(0,0,0,0.3);
        -o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 0px 30px rgba(0,0,0,0.3);
        -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 0px 30px rgba(0,0,0,0.3);
        -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 0px 30px rgba(0,0,0,0.3);  */
     }


#aboutBox2 {
     
     height: 137px; width: 220px;
     display: block;
     }

#aboutBox3 {
     background: url('../img/beach.png') no-repeat top right;
     height: 131px; width: 214px;
     border: 3px solid #dcdcdc;
     display: block;
/*
     border-radius: 10px 10px 10px 10px;
     box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
     -o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
     -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
     -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
*/
     }
     
.folioImage{
     width: 214px; /*height: 136px;*/
     height: 136px;
     display: block;
     margin-bottom: 20px;
     border:3px solid #dcdcdc;
}

.folioImage:hover, .folioImage:active{
	border:3px solid #ededed;
     }

.folioImageSpacer{
     height: 153px;
     display: block;
}


/* -------------------- */
/*      TYPOGRAPHY      */
/* -------------------- */

h1{
     font-family: 'Arvo', Georgia, Times New Roman, serif;
     color: #1693a5;
     font-size: 12px;
     font-weight:normal;
     letter-spacing: 1px;
     line-height: 18px;
     margin-bottom: 18px;
     }

h2 {
     font-family: 'Arvo', arial, sans-serif;
     color: #a4a4a4;
     font-size: 9px;
     font-weight:normal;
     letter-spacing: 1px;
     text-transform:uppercase;
     margin-bottom: 20px;
     margin-top:50px;
}

p{
     font-family: Georgia, 'Nobile', Helvetica, arial, sans-serif;
     font-size: 10px;
     line-height: 18px;
     color: #2e2716; /*909090*/
     margin-bottom: 12px;
     }

p.specs{
     font-size: 9px;
     line-height: 18px;
     letter-spacing: 1px;
     text-transform: uppercase;
     color: #909090;
     margin-bottom: 12px;
}

span { color: #1693a5; }

a { text-decoration:none; color: #1693a5; }

p a{
     color: #1693a5;
     text-decoration:none;
     border-bottom: dotted 1px;
     }

p a:hover{
     padding-top: 5px;
     background:#ffe86b;
     border-bottom: none;
     }
     
label{
	color: #2e2716;
     font-size: 10px;
     line-height: 18px;
     margin-bottom: 12px;
     }


/* ---------------- */
/*      FOOTER      */
/* ---------------- */

#footer{
     background-color:#fff;
     border-bottom:3px solid #ccc;
     border-top: 1px solid #ccc;
     bottom:0;
     left:0;
     opacity:0.8;
     position:fixed;
     width:100%;
     height: 50px;
     z-index:1000;}

#footer #nav ul{
     margin-top: 18px;
     float:left;
     }

#footer #nav li{
	display:inline;
	color: #1693a5;
	font-family: 'Nobile', Helvetica, arial, sans-serif;
	text-transform:uppercase;
	font-size:10px;
	letter-spacing:1px;
	margin-right: 30px;
	}

#footer #nav li a{
	color:#a6a6a6;
	text-decoration:none;
	padding: 5px 5px;
	}
	
#footer #nav li a.current{
	color:#1693a5;
	border-bottom: dotted 1px;
	text-decoration:none;
	padding: 5px 5px;
	}

#footer #nav li a:hover{
     color:#737373;
     background-color: #ffe86b;
     }
	
#footer img{
     float:right;
     right: 0;
     margin-top: 22px;}
     

/* ---------------------- */
/*      SOCIAL MEDIA      */
/* ---------------------- */

ul#networks {
	list-style-image:none;
	margin:0px;
	border-radius: 10px 10px 10px 10px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
	-o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
	-moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
     }

ul#networks a{
     text-decoration:none;
     color:#909090;
     }

ul#networks li {
	background: url('../img/socialNetbg.png') repeat-x;
	font-family:'Nobile', Helvetica, arial, sans-serif;
	font-size:9px;
	width:215px;
	height:22px;
	margin:0px;
	padding:2px 2px;
	border-top:1px solid #eee;
	border-right:1px solid #eee;
	border-left:1px solid #eee;	
     }

ul#networks li:hover {
     text-decoration:none;
	background:#ffe86b;
	border-top:1px solid #ffe86b;
	border-right:1px solid #ffe86b;
	border-left:1px solid #ffe86b;
     }

ul#networks li a:link, ul#networks li a:active, ul#networks li a:visited {
	text-decoration:none;
	color:#909090;
     }

ul#networks li a:hover {
	text-decoration:none;
	color:#1693a5;
     }

ul#networks li.first {
	-moz-border-radius-topleft:10px;
	-webkit-border-top-left-radius:10px;
	-moz-border-radius-topright:10px;
	-webkit-border-top-right-radius:10px;
	margin-top: 2px;
	border-top:1px solid #eee;
	border-right:1px solid #eee;
	border-left:1px solid #eee;
     }

ul#networks li.last {
	-moz-border-radius-bottomleft:10px;
	-webkit-border-bottom-left-radius:10px;
	-moz-border-radius-bottomright:10px;
	-webkit-border-bottom-right-radius:10px;
	margin-bottom: 2px;
	border-bottom:1px solid #eee;
     }

ul#networks li div.icon {
	width:16px;
	height:16px;
	float:left;
	display:inline;
	margin-left: 15px;
	margin-top: 3px;
     }

ul#networks li div.network {
	width:220px;
	height:11px;
	float:left;
	margin-left:40px;
	margin-top: -15px;
	display:inline;
     }

/* ---------------------- */
/*      CONTACT FORM      */
/* ---------------------- */

form {
	border: none;
	font-size: 12px;
	color: #e86a00;
     }

fieldset {
	border: none;
     margin: 0px;
	padding: 0px;
     }
     
.notification_error {
	border: 1px dotted #1693a5;
	height: auto;
	width: 280px;
	padding: 4px;
	background: #fff;
	text-align: left;
	font-family: 'Nobile', Helvetica, arial, serif;
	font-size: 12px;
	color: #1693a5;
     }

.notification_ok {
	border: 1px dotted #1693a5;
	height: auto;
	width: 280px;
	padding: 8px;
	background: #f5f9fd;
	text-align: center;
	font-family: 'Nobile', Helvetica, arial, serif;
	font-size: 12px;
	color: #1693a5;
     }
     
input, textarea{
     border: 1px dotted #1693a5;
     color: #1693a5;
     font-family: 'Nobile', Helvetica, arial, serif;
     font-size: 10px;
     line-height:16px;
     float: left;
     background:#dadada;
     }

input:hover, textarea:hover {
     background:#c9c9c9;
     }

input {
     padding: 10px;
	width: 260px;
	margin-bottom: 20px;
     }

textarea {
     padding: 10px;
	width: 260px;
	height: 150px;
	margin-bottom: 20px;
     }

.contact-button {
	background:#1693a5;
	color: #4f2400;
	border:none;
	font-family: 'Nobile', Helvetica, arial, sans-serif;
	font-weight:normal;
	color: #fff;
	font-size: 9px;
	letter-spacing: 2px;
	text-transform:uppercase;
	margin: 0px;
	padding: 5px 0px;
	width: 100%;
     }

.contact-button:hover {
     background:#1693a5;
	cursor: pointer;
     }