/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0b1 | 201101 */
/* Using Color: Orange #FF6600 */
   
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Font Families */

/* Webfont alegreya italic */
@font-face {
    font-family: 'alegreyaitalic';
    src: url('/fonts/alegreya-italic-webfont.eot'); /* IE9 Compat Modes */
    src: url('/fonts/alegreya-italic-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/fonts/alegreya-italic-webfont.woff2') format('woff2'), /* Modern Browsers */
         url('/fonts/alegreya-italic-webfont.woff') format('woff'), /* Modern Browsers */
         url('/fonts/alegreya-italic-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
         url('/fonts/alegreya-italic-webfont.svg#alegreyaitalic') format('svg'); /* Legacy iOS */
    font-weight: normal;
    font-style: normal;

}

/* Webfont alegreya */
@font-face {
    font-family: 'alegreyaregular';
    src: url('/fonts/alegreya-regular-webfont.eot');
    src: url('/fonts/alegreya-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/alegreya-regular-webfont.woff2') format('woff2'),
         url('/fonts/alegreya-regular-webfont.woff') format('woff'),
         url('/fonts/alegreya-regular-webfont.ttf') format('truetype'),
         url('/fonts/alegreya-regular-webfont.svg#alegreyaregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* Webfont alegreya sans italic */
@font-face {
    font-family: 'alegreya_sansitalic';
    src: url('/fonts/alegreyasans-italic-webfont.eot');
    src: url('/fonts/alegreyasans-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/alegreyasans-italic-webfont.woff2') format('woff2'),
         url('/fonts/alegreyasans-italic-webfont.woff') format('woff'),
         url('/fonts/alegreyasans-italic-webfont.ttf') format('truetype'),
         url('/fonts/alegreyasans-italic-webfont.svg#alegreya_sansitalic') format('svg');
    font-weight: normal;
    font-style: normal;

}
/* Webfont alegreya sans regular */
@font-face {
    font-family: 'alegreya_sansregular';
    src: url('/fonts/alegreyasans-regular-webfont.eot');
    src: url('/fonts/alegreyasans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/alegreyasans-regular-webfont.woff2') format('woff2'),
         url('/fonts/alegreyasans-regular-webfont.woff') format('woff'),
         url('/fonts/alegreyasans-regular-webfont.ttf') format('truetype'),
         url('/fonts/alegreyasans-regular-webfont.svg#alegreya_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


/*begin our styles*/

body {
	font: 18px/1.4em 'alegreya_sansregular', sans-serif;
	color: #1c1c1c;
	word-spacing: .05em;
	/* word-spacing: normal; */
}

p,
ul {
	margin: 0 0 1.5em;
}

ul {
	list-style: disc;
	padding: 0 0 0 20px;
}

a {
	color: #1D745A;
}

h1 {

}

h2 {
	font-family: 'alegreyaregular', serif;
	font-size: 1.5em;
	/* line-height: 1em; */
	margin: 0 0 .4em;
	font-weight: bold;
	letter-spacing: -.02em;
	word-spacing: .1em;
}
/* Retina-specific */
@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
						h2 {
						letter-spacing:-.08em;
						}
}

/*layout*/

.center {
	text-align:center;
}

.wrapper {
	max-width:1048px;
}

article {
	border-bottom: 1px solid #d8d8d8;
	padding: 10px 20px 0 20px;
	margin: 10px 0;
}

/* Itsposted */


/* Itsposted home page image */
.mainimage #homepg {
    width: 100%;
    display: inline-block;
    vertical-align: middle;
    font: 0/0 serif;
    text-shadow: none;
    color: transparent;
    background-size: 100%;
    background-position: 50% 10%;
    background-repeat: no-repeat;
}
.mainimage #homepg .inner {
    padding-top: 33.3%; /* height/width of image */
	margin-bottom:5%;
    display: block;
    height: 0;
}

/* Itsposted website portfolio webpage thumbnail and text */
.webthumbtext {
	float:left;
	width:96px; 
	min-height: 136px; 
	border:1px solid black; 
	margin:3px 3px;
	padding:3px 3px;
	text-align:center;
	}
/* Itsposted small text */
.fontsmall {
	font-size:80%;line-height:100%;
	}
/* Itsposted background animate */
@keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -6000px 0; }
}
@-moz-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -6000px 0; }
}
@-webkit-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -6000px 0; }
}
@-ms-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -6000px 0; }
}
@-o-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -6000px 0; }
}
#animate-area { 
    width: 100%; 
    height: 100%; 
    background-image: url(/images/backgroundartwork.jpg);
    background-position: 0px 0px;

/*     animation: animatedBackground 10s linear infinite;
    -moz-animation: animatedBackground 10s linear infinite;
    -webkit-animation: animatedBackground 10s linear infinite;
    -ms-animation: animatedBackground 10s linear infinite;
    -o-animation: animatedBackground 10s linear infinite;
 */
	animation: animatedBackground 80s linear infinite;
    -moz-animation: animatedBackground 80s linear infinite;
    -webkit-animation: animatedBackground 80s linear infinite;
    -ms-animation: animatedBackground 80s linear infinite;
    -o-animation: animatedBackground 80s linear infinite;
}

	
	
	

