/*
CSS for Miranda Bohna Design
*/
body {
	font-family: Century Gothic, san-serif;
	background-color: #FFFFF;
	line-height: 100%;
	padding: 15px;
	/* [disabled]background-image: url(_PORTFOLIO/patterns.png); */
	/* [disabled]background-repeat: repeat-x; */
	/* [disabled]position: fixed; */
}

h1 {
font-size: x-large;
}
li {
font-size: small;
}
h2 {
font-size: small;
font-weight: light;
}
p {
font-size: small;
}
a {
font-weight: heavy;
}
a:link {color: #666666
}
a:visited {
color: #666666;
}
a:hover {
text-decoration: none;
color: #a2c7b5;
background-color: none;
}
a:active {
color: black;
background-color: none;
}
a {text-decoration:none;
}
.about-icon{
    background:none;
}

.about-icon:hover{
    background:#gray;
}




/* ===== Primary Styles =================================================== */

body {
  margin: 0;
  font-family: Century Gothic, sans-serif;
  color: #666666;
  font-size: 14px;
  line-height: 23px;
}

a {
  color: #ffffff;
}

header {
	/* [disabled]float: left; */
	/* [disabled]margin-left: 50px; */
	/* [disabled]margin-top: 25px; */
	/* [disabled]width: 142px; */
	position: fixed;
	margin: 0px;
	padding: 0px;
	top: 0px;
	/* [disabled]right: 500px; */
	left: 50px;
}
#container {
	margin: auto;
	width: 750px;
	height: auto;
}


header nav {
  float: left;
  margin-left: 6px;
  margin-top: 39px;
  width: 66px;
}

header nav a {
  color: #666666;
  text-decoration: none;
  display: block;
  float: left;
  width: 100%;
    text-align: right;
    font: 14px/31px "Century Gothic", Arial, sans-serif;
}

header nav a:hover {
	color: #666666;
}

header nav a.active {
	color: #666666;
}
/* nav code I used */
 ul#navigation {
	position: fixed;
	margin: 0px;
	padding: 0px;
	top: 0px;
	right: 10px;
	list-style: none;
	z-index:999999;
	width:auto;
}
ul#navigation li {
	display:inline;
	float:left;
	width:102px;
	background: #ffe58e;
	/* [disabled]padding-left:10px; */
}
ul#navigation li a {
	display: block;
	float:left;
	margin-top: -2px;
	height: 25px;
	width:102px;
}
ul#navigation li a:hover {
	background-color: #e0c95a;
}
/* End inserted code */

article.project {
  float: left;
  width: 29%;
  max-width: 250px;
  height: 33%;
  margin: 10px; 
}

.project img {
  width: 100%;
  min-width: 160px;
  max-width: 300px;
  border-bottom: 1px solid #000000;
  padding-bottom: 12px;
}

article.project a {
  text-decoration: none;
  color: #000000;
}

h2, h3 {
  font-weight: normal;
  font-size: 12px;
  margin-top: 5px;
}

footer {
	/* [disabled]clear: both; */
	/* [disabled]width: 600px; */
}
#ctr {
	width: 350px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}


div[role="main"] {
  min-width: 960px;
}

section#projects {
	width: 960px;
	/* [disabled]float: left; */
	margin-top: 215px;
	
}

#project {
	float: left;
	padding-left: 200px;
}

#project .description {
  width: 480px;
  padding-top: 25px;
  padding-bottom: 25px;
  border-bottom-style: solid;
  border-top: 1px solid #000000;
  border-bottom: 4px solid #000000;
  float: left;
  margin-bottom: 25px;
  line-height: 18px;
  font-size: 12px;
  margin-right: 30px;
}


#project h2.title {
  font-size: 14px;
}

#project h3.category {
  color: #369297;
  font-style: italic;
}

.images {
  width: 900px;
  float: left;
}

.images img {
  margin-bottom: 50px;
}


.title h2 {
  font-weight: bold;
  float: left;
}

.title h3 {
  color: #888;
  font-style: italic;
  float: right;
}

/* =============================================================================
   Media Queries
   ========================================================================== */

 @media only screen and (max-device-width: 480px) {
#container #projects .ctr {
	width: 250px;
	margin-right: auto;
	margin-left: auto;
}

  /* iphone */
  
  html, body {
	/* [disabled]width: 400px; */
  }

  nav {
    display: none;
  }

  #projects {
	clear: both;
	margin-top: 50px !important;
	width: 430px;

  }
  
  #projects .project {
	width: 100% !important;
	margin-bottom: 50px;
	max-width: 480px;
  }

  #projects .project img {
	/* [disabled]max-width: 480px; */
  }

  #project {
	clear: both;
	padding-left: 50px;
	width: 430px;
	margin-top: 50px;
  }

  #project .images img{
    width: 750px !important;
  }

  #project .description {
    font-size: 200%;
    line-height: 200%;
    width: 750px;
  }

  #project .description h3 {
    font-size: 150%;
  }
 }


 @media only screen and (max-device-width: 768px) {
  /* ipad */  
  section#projects {
	/* [disabled]float: left; */
	/* [disabled]width: 557px; */
  }

 }

/* =============================================================================
   Non-Semantic Helper Classes
   ========================================================================== */

.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

/* =============================================================================
   Print Styles
   ========================================================================== */
 
@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}/* the scroll to top effect */
#message a
{
	/* display: block before hiding */
	display: block;
	display: none;
	/* link is above all other elements */
	z-index: 999;
	/* link doesn't hide text behind it */
	opacity: .6;
	/* link stays at same place on page */
	position: fixed;
	/* link goes at the bottom of the page */
	top: 100%;
	margin-top: -80px; /* = height + preferred bottom margin */
	/* link is centered */
	left: 100%;
	margin-left: -160px; /* = half of width */
	/* round the corners (to your preference) */
	-moz-border-radius: 24px;
	-webkit-border-radius: 24px;
	/* make it big and easy to see (size, style to preferences) */
	width: 100px;
	line-height: 20px;
	height: 20px;
	padding: 10px;
	background-color: #000;
	font-size: 14px;
	text-align: center;
	color: #fff;
	text-decoration: none;
}