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,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}li{display:inline}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}.centered{margin:0 auto;min-width:960px}.clearfix:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.clearfix{display:inline-block}html[xmlns] .clearfix{display:block}* html .clearfix{height:1%}


/* Site starts here */
	
body { 
  font-family: "Quicksand", "Helvetica", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
  width: 100%;
  height: 100%;
	margin: 0 auto;
  background: url('img/primary-bg.png') repeat top ;
  min-height: 100%;
  position: relative;
  padding-bottom: 4em;  
} 


a { text-decoration: none; }


p { padding-bottom: 1em; }

img { max-width: 100% }

/* Header */
#site-header {
  background: url('img/secondary-bg.png') repeat top;
  height: 7.5em;
  padding-top: 1.5em;    
}

#site-header h1 a{
  background: url('img/cgd-logo.png') no-repeat top ;
  background-position: 1.5em; 
  display: block;
  width: 580px;
  height: 75px;
  margin: 0 auto;
  text-indent:-9999px;
 }
     
#main-menu { 
  display: block;
  margin: 0 auto;
  padding-bottom: 3em;
  text-align: center;
}

#main-menu li, 
.portfolio-tabs li{
  font-weight: 700;
  display: inline;
  font-size: 1.2em;
  padding: 1.2em;
}

#main-menu a { color: #000; }

#main-menu a:visited {
  color: #555;
  text-shadow: 0px 1px 2px #fff;    
}

#main-menu a:hover {
  color: #824C60;
  text-shadow: 0px 1px 2px #fff;    
}


/* Content */

.main-content {
	display: block;
	position: relative;
	min-height: 100%;
}

#main-nav,
#about-me-wrapper,
#social-media-wrapper,
#portfolio {
	display: block;
	height: 100%;
	min-height: 10em;
	max-width: 60em;
	margin: 0 auto;
}
   

#portrait {
  width: 12em;
  min-width: 12em;
  float: left;
  margin-top: -2em;
  background: url('img/secondary-bg.png') no-repeat top;
  padding: .3em;
  border-radius: .8em;
} 

#about-me,
#contact-me {
  width: 75%;
  float: right;
  padding: .5em 0 1.2em .5em;
}

/* About me only */    
#about-me h1 {
  font-size: 2.8em;    
}

#about-me p {
  font-size: 1.2em;
}

#about-me a {
  color: #FFBED2;
  font-weight: 700;
}

#about-me a:hover {
  color: #fff;
}

/* Kerning */
#about-me .char6 {
  margin-left: .05em;    
}

#about-me .char12 {
  margin-left: -.04em;
}

#about-me .char13 {
  margin-left: .05em;
  margin-right: .05em;
}

#portfolio {
  border-top: 2px solid white;
  clear: both;    
}

#arrow-down {
  width:0px; 
  height:0px; 
  border-left:20px solid transparent;
  border-right:20px solid transparent ;
  border-top:20px solid #fff;
  font-size:0px;
  line-height:0px;
  margin-left: 16%;
}

.portfolio-tabs {
  padding-bottom: 1em;
}

.portfolio-tabs a, a:visited{
  color: #FFBED2;    
}

.portfolio-tabs a:hover, .active a{
  color: #fff;
}

#portfolio-tab a{
  text-transform:uppercase;
  font-size: 1.7em;
  margin-left: 1em;    
  letter-spacing: .2em;
  color: #fff;
  text-shadow: 0px 2px 3px #555;
}

.portfolio-wrapper { 
	width: 55em;
	margin: 0 auto;
	padding: 2em;
	margin-bottom: 3em;
	height: auto;
	background: #eee;
	border-radius: 1em;
	box-shadow: 5px 5px 2px #824C60;
	}


.portfolio-wrapper h2 {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  font-size: 1.7em;
  letter-spacing: 0.3em;
  color: #824C60;
  opacity: .4;
}

/* Contact page */

#social-media-links {
	display: block;

}
#social-media-links li {
  padding: .5em .3em 0 .3em;
  float: left; 
}

#social-media-wrapper {
  border-top: 2px solid white;
  clear: both;
  padding-bottom: 4em;
  margin: 0 auto;
}

#social-media-wrapper h1 {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  font-size: 1.7em;
  letter-spacing: 0.3em;
  color: #fff;
  text-shadow: 0px 2px 3px #555;
}

#contact-arrow-down{
  width:0px; 
  height:0px; 
  border-left:20px solid transparent;
  border-right:20px solid transparent ;
  border-top:20px solid #fff;
  font-size:0px;
  line-height:0px;
  margin-left: 48%;
}

.contact-feeds h2,
.contact-feeds h2 a,
.cobtact-feeds h2 a:visited{
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  font-family: "Quicksand", "Helvetica", sans-serif;
  font-size: 1em;
  padding: 1em;
  color: #fff;
  text-shadow: 0px 2px 3px #555;
}

.contact-feeds h2 a:hover {
  color: #FFBED2;
}


.feed-container {
	width: 30%;
	float: left;
	display: block;
	margin: 0 1.5%;
}


/* Twitter Feed */

#twitter-feed {
  color: #fff;
  padding: 1em;
  background: #824C60;
  border-radius: 8px;
  border: 1px solid #FFBED2;
}
 
#twitter-feed .tweet {
  font-family: "Helvetica", sans-serif;
  font-size: .8em;
  margin: 0 auto 1em auto;
  padding: 0 0 1em 0;
  border-bottom: 1px dotted #ccc;
}
 
#twitter-feed .tweet a {
  text-decoration: none;
  color: #FFBED2;
}
 
#twitter-feed .tweet a:hover {
    text-decoration: underline;
}
 
#twitter-feed .tweet .time {
    font-size: .5em;
    padding-top: .5em;
    color: #ddd;
}

#etsy-feed {
  background: #824C60;
  border: 1px solid white;
  padding: 2em;
  border-radius: 8px;
}

#etsy-feed iframe {
	margin: 0 auto;
	padding-left: 1em;
}

#clear-fix {
	height: 1em;
	clear: both;
}

/* Footer */
#footer-wrapper {
  position: absolute;
  bottom: 0;
  margin-bottom: -4em;
  width: 100%;
  border-top: 1px solid white; 
  background: url('img/secondary-bg.png') repeat top;
}

footer p{
  color: #000;
  font-size: .85em;
  padding: 1em;
}

footer { 
	width: 60em;
	margin: 0 auto;
}
    
footer a,
footer a:visited {
  color: #824C60;
  font-weight: 700;
}

#footer-copyright {
  float: left;
}

#footer-links {
  text-align: right;
}
/* Primary color: #824C60, secondary color: #FFBED2 */