@charset "utf-8";
/* CSS Document */

/* IE Fixes --------------------------------- *************/

<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"> 
</script>
<![endif]

@media \0screen {
	
/* for ie 8 */
	 img { 
	 	border: none;
		width: auto; 
	 }
}

/* Alright now that that's outta the way let's code some responsive ----------------------- *************/

	body {
		margin: 0;
		padding: 0;
		font: 1.5em/100% FamiliarProBold, Arial;
		background-image:url(../_images/dark_wall_@2X.png);
		background-repeat: repeat;
		
		/* This is fancy pants code for making the responsive act and look all nice ----------------------- */
		transition:all .5s ease-in-out;  
		 -o-transition:all .5s ease-in-out;  
		 -moz-transition:all .5s ease-in-out;  
		 -webkit-transition:all .5s ease-in-out;
	}

	a {
		color: #2222c0;
		text-decoration: none;
	}

	a:hover {
		text-decoration: none;
	}
	
	a:visited { 
		background:none;
	}

	h1 {
		color: #a0a0a0;
		font: 1.2em/100% JennaSueRegular, Arial;
		display: inline;
	}
	
	h2 {
		font: 2.3em/100% FamiliarProBold, Arial;
	}

/* STRUCTURE / The primary code ---------------------------------- *************/

/* Desktop ---------------------------------- */

	#wrapper {
		padding: 5px;
		width: 960px;
		margin: 0 auto;
		background-image:url(../_images/linedpaper_@2x.png);
		background-repeat:repeat;
		
		/* This is fancy pants code for making the responsive act and look all nice ----------------------- */
		transition:all .5s ease-in-out;  
		 -o-transition:all .5s ease-in-out;  
		 -moz-transition:all .5s ease-in-out;  
		 -webkit-transition:all .5s ease-in-out;
	}

	#header {
		height: 250px;
		padding: 0 0 0 15px;
	}
	
	/* Navigation ---------------------------------- */
	
	#nav {
		margin: 0 auto; 
		padding-top: .5em;
		width: auto; 
		font-size: 1.4em;
		
		/* This is fancy pants code for making the responsive act and look all nice ----------------------- */
		transition:all .5s ease-in-out;  
		 -o-transition:all .5s ease-in-out;  
		 -moz-transition:all .5s ease-in-out;  
		 -webkit-transition:all .5s ease-in-out; 
	}

	#nav li { 
		margin: 0 0 0.5em 0; 
		display: block; 
		float: left; 
		clear: none; 
		margin-right: 20%; 
		background:#333; 
		-moz-border-radius: 1px; 
		-webkit-border-radius: 1px; 
		border-radius: 1px; 
		padding: 15px 15px 15px 15px;
	}

	#nav li:last-child {
		margin-right: 0; 
	}

	#nav a { 
		display: block; 
		color: #FFF; 
		text-decoration:none; 
	}
	
	.nav_check {
		float:right;
		padding-right: 1em;
		font: 1.1em/80% JennaSueRegular, Arial;
	}
	
	.nav_talk {
		font: 1.8em/150% JennaSueRegular, Arial;
	}

	
	/* Categories / Content ---------------------------------- */
	
	.categories {
		display: inline;
		font: 3em/100% FamiliarProBold, Arial;
	}
	
	.categories_thoughts {
		padding-left: .5em;
		font: 1.5em/200% JennaSueRegular, Arial;
	}
	
	.content_thoughts {
		float:right;
		padding-right: .4em;
		font: 1.4em/90% JennaSueRegular, Arial;
	}
	
	.categories_breaks {
		display:block;
		text-align:center;
		font: 3em/10% JennaSueRegular, Arial;
		
		/* This is fancy pants code for making the responsive act and look all nice ----------------------- */
		transition:all .5s ease-in-out;  
		 -o-transition:all .5s ease-in-out;  
		 -moz-transition:all .5s ease-in-out;  
		 -webkit-transition:all .5s ease-in-out;
	}
	
	.image_pad {
		margin-left: .5em;	
	}
	
	.inline {
		padding-top: .8em;
		display:inline;
	}
	
	.content_content {
		font: 1.5em JournalRegular, Arial;
	}

	.content {
		width: 945px;
		float: left;
		padding: 0 0 15px 15px;
		
		/* This is fancy pants code for making the responsive act and look all nice ----------------------- */
		transition:all .5s ease-in-out;  
		 -o-transition:all .5s ease-in-out;  
		 -moz-transition:all .5s ease-in-out;  
		 -webkit-transition:all .5s ease-in-out;
	}
	
	/* Need This For Images ------------------------------ */
	
	img {
		max-width: 100%;
		height: auto;
	}
	
	.img_content {
		padding-right: 1em;
		float:left;
		max-width: 60%;
		height: auto;
	}
	
	.talking {
		display: inline;
	}

	.talking_h {
		font: .9em/200% JennaSueRegular, Arial;
	}
	
	#highfive {
		display: block;
	}

	#footer {
		clear: both;
		padding: 0 0 0 15px;
	}

