/* Main CSS file for DIY-Portfolio */
/* A good resource to check out is CSS-Tricks.com if you have any questions about anything CSS related.
   Also, just Googling the CSS property will bring back results on how to use it, for example if you google 'CSS margin',
   a whole list of sites will pop up that tell you how to use the margin property.
*/

/* Available fonts:

font-family: 'IM Fell DW Pica SC', serif;
font-family: 'Snippet', sans-serif;
font-family: 'Arbutus Slab', serif;
font-family: 'Arvo', serif;
font-family: 'Lora', serif;
font-family: 'Combo', cursive;
font-family: 'Emblema One', cursive;
font-family: 'Carrois Gothic', sans-serif;
font-family: 'Esteban', serif;
font-family: 'Open Sans', sans-serif;
font-family: 'Archivo Black', sans-serif;
font-family: 'Autour One', cursive;
font-family: 'Montaga', serif;
font-family: 'Raleway Dots', cursive;
font-family: 'Jacques Francois', serif;
font-family: 'Cedarville Cursive', cursive;
font-family: 'IM Fell English', serif;
font-family: 'Megrim', cursive;

Also added:;
Arvo|Sorts+Mill+Goudy|PT+Serif|Cardo

font-family: 'Arvo', serif;
font-family: 'Sorts Mill Goudy', serif;
font-family: 'PT Serif', serif;
font-family: 'Cardo', serif;


*/

