/*
Theme Name: Basic Black and White
Theme URI: http://ianlynam.com/
Description: Black & white
Version: 3.0
Author: Ian Lynam
Author URI: http://ianlynam.com/
*/

/* TYPOGRAPHY */

@font-face {
    font-family: "Conqueror Sans";
    src: url('fonts/AWConquerorSans-Light.otf');
    }

@font-face {
    font-family: "Conqueror Slab";
    src: url('fonts/AWConquerorSlab-Light.otf');
    }

@font-face {
	font-family: "Dolly";
	src: url("fonts/Dolly.eot");
	src: url("fonts/Dolly.eot?#iefix") format("embedded-opentype"),
			 url("fonts/Dolly.woff") format("woff"),
			 url("fonts/Dolly.ttf") format("truetype"),
			 url("fonts/Dolly.svg#filler") format("svg");
	font-weight: normal;
	font-style:  normal;
	}

@font-face {
	font-family: "Dolly";
	src: url("fonts/Dolly-Bold.eot");
	src: url("fonts/Dolly-Bold.eot?#iefix") format("embedded-opentype"),
			 url("fonts/Dolly-Bold.woff") format("woff"),
			 url("fonts/Dolly-Bold.ttf") format("truetype"),
			 url("fonts/Dolly-Bold.svg#filler") format("svg");
	font-weight: bold;
	font-style:  normal;
	}

@font-face {
	font-family: "Dolly";
	src: url("fonts/Dolly-Italic.eot");
	src: url("fonts/Dolly-Italic.eot?#iefix") format("embedded-opentype"),
			 url("fonts/Dolly-Italic.woff") format("woff"),
			 url("fonts/Dolly-Italic.ttf") format("truetype"),
			 url("fonts/Dolly-Italic.svg#filler") format("svg");
	font-weight: normal;
	font-style:  italic;
	}

@font-face {
	font-family: "DollySC";
	src: url("fonts/Dolly-SC.eot");
	src: url("fonts/Dolly-SC.eot?#iefix") format("embedded-opentype"),
			 url("fonts/Dolly-SC.woff") format("woff"),
			 url("fonts/Dolly-SC.ttf") format("truetype"),
			 url("fonts/Dolly-SC.svg#filler") format("svg");
	font-weight: normal;
	font-style:  normal;
    }

/* MAIN STYLES */

.clearfix:before,  
.clearfix:after {  
    content:" ";  
    display:table;  
}  
.clearfix:after {  
    clear:both;  
}  
.clearfix {  
    *zoom:1;  
}

.alignright { float: right; }

.alignleft { float: left; }

body {
    font-family: "Dolly", "Hoefler Text", Constantia, Georgia, "Hiragino Mincho ProN", Meiryo, serif;
    background-color: white;
    color: black;
    font-style: normal;
    text-align: left;
    padding: 0;
    margin: 0;
    border-top: 5px solid #000;
    }

#wrapper {
    max-width: 1024px;
    margin: 0 auto;
    background-color: #fff;
}

#header {
    background-color: #fff;
}

img {
    max-width:100%;
	height:auto;
    width:auto; /* for ie 8 */
}

.pagination-contain {
    font-family: "DollySC", "Hoefler Text", Constantia, Georgia, "Hiragino Mincho ProN", Meiryo, serif;
    letter-spacing: 3px;
    text-transform: lowercase;
    font-size: 1.2em;
    text-align: center;
    margin: 0 auto;
    width: 40%;
    padding: 5em 0;
}

.pagination-contain a { color: #666; text-decoration: none; }
.pagination-contain a:hover { color: #ED207B; text-decoration: none; }

.pagination-contain span { color: #ED207B; }

.error { text-align: center; }

blockquote { font-size: 1em; }

hr { margin: 0 1em; }

h3 {
    font-family: "DollySC", "Hoefler Text", Constantia, Georgia, "Hiragino Mincho ProN", Meiryo, serif;
    letter-spacing: 3px;
    text-transform: lowercase;
}

p > a { color: #ED207B; text-decoration: none; }
p > a:hover { color: #ED207B; text-decoration: none; }

/* NAVIGATION */

body#blog a#blog-nav {
	color: #2abcff;
	}

.logo a { color: black; background-color: white; text-decoration: none; }
.logo a:hover { color: black; background-color: white; text-decoration: none; }

.navbar {
    margin: 0;
    padding: 0;
    background-color: #fff;
    border: none;
}

#header > nav > div > div.navbar-header > div {
    font-family: DollySC, "Hoefler Text", Constantia, Georgia, "Hiragino Mincho ProN", Meiryo, serif;
    text-transform: lowercase;
    float: left;
    padding: 5px 0 0 0;
}

.logo {
    padding-bottom: 0 !important;
    margin-bottom: -25px !important;
}

#header > nav > div > div.navbar-header > div > a > p.name { 
    font-size: 16px;
    line-height: 1;
    letter-spacing: 2px;
    background-image: url(./images/logo.png);
    background-repeat: no-repeat;
    padding: 5px 0 0 50px;
    height: 50px;
}
    
#header > nav > div > div.navbar-header > div > p.description { /* japanese text */
    letter-spacing: 2px;
	line-height: 1;
	position: relative;
	margin: 0;
	top: -35px;
	left: 48px;
}

#navbar {
    text-align: center;
}

