Mary.codes responsive

additional.css

div#nav {
    margin: 20px 0;
    width: 100%;
    text-align: center;
    overflow: auto;
}

main-style.css

body, html {
	height:100%; margin:0;
	background:#F8EAE2;
	font:12px Arial, Helvetica, Verdana, Tahoma, sans-serif; }
#container {
	min-height:100%;
	height:auto !important;
	height:100%; width:100%;
	margin:0 auto -200px;
	background:transparent url(http://mary.codes/images/bg_colorbar2.png) repeat-x top left; }
a, a:visited { text-decoration:none; }
	
	
/*  Header Styles and Logo  */
#header {
	/* height:110px; */
	width: 100%;
	margin:8px auto 0 auto;
	padding-top:39px;
	overflow: auto;
	}
#logo {
	height:262px;
	width: 100%;
	/* float:left; */
	text-indent:-9999px;
	}
#logo a {
	display:block;
	outline:none;
	height:262px;
	width: 100%;
	background:transparent url(http://mary.codes/images/mary.png) no-repeat top left;
	background-position: center center;
	background-size: 80%;
	}
#logo a:hover { display:block; outline:none;
	height:262px; width:492px;
	background:transparent url(http://mary.codes/images/maryhome.png) no-repeat top left; }

h1, h2, h3, h4 { font-weight:normal; margin:0; padding:0; }
h1 {
	margin:0 0 25px 0;
	color:#fd1161;
	font-size:38px;
	letter-spacing:0.011em;
	background:url(http://mary.codes/images/bg_header.png) no-repeat center right;
	}
h1.welcome { background:none; margin-top:-2px;}
h1 span.dark { color:#bb1553; }
h1.header_portfolio { width:230px; float:left; }
h1.header_about { width:195px; margin-bottom:10px; }
h1.header_blog { width:165px; margin-bottom:25px; }
h1.header_contact { width:220px; margin-bottom:10px; }
.cat_desc h2, #content h2 { font-size:24px; color:#bb1553; }
h3, h4 { color:#a8826d; font-size:20px; }
#sidebar h3 { color:#ff6b00; font-size:24px; margin:45px 0 8px 0; }
#left_col span.dates{ background-color: #f1dacf; color:#ff6b00; font-size:10px; margin:45px 0 8px 0; }
h2.commenthere { margin-top:30px; }


/*  Navigation  */
#nav ul {
	/* float:right; */
	width: 100%;
	padding:0;
	margin:0;
	text-align: center;
	}
#nav li {
	padding:0;
	margin:0;
	list-style-type:none;
	display: inline-block;
	/* float:left; */
	text-indent:-9999px;
	}
#nav li.margin {/* margin-right:60px; */}
#nav li a {
	outline:none;
	display:block;
	height: 34px;
	background:transparent url(http://mary.codes/images/nav.png) no-repeat;
	/* font-size: 20px; */
	}
#nav li a.portfolio, #nav li a.portfolio_actv { width:103px; background-position:top left; }
#nav li a:hover.portfolio, #nav li a.portfolio_actv { background-position:bottom left; }
#nav li a.about, #nav li a.about_actv { width:76px; background-position: -103px 0px; }
#nav li a:hover.about, #nav li a.about_actv { background-position: -103px -34px; }
#nav li a.blog, #nav li a.blog_actv { width:76px; background-position:-179px 0px; }
#nav li a:hover.blog, #nav li a.blog_actv { background-position:-179px -34px; }
#nav li a.contact, #nav li a.contact_actv { width:90px; background-position:top right; }
#nav li a:hover.contact, #nav li a.contact_actv { background-position:bottom right; }

#folio_menu {
	padding:0;
	margin:13px 0 0 0;
	float:right; }
#folio_menu li {
	padding:0 0 0 0;
	margin:0 0 0 48px;
	list-style-type:none;
	display:inline;
	float:left; }
#folio_menu li.nomargin { margin:0; }
#folio_menu li a {
	display:block;
	color:#CCAA9E;
	font-size:16px; }


/*  Content  */
#content {
	padding:0;
	margin:0 auto;
	width: 100%;
	overflow: auto;
	}
#content p, .contactinfo {
	font-size:12px;
	line-height:18px;
	color:#754B36; }
#desc p, #links p {
	font-size:18px;
	line-height:30px;
	color:#bb1553;
	margin:35px 0 40px 0;
	padding:0; }
#desc {
	float:left;
	width:430px;
	position:relative; }
#links {
	float:right;
	width:450px;
	text-align:right; }