html {
	margin: 0;
	padding: 0em 6em 6em 6em;
	background: url(sprinkles-blur.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

@media (max-width: 1025px) {	

	html {
		padding: 0em 2em 2em 2em !important;
	}

	body {
		font-size: 1em;	
	}

	p {
		font-size: 1em !important;
	}

	p {
		display: block;
		width: 90% !important;
		margin-left: auto;
		margin-right: auto;
	}
}

body {

	font-family: 'Josefin Sans', sans-serif;
	text-decoration: none;
	margin: 0;
	padding: 0;	

}

/* h1 is the property for a header.  You can define h1 through h6 for different headers, but for this site I only use h1 */
h1 {
	font-family: 'Josefin Sans', sans-serif;
	font-size: 56px;
	color: #171919;
	text-align: center;
	//text-decoration: underline;
	margin: 0;
	padding: .4em;
	padding-bottom: 0;
	/*text-shadow: 1px 1px 2px #D42A1E;*/
}

h2 {

	font-family: 'Josefin Sans', serif;
	font-size: 33px;
	text-align: center;
	color: #333;

	margin: 0;
	padding: 20px;
}

h3 {
	text-align: center;
	font-weight: 500;
	margin: 0;
	padding: .1em;
	font-size: 1.5em;
}

h4 {
	text-align: center;
	font-weight: 300;
	font-size: 1.3em;
	margin: 0;
	padding: .44em;
}

.album-header {
	text-align: left;
	margin-left: auto;
	margin-right: auto;
}

.year-header {
	margin-top: 1em;
	text-decoration: underline;
}

mark {
	background-color: #eee;
  color: black;

}

/* p is the property for paragraphs. */
p {

	font-family: 'Josefin Sans', serif;
	font-size: 20px;
	
	text-align: center;
	color: #fff;
	

	width: 70%;
	margin-left: auto;
	margin-right: auto;
}

p.doublespacing {
	line-height: 35px;
}

/* a is the property for links.  The properties for a:link, a:visited, a:hover, and a:active are for different states, 
   for example hover is when you place your cursor over the link.
*/

a {
	text-decoration: none;
	text-align: center;
}

a:link { color: #111; text-decoration: underline;}
a:visited { color: #111; text-decoration: underline;}
a:hover { color: #ccceee; text-decoration: underline;}
a:active {}

a.photo_link:link { text-decoration: underline; }
a.photo_link:visited { text-decoration: underline; }
a.photo_link:hover { text-decoration: underline; }
a.photo_link:active {}

.hover-over {
	cursor: help;
}

/* Some useful general classes I apply to various divs______________________________________________________________*/

.opaque {
	zoom: 1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
	filter: alpha(opacity=75);
	-moz-opacity: .75;
	-khtml-opacity .75;
	opacity: .75;
}

.drop_shadow {
	-moz-box-shadow: 0px 10px 24px -12px #993366;
	-webkit-box-shadow: 0px 10px 24px -12px #993366;
	box-shadow: 0px 10px 24px -12px #993366;	
}

.clearAll {
	clear: both;
}

.arrow-down {
	width: 0; 
	height: 0; 
	margin-left: auto;
	margin-right: auto;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	
	border-top: 5px solid black;
}

.arrow-up {
	width: 0; 
	height: 0; 
	margin-left: auto;
	margin-right: auto;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	
	border-bottom: 5px solid black;
}

.arrow-up-large {
	width: 0; 
	height: 0; 
	margin-left: auto;
	margin-right: auto;
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
	
	border-bottom: 12px solid black;
}


/* ID Definitions____________________________________________________________________________________________________ */

/* The site container is a DIV that holds all the info for the site.  If you shift this div using, for example, with 'margin-left: 100px' then
   you will shift the contents of the entire site 100 pixels from the left hand side. */
/*#site_container {
	width: 100%;
	margin: 0;
	padding: 0;
}*/


/* my_picture is a class that holds your bio pic on the main site */
.my_picture {
	
	width: 100%;
	text-align: center;
	padding: 10px;

}

/* The project class holds property values that are true for each and every project on the site. */
.project {

	margin: 0;
	padding: 0;

	height: 100%;

}

/* The divider_bar class is a white bar that appears at the top of each project.  You can change the background color to #000 to make it black
   instead of white, or change the height to 100px (or more) to make it fatter. */
.divider_bar {

	//padding-top: 20px;
	height: 40px;
	background-color: #fff;
}

/* The info class is where all the info for your project is written.  These properties are true for the information boxes for all your projects.
   Changing the background-color to '#ccc', for example, will make all your info boxes gray instead of light blue. */
.info {
	font-family: 'Inconsolata', monospace;
	padding: .5em;
	/*background-color: #addfec;*/

	/* The code below makes the info class 75% opaque. You have to define the various properties for browser compatibility  */
	zoom: 1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
	filter: alpha(opacity=85);
	-moz-opacity: .85;
	-khtml-opacity .85;
	opacity: .85;
}

.smaller-text {
	font-family: 'Inconsolata', monospace;
	font-size: 1.1em;
	padding: 2em .1em;
}

.middle-text {
	font-family: 'Inconsolata', monospace;
	font-size: 1em;
	padding: 2em .1em;
}

.info-text{
	font-family: 'Inconsolata', monospace;
	padding: 3em 0;
}

.p-info {
	font-family: 'Inconsolata', monospace;
	width: 100% !important;
	padding: .7em;
	text-align: left;
	width: 100%;
	margin-bottom: 0;
	font-size: 1.2em;
}

.info_white {
	
	padding: 30px;
	//padding-bottom: 20px;
	margin-top:30px;
}

.imgThreeAcross {
	float: left;
	width: 33.33%;
}

.centerDiv {
	margin-top: 50px;
	text-align: center;
}

.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.display-text {
	margin-top: 0em;
	margin-bottom: 4em;
}

/* The footer ID is for the footer that appears at the very bottom of the page. */
#footer {
	width: 100%;
	/* background-color: #addfec; */
	height: 60px;
	padding: 0px;
	padding-top:14px;
	cursor: pointer;
}

.bg_grey {
	background-color: #addccc;
}

.center_links {
	margin-top: 3.0em;
	cursor: pointer;
	text-align: center;
}

.link_img {
	padding: .3em;
}

.img-smaller {
	width: 1.4em;
}

.header-container {
	margin-bottom: 6em;
}

.photo-info-container {
	margin-bottom: 6em;
}

.info-container {
	margin-bottom: 1em;
	padding: .3em;
}