/* NAV ICON TRANSFORM */

.navbar-toggle {
    border: none;
    background: transparent !important;
}

.navbar-toggle:hover {
    background: transparent !important;
}

.navbar-toggle .icon-bar {
    width: 22px;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

.navbar-toggle .top-bar {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 10% 10%;
    transform-origin: 10% 10%;
}

.navbar-toggle .middle-bar {
    opacity: 0;
}

.navbar-toggle .bottom-bar {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 10% 90%;
    transform-origin: 10% 90%;
}

.navbar-toggle.collapsed .top-bar {
	-webkit-transform: rotate(0);
    transform: rotate(0);
}

.navbar-toggle.collapsed .middle-bar {
    opacity: 1;
}

.navbar-toggle.collapsed .bottom-bar {
	-webkit-transform: rotate(0);
    transform: rotate(0);
}

.navbar-default .navbar-toggle .icon-bar {
    color: #000 !important;
}

/* FRONT PAGE */

.tagline {
    font-size: 21px;
    line-height: 1.4em;
    text-align: center;
    margin: 0;
    padding: 1em;
}

.feat-image {
    position: relative;
}

.feat-image .feat-description {
    color: white;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgb(0, 0, 0); /* fallback color */
    background: rgba(0, 0, 0, 0.7);
    margin: 0;
}

.feat-description { padding: .5em; }

.feat-image h2 { font-size: 1.5em; }

.feat-image h2 a { color: white; text-decoration: none; background: none; }

.post { margin-bottom: 3em; }

.readmore { float: right; }

.readmore a { color: white; text-decoration: none; background: transparent;}
.readmore a:hover { color: white; text-decoration: none; background: transparent; border-bottom: 1px solid #ED207B; }

div.clients > ul {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
}

div.capabilities > ul {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

div.clients h3, div.capabilities h3 { text-align: center; padding-bottom: 1em; }

div.clients { padding: 2em 1em; }

div.testimonials { text-align: center; padding: 2em 1.5em; }

div.testimonials p { font-size: 1.5em; }

div.capabilities { text-align: center; padding: 2em 0 }

div.testes-meta { text-align: center; }

p.testes-person { 
    font-size: 2em;
    font-style: italic;
    margin-bottom: -.3em;
    padding: 0;
}

p.testes-company { 
    font-size: 1.5em;
}

/* WORKS */

#work-contain {
    margin-top: 2em;
}

/* WORK SINGLE */

.single-contain { margin-top: 2em; }

.single-contain p { text-align: left; font-size: 1.2em; padding: 0; }

.work-entry img { padding: 2em 0; }

.work-entry { padding: 0 1em; }

.single-contain .work-entry { margin-top: 2em; }

#related_posts { margin-bottom: 2em; }

#related_posts ul { list-style: none; padding: 0; margin: 0; }

#related_posts a { color: white; text-decoration: none; background: transparent;}
#related_posts a:hover { color: white; text-decoration: none; background: transparent; border-bottom: 1px solid #ED207B; }

.relatedcontain { padding-top: 1em; padding-bottom: 1em; }

.relatedthumb { position: relative; }

.relatedtitle {
    color: white;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgb(0, 0, 0); /* fallback color */
    background: rgba(0, 0, 0, 0.7);
    margin: 0;
    padding: 0;
}

.relatedtitle h4 { padding: 0 .5em; }

/* BLOG */

.blog-contain { text-align: center; }

.blog-contain .blog-thumb { padding-bottom: 2em; }

.blog-contain p { text-align: left; font-size: 1.3em; padding: 0 1em; }

.blog-contain h4 { font-style: italic; }

.blog-entry img { padding: 2em 0;  }

.blog-entry ul, .blog-entry ol { text-align: left; }

.social-icon {
    margin: 1em .5em;
    width: 32px;
    height: 32px;
    line-height: 34px;
    display: inline-block;
    border-radius: 50%;
}

.button-twit, .button-fb { background: #aaa; }

.share-social i {
    color: #fff;
}

a.social-icon.button-twit:hover { background: #00acf1; }
    
a.social-icon.button-fb:hover { background: #005c9f; }

/* PAGES */

.page-contain img { padding: 1em 0; display: block; margin: 0 auto; }

.page-contain .entry { padding-bottom: 2em; }

.page-contain p, .page-contain ul, .page-contain ol { font-size: 1.2em; }

.page-contain h1, .page-contain h2, .page-contain h3 { text-align: center; }

.page-contain p { padding: 0 1em 1em 1em; }

.page-contain .wp-caption { margin: 0 auto; text-align: center; max-width: 100%; }

.page-contain .wp-caption p { margin-bottom: 1em; padding: 0; color: #ED207B; font-size: 1em; }

/* FOOTER */

#footer {
    background-color: #000;
    text-align: center;
    padding: 4em 0 1em 0;
    color: #fff;
}

#footer-contain {
    margin: 0 auto;
    max-width: 1024px;
}  

.footer-cols {
    padding: 0;
    margin: 0;
}

.footer-cols ul {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
}

.copyright {
    padding-top: 1em;
    font-size: .7em;
}

#footer a:link    { color: white; background-color: black; text-decoration: none; }
#footer a:active  { color: white; background-color: black; text-decoration: none; }
#footer a:visited { color: white; background-color: black; text-decoration: none; }
#footer a:hover   { color: grey; background-color: black; text-decoration: none; }

/* 
/////////////
MEDIA QUERIES 
\\\\\\\\\\\\\
*/

@media (min-width:769px) and (max-width:1024px) {
 
#menu-header {
    display: inline-block;
    list-style: none;
    margin: 0;
    padding: .5em 0;
    float: right;
} 

#menu-header li {
    font-size: 16px;
    display: inline;
}
    
#menu-header li a { padding: 1em 0 0 1em; margin: 0; }
    
#footer { text-align:left; padding: 1em; }
    
.blog-contain p { text-align: left; font-size: 1.3em; padding: 0; }
    
}

@media only screen and (min-width: 1024px) {
    
/* MAIN STYLES */  
    
.tagline {
    font-size: 2em;
    margin: 0;
    padding: 1em 3em;
}
    
.pagination-contain {
    font-size: 1.5em;
    text-align: center;
    margin: 0 auto;
    width: 20%;
    padding: 5em 0;
}
    
h3 { font-size: 2em; } 
    
/* HOME */
    
div.clients > ul {
    list-style: none;
    font-size: 1.5em;
    padding-left: 0;
    margin-left: 0;
    -webkit-columns: 4;
    -moz-columns: 4;
    columns: 4;
}

div.capabilities > ul {
    list-style: none;
    font-size: 1.5em;
    padding-left: 0;
    margin-left: 0;
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
}

div.capabilities { text-align: left; }
    
/* NAVIGATION */
    
#header > nav > div > div.navbar-header > div {
    padding: 1em 0 0 0;
    margin: 0;
}

#header > nav > div > div.navbar-header > div > a > p.name { 
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 2px;
    padding: 0 0 0 50px;
}
    
#header > nav > div > div.navbar-header > div > p.description { /* japanese text */
    letter-spacing: 2px;
	line-height: 1;
	margin: 0;
	top: -35px;
	left: 48px;
}
    