/* default screen, non-retina */
.mainimage #homepg { background-image: url("..//images/Itsposted_home.jpg"); }

@media only screen and (max-width: 320px) {
    /* Small screen, non-retina */
    .mainimage #homepg 	{ background-image: url("../images/Itsposted_home320.jpg"); }
	#animate-area { 
    width: 100%; 
    height: 100%; 
    background-image: url(/images/backgroundartwork.jpg);
    background-position: 0px 0px;
	}

}

/* ----------------------------------------------------------- 
The viewport metatag was Apple's solution to the problem. It was adopted quickly by other platforms, but it was never put forward by the W3C. Microsoft brought this to light when they chose for IE10 to ignore the viewport metatag under certain circumstances. Instead, they opted to use CSS Device Adaptation, which is what the W3C are leaning on.
In short, similar viewport properties are defined within CSS using the @viewport rule, instead of within the HTML.
It's a far more elegant solution than the metatag, but is a long way from being fully supported. Slot it into your CSS now, to make sure your responsive design behaves itself in IE10 "snap mode", and keep an eye on its progress in the future. This is where viewport control is headed.
 */
		@-ms-viewport{
			width: extend-to-zoom;
			zoom: 1.0;
		}
/* ----------------------------------------------------------- */


a {
	color: #77480A;
}


.orangeborderunder {
	border-bottom: 3px solid #FF6600;
}

.orangeborderunderlogo36 {
	min-height:36px;
	border-bottom: 3px solid #FF6600;
	background-image: url("/images/CC_logo_36.gif");
    background-repeat: no-repeat;
    background-position: right center;
}
.orangeborderunderlogo60 {
	min-height:60px;
	border-bottom: 3px solid #FF6600;
	background-image: url("/images/CC_logo_60.gif");
    background-repeat: no-repeat;
    background-position: right center;
}

.orangeborderunderlogo90 {
	min-height:90px;
	border-bottom: 3px solid #FF6600;
	background-image: url("/images/CC_logo_90.gif");
    background-repeat: no-repeat;
    background-position: right center;
}

.kernfl {
	letter-spacing: 0.09em;
	}
.kernpair {letter-spacing:-.09em;}

.last {
   margin-right: 0 !important;
}

/*header*/

header {
	background: #1c1c1c;
	padding: 15px 20px;
}

		/*shorter clearfix http://nicolasgallagher.com/micro-clearfix-hack/*/
		header:before, header:after {
		    content:"";
		    display:table;
		}
		
		header:after {
		    clear:both;
		}
		
		/* For IE 6/7 (trigger hasLayout) */
		header {
		    zoom:1;
		}

h1.logo a {
	color: #d8d8d8;
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 20px;
	line-height: 22px;
	float: left;
	letter-spacing: 0.2em;
}

a.to_nav {
	float: right;
	color: #fff;
	background: #4e4e4e;
	text-decoration: none;
	padding: 0 10px;
	font-size: 12px;
	font-weight: bold;
	line-height: 22px;
	height: 22px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}

a.to_nav:hover, a.to_nav:focus {
	color: #1c1c1c;
	background: #ccc;
}
a.to_nav:focus {
	color: #1c1c1c;
	background: #ccc;
}
	
/*navigation*/	

#primary_nav ul {
	list-style: none;
	background: #1c1c1c;
	padding: 5px 0;
}

#primary_nav li a {
	display: block;
	padding: 0 20px;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	letter-spacing: 0.05em;
	line-height: 2em;
	height: 2em;
	line-height: 1.5em;
	height: 1.5em;
	border-bottom: 1px solid #383838;
	background: #1c1c1c; /* DK added for long links */
	overflow: hidden;
}

#primary_nav li:last-child a {
	border-bottom: none;
}

#primary_nav li a:hover, #primary_nav li a:focus {
	color: #1c1c1c;
	background: #ccc;
}

#primary_nav .current{background:#6B4407;} /* Current Menu Item background */ /* 993F00 */



/*footer*/

footer {
	font-family: 'alegreyaregular', serif;
	font-style: italic;
	text-align: center;
	font-size: 14px;
}



/*media queries*/

		@media (max-width: 975px) {
		   .img { 
			  display: none;
		   }
		}

		@media only screen and (min-width: 768px) {
		
		
			a.to_nav {
				display: none;
			}
			
			.wrapper {
				position: relative;
				width: 768px;
				width: 100%; /* "Modified to stay friendly" */
				margin: auto;
			}
			

			
			#primary_nav {
				position: absolute;
				top: 5px;
				right: 10px;
				background: none;
			}
			
			#primary_nav li {
				display: inline;
			}
			
			#primary_nav li a {
				float: left;
				border: none;
				padding: 0 10px;
				-webkit-border-radius: 2px;
				-moz-border-radius: 2px;
				border-radius: 2px;
			}
			
			#primary_nav li.top {
				display: none;
			}
	
		}
		
				.addmarginbottom {
				margin-bottom:100em;
				}