html,body {height:100%;}

/*
GLOBALS
*/

.margin_0 { margin: 0; }
.margin_25 { margin: 25%; }
.margin_50 { margin: 50%; }
.margin_75 { margin: 75%; }
.margin_100 { margin: 100%; }

.margin_top_px_45 { margin-top: 45px; }

.padding_0 { padding: 0; }
.padding_25 { padding: 25%; }
.padding_50 { padding: 50%; }
.padding_75 { padding: 75%; }
.padding_100 { padding: 100%; }

.padding_px_25 { padding: 25px; }
.padding_px_45 { padding: 45px; }
.padding_px_50 { padding: 50px; }
.padding_px_75 { padding: 75px; }
.padding_px_100 { padding: 100px; }

.border_1_solid { border-style: solid;  border-width:1px; }
.border_2_solid { border-style: solid;  border-width:2px; }
.border_3_solid { border-style: solid;  border-width:3px; }

.fl { float:left; }
.fr { float:right; }
.clear { float:clear; }

.hidden { visibility: hidden; display: none;}
.visible { visibility: visible; display: inherit;}

div.flexColumn {flex-direction: column;}

/*Dark colors are softer on the eyes, so let's do black.*/
body {margin:0;padding:0}

/*Fonts are important*/
@font-face
{
	font-family:Dreaming Regular;
	src: url("Dreaming-Regular.otf");
}
@font-face
{
	font-family:Fira Sans Light;
	src: url("FiraSans-Light.otf");
}

a {font-family:Fira Sans Light}

.bold {font-weight: bold;}

.margin_lg_bottom {margin-bottom: 25px;}

/*
	We start the responsive design here.
	
	For small screens, we just want a single column
	with the pattern 
		Portfolio item image
		Portfolio item text
		Image
		Text
		etc...
	
	But for larger screens, we want to increase the
	font size, and fit as many colums as we can in 
	a grid.
	
*/
@media only screen and (min-width : 1px)
{

	p, ul, li, a
	{
		margin:0px;
		padding:0px;
	
		color:#000000;
		font-size:12px;

		font-family:Fira Sans Light;
	}

	p.title
	{
		font-size:20px;
		font-family:Dreaming Regular;
	}

	p.heading
	{
		font-size:20px;
		font-family:Fira Sans Light;
	}
	
	p.caption
	{
		font-size:16px;
		font-style:italic;
		text-align:right;
	}

	p.leftcaption
	{
		font-size:16px;
		font-style:italic;
		text-align:left;
	}

	p.LeftWidth
	{
		width:auto;
	}
	
	ul
	{
		margin-left: 45px;
		padding:6px 66px 6px 66px;
	
		color:#E5E5E5;
		font-size:16px;
	}

	ol
	{
		margin-left: 45px;

		font-size:16px;
	}

	#image-with-box-vertical
	{
		visibility:visible;
		display:inherit;
	}

	
	#image-with-box-horizontal
	{
		visibility:hidden;
		display:none;
	}


	div.TopContainer
	{
		width:94%;
		padding:30px 3% 15px 3%;
	}



	div.FullNameHeader
	{
		width:100%;
		text-align:left;
	}

	div.LeftColumn 
	{
		position:relative;
		width:100%;
	}
	div.RightColumn 
	{
		position:relative;
	}
	div.HalfColumn 
	{
		position:relative;
		width:100%;
	}
	div.OuterContainer 
	{
		float:left;
		width:100%;
	}
	
	div.container1 
	{
		
	}
	/*
		This is as wide as I want to get on a 
		mobile device for a portfolio item
	*/
	div.MobileMax {max-width:320px;}

}

@media only screen and (min-width : 320px)
{

	/*
		Make these items as big as the screen size.
		We're still using a single column display.
	*/
	div.MobileMax, div.LargeColumn, div.MidColumn
	{
		max-width:100%;
	}
	
	div.SmallColumn
	{
		width:100%;
	}

	
	div.InvisibleGapSmall
	{
		height:30px;
	}
	
	div.InvisibleGap
	{
		height:75px;
	}
}