#links a {
	color:#fd1161;
	padding-right:15px;
	background:url(http://mary.codes/images/ico_arrow_up.png) no-repeat center right; }
#links a:hover {
	color:#a8826d;
	background:url(http://mary.codes/images/ico_arrow_over.png) no-repeat center right; }
.cat_desc, #left_col {/* float:left; */width: 90%;margin: 0 auto;}
.folio_thumbs, #right_col {/* float:right; */width: 90%;margin: 0 auto;}
#left_col p, .contactinfo { margin-bottom:30px; }
.contactinfo { margin-left:10px; }
.contactinfo th { text-align:right; padding-right:10px; width:55px; }

#content p > a, .contactinfo a,
#sidebar ul a, #sidebar p a,
div.mainpost p a { color:#A8826D; }
div.mainpost p a { border-bottom:1px solid #F1DACF; }

#content p > a:hover, .contactinfo a:hover,
#sidebar ul a:hover, #sidebar p a:hover,
#folio_menu li a:hover, .postheader li a:hover,
div.mainpost p a:hover { color:#fd1161; border-bottom:3px solid #F1DACF; }

#right_col p.notice { color:#bb1553; font-size:16px; margin-bottom:30px; text-align:right; }
#right_col p.notice strong,
#form .required, #commentform .required { color:#fd1161; }
.nomargin { margin:5px 0 0 0; }
	
	
/*  HOME page styles  */
.featuredworks { 
	float:left;
	margin-bottom:15px;
	width:190px;
	background:transparent url(http://mary.codes/images/doubleslash.png) no-repeat center right; }
.viewmore {
	display:block;
	float:right;
	color:#fd1161;
	font-size:18px;
	padding-right:15px;
	background:url(http://mary.codes/images/ico_arrow_up.png) no-repeat center right; }
.viewmore:hover {
	color:#a8826d;
	background:url(http://mary.codes/images/ico_arrow_over.png) no-repeat center right; }


/* PORTFOLIO page styles */
#project_box {
	width:654px;
	position:relative;
 }
.project-column {
	float:left;
	overflow:hidden;
	margin-right:30px; }
.project{
	float:left;
	overflow:hidden;
	margin-right:30px; 
	border-bottom:2px solid #f1dacf;
	margin-bottom:15px;
	}
.preview{
	 margin-bottom: 14px;
	 box-shadow:10px 10px #faccb3;
}
.push_button {
    position: relative;
    text-align:center;
    color:#FFF;
    text-decoration:none;
	padding:5px 10px;
	margin:5px;
}
button:focus {outline:0;}
.push_button:before {
    background:#f0f0f0;
    background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D0D0D0), to(#f0f0f0));
}
 .push_button:active {
    -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset;
    top:5px;
}
button.live{
	text-shadow: -1px -1px 0 #A84155;
    background: #D25068;
    border: 1px solid #D25068;
    background-image: -webkit-linear-gradient(top, #F66C7B, #D25068);
    background-image: -moz-linear-gradient(top, #F66C7B, #D25068);
    background-image: -ms-linear-gradient(top, #F66C7B, #D25068);
    background-image: -o-linear-gradient(top, #F66C7B, #D25068);
    background-image: linear-gradient(to bottom, #F66C7B, #D25068);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);
}
button.live:hover {
	background: #F66C7B;
	background-image:-webkit-linear-gradient(top, #D25068, #F66C7B);
	background-image:-moz-linear-gradient(top, #D25068, #F66C7B);
	background-image:-ms-linear-gradient(top, #D25068, #F66C7B);
	background-image:-o-linear-gradient(top, #D25068, #F66C7B);
	background-image:linear-gradient(top, #D25068, #F66C7B);
}

.githubb {
    text-shadow:-1px -1px 0 #2C7982;
    background: #3EACBA;
    border:1px solid #379AA4;
    background-image:-webkit-linear-gradient(top, #48C6D4, #3EACBA);
    background-image:-moz-linear-gradient(top, #48C6D4, #3EACBA);
    background-image:-ms-linear-gradient(top, #48C6D4, #3EACBA);
    background-image:-o-linear-gradient(top, #48C6D4, #3EACBA);
    background-image:linear-gradient(top, #48C6D4, #3EACBA);
    
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    
    -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);
    -moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);
    box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);
}

.githubb:hover {
    background: #48C6D4;
    background-image:-webkit-linear-gradient(top, #3EACBA, #48C6D4);
    background-image:-moz-linear-gradient(top, #3EACBA, #48C6D4);
    background-image:-ms-linear-gradient(top, #3EACBA, #48C6D4);
    background-image:-o-linear-gradient(top, #3EACBA, #48C6D4);
    background-image:linear-gradient(top, #3EACBA, #48C6D4);
}
#project_box p.leadin {
	font-size:13px;
	color:#bb1553;
	font-weight:bold;}
#project_box p.leadin span { color:#fd1161; }
p.goal {
	font-size:13px;
	color:#43bac8!important;
	font-weight:bold;}
p.techstack {
	font-size:13px;
	color:#fd1161!important;
	font-weight:bold;}
.clear { clear:both; overflow:hidden; }
.category {
	position:relative;
	border-bottom:2px solid #f1dacf;
	padding-bottom:10px;
	margin:10px 0 40px 0; }
.cat_desc p { margin-bottom:30px; }
.thumbnail {
	float:left;
	margin:0 30px 30px 0;
	position:relative;
	overflow:hidden; }
.thumbnail span {
  position:absolute;
  top:0; left:0;
  display:block;
  margin:0; padding:0; 
  width:100%; height:100%;
  opacity: 0;
  -moz-opacity: 0;
  filter:alpha(opacity=0); }
.folio_thumbs a img, .post img, .border { border:9px solid #f1dacf; }
.folio_thumbs a:hover img { border-color:#bb1553; }
.upone a, .downone a {
	display:block;
	width:27px; height:21px;
	text-indent:-9999px;
	outline:none;
	background:url(http://mary.codes/images/btn_updown.png) no-repeat; }
.upone { position:absolute; bottom:0; left:0; }
.upone a { background-position:-27px 0; }
.upone a:hover { background-position:0 0; }
.downone { position:absolute; bottom:0; left:35px; }
.downone a { background-position:-27px -21px; }
.downone a:hover { background-position:0 -21px; }

/* ABOUT page styles */
#profile_box {
	/* height:312px; */
	width: 100%;
	/* position:relative; */
	border-bottom:2px solid #f1dacf;
	margin:0 0 43px 20px;
	padding:0;
	overflow: auto;
	}
.column {
	width: 90%;
	height:290px;
	/* float:left; */
	/* overflow:hidden; */
	margin-right:30px;
	}
#profile_box p.leadin {
	font-size:13px;
	color:#bb1553;
	font-weight:bold;}
#profile_box p.leadin span { color:#fd1161; }
.norightmar { margin-right:0; }
.profilepic { border:9px solid #F1DACF; margin:18px 0 40px 0; }
#cute_bun {
	text-indent:-9999px;
	position:absolute;
	bottom:10px; right:75px;
	width:116px; height:97px;
	background:url(http://mary.codes/images/cutebunb.png) no-repeat top left; }
#cute_bun:hover {background:url(http://mary.codes/images/cutebun.png) no-repeat top left; }
#signature {
	text-indent:-9999px;
	/* position:absolute; */
	/* bottom:10px; */
	/* right:15px; */
	width:183px;
	height:109px;
	background:url(http://mary.codes/images/sign.png) no-repeat top left;
	position: relative;
	top: -30px;
	}
#signature:hover { background:url(http://mary.codes/images/signb.png) no-repeat top left; }
.pullquote {
	margin:15px 0;
	padding:0 0 0 40px;
	font-size:18px;
	line-height:22px; 
	color:#bb1553;
	background:url(http://mary.codes/images/bg_quotes.png) no-repeat top center; }
.small_cols {
	margin-bottom:40px;
	width:224px;
	float:left;}
.small_cols ul { margin:10px 0 0 0; padding:0; }
.small_cols li {
	color:#754B36;
	list-style-type:none;
	margin:0 0 7px 0;
	padding:0 0 0 15px;
	background:url(http://mary.codes/images/ico_check.png) no-repeat left center; }
.width1 { width:240px; margin-left:20px; }
.width2 { width:270px; }
.width3 { width:140px; }
#left_col p.one,
#left_col p.two,
#left_col p.three,
#left_col p.pink-bullet,
#left_col p.black-bullet,
#left_col p.yellow-bullet,
#left_col p.blue-bullet
 {
	padding-left:30px;
	margin:8px 0 12px 10px; }
	
.one { background:url(http://mary.codes/images/bg_1.png) no-repeat left center; }
.two { background:url(http://mary.codes/images/bg_2.png) no-repeat left center; }
.three { background:url(http://mary.codes/images/bg_3.png) no-repeat left center; }
.pink-bullet{background:url(http://mary.codes/images/pinksquare.png) no-repeat top left; }
.black-bullet{background:url(http://mary.codes/images/blacksquare.png) no-repeat top left }
.yellow-bullet{background:url(http://mary.codes/images/yellowsquare.png) no-repeat top left; }
.blue-bullet{background:url(http://mary.codes/images/bluesquare.png) no-repeat top left; }

/* CONTACT page styles */
#form { width:535px; float:right; margin-bottom:30px; position:relative; }
.form_row { clear:both; overflow:hidden; }
.form_label {
	margin-top:8px;
	float:left;
	width:80px;
	color:#754B36;
	font-size:14px;
	text-align:right; }
.form_field { float:right; width:440px; }
#form input, #form textarea, #commentform input, #commentform textarea {
	font:12px Arial, Helvetica, Verdana, Tahoma, sans-serif;
	padding:3px 7px 3px 7px;
	margin-bottom:20px;
	height:24px; width:424px;
	background:transparent;
	color:#A8826D;
	border:1px solid #DDC6BC;
	font-size:14px; }
#form input:hover, #form textarea:hover, #sidebar input:hover,
#commentform input:hover, #commentform textarea:hover { color:#fd1161; border:1px solid #CCAA9E; }
#form textarea, #commentform textarea { height:150px; }
#form input.submit, #commentform input.submit {
	float:right;
	width:100px;
	padding:3px 5px 6px 5px;
	text-transform:uppercase;
	font-size:12px; }
#form .required_info, #commentform .required_info { margin-top:-11px; float:left; }
#form .required_info p, #commentform .required_info p { font-size:10px; line-height:normal; }
#form .pbottom, #commentform .pbottom { margin-bottom:25px; }
#form .formtop, #commentform .formtop { margin-top:17px; }
#mail_box {
	position:absolute;
	left:-105px; top:-8px;
	width:94px; height:121px;
	background:url(http://mary.codes/images/ygnm.png) no-repeat }
#mail_box:hover {background:url(http://mary.codes/images/ygm.png) no-repeat }
	
	
/*  Footer Styles  */
#push { height:200px; clear:both; }
#push2 { height:100px; clear:both; }
#footer {
	clear:both;
	height:200px;
	background:black url(http://mary.codes/images/footerimg.png) repeat-x bottom center;
	color:#f3dcd0;
	font-size:10px; }
#footercontainer {
	width:940px;
	margin:0 auto; }
#footerimg {
	position:relative;
	height:172px; }
#footerimg ul {
	position:relative;
	z-index:100;
	float:left;
	margin:0 0 0 17px; padding:14px 0 0 0; }
#footerimg li {
	float:left;
	list-style-type:none;
	display:inline;
	margin-right:10px;}
#footerimg li a {
	display:block;
	outline:none;
	width:16px; height:16px;
	text-indent:-9999px; }
#footerimg li a.facebook { background:url(http://mary.codes/images/socialsprites.png) no-repeat top left; }
#footerimg li a.linkedin { background:url(http://mary.codes/images/socialsprites.png) no-repeat -16px 0px; }
#footerimg li a.slack { background:url(http://mary.codes/images/socialsprites.png) no-repeat -32px 0px; }
#footerimg li a.medium { background:url(http://mary.codes/images/socialsprites.png) no-repeat -48px 0px; }
#footerimg li a.github { background:url(http://mary.codes/images/socialsprites.png) no-repeat -64px 0px; }
#footerimg li a.twitter { background:url(http://mary.codes/images/socialsprites.png) no-repeat -80px 0px; }
	#footerimg li a:hover.facebook { background:url(http://mary.codes/images/socialsprites.png) no-repeat bottom left; }
	#footerimg li a:hover.linkedin { background:url(http://mary.codes/images/socialsprites.png) no-repeat -16px -16px; }
	#footerimg li a:hover.slack { background:url(http://mary.codes/images/socialsprites.png) no-repeat -32px -16px; }
	#footerimg li a:hover.medium { background:url(http://mary.codes/images/socialsprites.png) no-repeat -48px -16px; }
	#footerimg li a:hover.github { background:url(http://mary.codes/images/socialsprites.png) no-repeat -64px -16px; }
	#footerimg li a:hover.twitter { background:url(http://mary.codes/images/socialsprites.png) no-repeat -80px -16px; }
#copyright {
	margin-top:8px;
	float:left; 
background-color:#4f4f4f;
color: white;}
#footernav ul { 
	float:right;
	margin:8px 0 0 0;
	padding:0; }
#footernav li { display:inline; margin-left:8px; }
#footernav li a { color:#f3dcd0; }
#footernav li a:hover { color:#fff; }
.findme {
	position:relative;
	z-index:100;
	padding-top:10px;
	width:120px;
	float:left;
	color: transparent;
	background:transparent url(http://mary.codes/images/doubleslash.png) no-repeat right 13px; }
/*  Footer Image DIVs  */
a.top {
	position:absolute;
	top:15px; right:200px;
	z-index:100;
	width:45px; height:97px;
	padding:0; margin:0;
	display:block;
	text-indent:-9999px;
	outline:none;
	background:url() no-repeat 0 0; }
a:hover.top { width:54px; background-position:-45px 0; }