/* Tablet --------------------------------- */

/* Phone ---------------------------------- */

	.about {
		width: 85%;
	}

	#header_phone {
		display: none;
		height: 200px;	
	}

	#highfive_phone {
		display: none;
	}

/* MEDIA QUERIES / Responsive Code ---------------------------- *************/

/* for 1200px or less / Crazy Big Desktop Screens ----------------- */
@media screen and (max-width: 1200px) {
	
	#wrapper {
		width: 80%;
	}
	
	.content {
		width: 98%;
	}
	
}

/* for 980px or less / Average Desktop / Tablet Portrait Position --------------------*/
@media screen and (max-width: 980px) {
	
	#wrapper {
		width: 80%;
	}
	
	.content {
		width: 97%;
	}
	
	#nav li { 
		margin-right: 8%;
	}
	
	h2 {
		font: 2.7em/120% FamiliarProBold, Arial;
	}
	
	.img_content {
		max-width: 80%;
	}
	

}

/* iPads (portrait) / The Ipad needs this fix to display properly ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	
	#wrapper {
		width: 99%;
	}
	
	h2 {
		font: 2em/100% FamiliarProBold, Arial;
	}
	
	.img_content {
		max-width: 50%;
	}
	
	.content_content {
		font: 1.1em/100% JournalRegular, Arial;
	}
	
	#nav li { 
		margin-right: 15%;
	}
}

/* iPads (landscape) / The Ipad needs this fix to display properly ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
	
	#wrapper {
		width: 100%;
	}
	
	#nav li { 
		margin-right: 20%;
	}

	h2 {
		font: 1.7em/100% FamiliarProBold, Arial;
	}
	
	.content_content {
		font: 1.3em/100% JournalRegular, Arial;
	}
	
	.img_content {
		padding-right: 1em;
		float:left;
		max-width: 50%;
		height: auto;
	}
}

/* for 700px or less / Displays Landscape on Phone -----------------------*/
@media screen and (max-width: 700px) {
	
	#wrapper {
		width: 97%;
	}
	
	#header {
		padding: 0;
	}
	
	.inline {
		padding-top: .5em;
		display:inline;
	}
	
	.about {
		font: .8em/100% FamiliarProBold, Arial;
	}
	
	#nav li { 
		margin-right: 10%;
	}
	
	.content {
		width: 97%;
	}
	
	.content_content {
		font: .9em/85% JournalRegular, Arial;
	}
	
	.content_thoughts {
		font: .9em/100% JennaSueRegular, Arial;
	}
	
	.categories {
		font: 2em/130% FamiliarProBold, Arial;
	}
	
	.categories_thoughts {
		padding-left: .5em;
		font: 1.1em/150% JennaSueRegular, Arial;
	}
	
	.categories_breaks {
		font: 2em/50% JennaSueRegular, Arial;
	}
	
	.img_content {
		padding-right: 1em;
		float:left;
		max-width: 50%;
		height: auto;
	}
	
	h2 {
		font: 1.3em/100% FamiliarProBold, Arial;
	}
	
	p {
		font: .8em/100% FamiliarProBold, Arial;
	}
	
	#highfive_phone {
		display: block;
	}
	
	#highfive {
		display: none;
	}

}