/*
	This is supposed to work for iThings, but
	the iPod 4th Gen doesn't want to cooperate.
*/
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : portrait)

{

	div.FullNameHeader
	{
		width:100%;
		text-align:left;
	}
	div.LeftColumn 
	{
		position:relative;
		width:100%;
	}
	div.RightColumn 
	{
		position:relative;
	}

	div.MobileMax {max-width:100%;}

}

/*iPod Touch.  Doesn't work for 4th gen.*/
@media only screen and (-webkit-min-device-pixel-ratio: 2)
{

	div.FullNameHeader
	{
		width:100%;
		text-align:left;
	}
	div.LeftColumn 
	{
		position:relative;
		width:100%;
	}
	div.RightColumn 
	{
		position:relative;
	}

	div.MobileMax {max-width:100%;}
}

/*
	Increase font size and change layout to
	two major columns.  Still just one lane
	of portfolio items on the right.
*/	
@media only screen and (min-width : 640px)
{

	p, a
	{
		font-size:14px;
	}

	p.heading
	{
		font-size:22px;
	}

	p.heading
	{
		font-size:22px;
		
	}
	
	p.pushToTop
	{
		padding:0px 45px 6px 45px;
	}
	
	p.pushToBottom
	{
		padding:6px 45px 0px 45px;
	}
	
	p.LeftWidth
	{
		width:7	5%;
	}

	ul
	{
		font-size:18px;
	}

	ol
	{
		font-size:18px;
	}

	li
	{
		font-size:18px;
	}
	
	div.FullNameHeader
	{
		height:100px;
		text-align:right;
	}

	div.LeftColumn 
	{
		position:relative;
		width:24%;		
		float:left;
		left:50%;
		padding-top:45px;
		padding-bottom:45px;
	}

	div.RightColumn 
	{
		position:relative;
		width:76%;
		float:left;
		left:50%;
		padding-top:45px;
		padding-bottom:45px;
		
	}

	div.HalfColumn 
	{
		position:relative;
		width:50%;
		float:left;
	}
	
	div.OuterContainer 
	{
		float:left;
		width:100%;
		position:relative;		
		right:50%
		overflow:hidden; /*This does some magic to push the content where it should be (it would normally be hidden?)*/
	}
	
	div.container1 
	{
		float:left;
		width:100%;
		position:relative;
		right:50%;
		
	}


	/*
		This makes it so there's just one column
		of portfolio items.
	*/
	div.MobileMax {max-width:100%}
	

	
	div.twoSmallColumnContainer
	{
		min-width:560px;
	}
	
	div.SmallColumn
	{
		width:40%;
		/*min-width:280px;*/
	}
	
	div.MidColumn
	{
		width:60%;
		/*min-width:420px;	*/
	}
	
	div.LargeColumn
	{
		width:80%;
		/*min-width:560px;*/
	}
	
	div.remainderColumn
	{
		width:40%;
		min-width:300px;
	}
	
	div.WideColumn
	{
		width:72%;
		min-width:560px;		
	}
	
	div.LockHeightDCFSmall
	{
		height:250px;
		vertical-align:bottom;
		display: table-cell;
		width:inherit;
	}
	
	.restrict
	{		
		width:45%;
		overflow:hidden;
	}

}

/*
	Here's where we put the portfolio items into a grid.
*/
@media only screen and (min-width : 881px)
{
	#image-with-box-horizontal
	{
		visibility:visible;
		display:inherit;
	}

	#image-with-box-vertical
	{
		visibility:hidden;
		display:none;
	}
	

}

@media only screen and (min-width : 1080px)
{

	p, a
	{
		font-size:16px;
	}

	p.title
	{
		font-size:24px;
	}

	p.heading
	{
		font-size:24px;
	}

	ul
	{
		font-size:20px;
	}

	ol
	{
		font-size:20px;
	}

	li
	{
		font-size:20px;
	}
	
	div.LockHeightDCFSmall
	{
		height:375px;
	}

}

@media only screen and (min-width : 1344px)
{

	div.LockHeightDCFSmall
	{
		height:400px;
	}

}