#menu-header {
    display: inline-block;
    list-style: none;
    margin: 0;
    padding: .5em 0;
    float: right;
} 

#menu-header li {
    font-size: 19px;
    display: inline;
}
    
#menu-header li a { padding: 1em 0 0 1.5em; margin: 0; }
    
/* FRONT PAGE */

.feat-description {
padding: 1em 2em; 
}
    
.feat-description p {
    font-size: 1.5em;
}
    
.feat-description h2 {
    font-size: 2em;
}
    
div.testimonials p { font-size: 2em; }
    
/* WORK */
    
.single-contain { margin-top: 2em; }

.single-contain p { text-align: left; font-size: 1.3em; padding-bottom: 1em; }

.work-entry img { padding: 2em 0; }

.work-entry p { max-width: 600px; margin: 0 auto; }
    
.work-entry { padding: 0; }

.work-entry ol,
.work-entry ul {
    max-width: 600px; 
    margin: 0 auto;
    padding: 1em 0;
}

.work-entry ul li,
.work-entry ol li {
    margin-left: 1em;
}

.work-entry blockquote { padding: 0 2em;  margin: 1em auto; max-width: 600px;  font-size: 1em; }

.single-contain .work-entry { margin-top: 2em; }
    
#related_posts > ul > div > div:nth-child(1) { padding-left: 0; }
    
#related_posts > ul > div > div:nth-child(2) { padding-right: 0; }
    
/* BLOG */    
    
.blog-contain p { text-align: left; font-size: 1.3em; padding: 0; }
    
.blog-entry img { padding: 2em 0; }

.blog-entry p { max-width: 600px; margin: 0 auto; }
    
.blog-entry p + p { padding-bottom: 1em; }

.blog-entry ol,
.blog-entry ul {
    max-width: 600px; 
    margin: 0 auto;
    padding: 1em 0;
}

.blog-entry ul li,
.blog-entry ol li {
    margin-left: 1em;
}
    
.blog-entry blockquote { padding: 0 2em;  margin: 1em auto; max-width: 600px;  font-size: 1em; }

/* PAGES */  
    
.page-contain .entry p { max-width: 600px; margin: 0 auto; }
    
.page-contain .entry ol,
.page-contain .entry ul {
    max-width: 600px; 
    margin: 0 auto;
    padding: 1em 0;
}
    
.page-contain ul li,
.page-contain ol li {
    margin-left: 1em;
}
    
.page-contain p { padding: 1em 0; }
    
.page-contain .wp-caption p.wp-caption-text { margin: 0 auto; }
    
/* FOOTER */
    
#footer { text-align:left }
    
}