/* for 480px or less / Phone Displays Portrait ----------------------- */
@media screen and (max-width: 480px) {
	
	.content {
		width: 99%;
		padding: 0 0 15px 0;
	}
	
	.about {
		font: .6em/100% FamiliarProBold, Arial;
	}
	
	.content_content {
		font: 1em JournalRegular, Arial;
	}
	
	.content_thoughts {
		display: none;
		font: .9em/100% JennaSueRegular, Arial;
	}
	
	.categories {
		font: 1.6em/100% FamiliarProBold, Arial;
	}
	
	.categories_thoughts {
		display: none;
		padding-left: .5em;
		font: .7em/150% JennaSueRegular, Arial;
	}
	
	.categories_breaks {
		font: 1.5em/50% JennaSueRegular, Arial;
	}

	#header {
		height: auto;
		display: none;
	}
	
	#header_phone {
		height: 250px;
		display: block;
	}
	
	#highfive_phone {
		display: block;
	}
	
	#highfive {
		display: none;
	}
	
	h1 {
		font-size: 1em;
	}
	
	h2 {
		font: 1.5em/150% FamiliarProBold, Arial;
	}
	
	.talking {
		font: .6em/100% FamiliarProBold, Arial;
	}
	
	.image_pad {
		width: 15%;	
	}
	
	.img_content {
		padding-right: 1em;
		float:left;
		max-width: 90%;
	}
	
	/* Phone Navigation ---------------------------------- */

    #nav { 
		margin: 0; 
		padding: 0; 
	}

    #nav li {
		margin: 0 auto; 
		display: block; 
		float: left;
		margin-right: 15%;
		width: 90%; 
		clear: none; 
		background:none; 
	}

    #nav a { 
		padding: 6px 0 8px; 
		text-indent: 10px; 
		color: #fff; 
		background: #333 96% 50% no-repeat; 
		border-top: 1px solid #333; 
		-moz-border-radius: 1px; 
		-webkit-border-radius: 1px; 
		border-radius: 1px; 
	}
	
	/* Footer ---------------------------------- */
	
	#footer {
		padding: 0;
	}
	
}

/* border & guideline / Help for placement ---------- May need to delete */
	
	/*#header, .content, #sidebar {
		margin-bottom: 5px;
	}
	
	#wrapper, #header, .content, #footer {
		border: solid 1px #ccc;
	}*/
	
	
/* Font Faces ---------------------------------------------- *************/

/* Jenna Sue Regular ---------- */		
@font-face {
    font-family: 'JennaSueRegular';
    src: url('../_fonts/JennaSue-webfont.eot');
    src: url('../_fonts/JennaSue-webfont.eot?#iefix') format('embedded-opentype'),
url('../_fonts/JennaSue-webfont.woff') format('woff'),
url('../_fonts/JennaSue-webfont.ttf') format('truetype'),
url('../_fonts/JennaSue-webfont.svg#JennaSueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
	
/* Familiar Pro Bold ---------- */
@font-face {
    font-family: 'FamiliarProBold';
    src: url('../_fonts/Familiar_Pro-Bold-webfont.eot');
    src: url('../_fonts/Familiar_Pro-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../_fonts/Familiar_Pro-Bold-webfont.woff') format('woff'),
url('../_fonts/Familiar_Pro-Bold-webfont.ttf') format('truetype'),
url('../_fonts/Familiar_Pro-Bold-webfont.svg#FamiliarProBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* Journal ---------- */
@font-face {
    font-family: 'JournalRegular';
    src: url('../_fonts/journal-webfont.eot');
    src: url('../_fonts/journal-webfont.eot?#iefix') format('embedded-opentype'),
url('../_fonts/journal-webfont.woff') format('woff'),
url('../_fonts/journal-webfont.ttf') format('truetype'),
url('../_fonts/journal-webfont.svg#JournalRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}