/*Some color options*/

.makeTextWhite{color:#FFFFFF;}
.makeTextOrange{color:#FF8000;}
.makeTextLightOrange{color:#FFA64D;}

.makeBGBlack{background-color:#000000;}
.makeBGGrey{background-color:#313131;}
.makeBGWhite{background-color:#FFFFFF;}

.makeBlack{color:#000000;}
.makeGrey{color:#313131;}
.makeWhite{color:#FFFFFF;}

/*
	Different styles for anchors
	
	Regular: Unvisited links start as light orange
	Nav: Bland into the text, but highlight on hover
	Buttons: Look like fancy buttons and transition
*/

a
{
	text-decoration: none;
}

a:link 
{
	color: #000000;
}
a:visited 
{
	color: #000000;
}
a:active 
{
	color: #0f0f0f;
}

a.nav
{
	font-family:inherit;
	text-decoration: none;
}
a.nav:link 
{
	color: #E5E5E5;
}
a.nav:visited 
{
	color: #979797;
}
a.nav:hover 
{
	color: #FFFFFF;
}
a.nav:active 
{
	color: #B5B5B5;
}

/*
	Take the font and color from the parent.  This is 
	only used for the heading.
*/
a.ignore
{
	text-decoration:none;
	font-family:inherit;
	color:inherit;
}

a.ignore:hover
{
	color:#FFa64d;
}

a.button
{

	border-radius: 10px;
	border: 3px solid #FF8000;
	background: #FF8000;

	text-align:center;

	padding: 9px 9px; 
	margin: 0px 45px 0px 45px ;

	color:#FFFFFF;
	font-weight:bold;

	vertical-align:bottom;
	display:inline-block;

	transition:1s;

}

a.button:hover
{

	border-radius: 10px;
	border: 3px solid #FF8000;
	background: #FFFFFF;

	text-align:center;

	padding: 9px 9px; 
	margin: 0px 45px 0px 45px ;

	color:#FF8000;
	font-weight:bold;


	vertical-align:bottom;
	display:inline-block;

	transition:1s;

}

/* This magically scales the full-size image as the width shrinks*/
img 
{
	width:100%;
	height:auto;
	max-width:100%;
}

/*Fix for Firefox*/
@-moz-document url-prefix() {  
    img
	{
        width: 100%;
        max-width: 100%;
		height: auto;
    }
}

img.noadjust
{
	width:auto;
	height:auto;
}


div {margin:0px;padding:0px;}

div.container
{

}

div.AutoColumn 
{
	position:relative;
	width:auto;
}

div.box
{
	height:50px;
	width:50px;
}

div.MakeBorder
{
	border: 1px solid #898076;
}

div.MakeLeftBorder
{
	border-left: 3px solid #898076;
}

/*
	TODO: Find a way to make this look good if
	it even makes sense to do so.
*/
div.MakeSideBorder
{
/*
	border-right-style: dotted;
	border-right-width: 1px;
	border-right-color: #898076;

	border-left-style: dotted;
	border-left-width: 1px;
	border-left-color: #898076;
*/
}

div.Left{float:left}
div.Right{float:right}
div.Clear{clear:left}

div.autoWidth {width:auto}
div.autoHeight{height:auto}

div.DoubleContainer{max-width:100%;}

div.MobileMin {min-width:320px;}

div.FullHeight{height:100%;}
div.FullWidth{width:100%;}

div.Force180HeightDown 
{
	height:180px;
	vertical-align:bottom;
	display: table-cell;
}

div.Force50HeightDown 
{
	height:50%;
	vertical-align:bottom;
	display: table-cell;
}

div.ImageCenter
{
	text-align:center;
}

div.PushAway
{
	margin: 0px 45px 0px 45px;
}

/*
	This is a bottom navigation of sorts that will
	be at the bottom right of every page.
*/
div.AboutContainer
{
	text-align:right;
	bottom:45px;
	right:45px;
}

.Absolute
{
	position:absolute;
}

.cleanlink
{
	text-decoration: none;
}