/*
Theme Name: MKLKM
Theme URI: http://mklkm.org
Description: Portfolio Theme
Version: 1.0
Author: Molly Lafferty
Author URI: http://mklkm.org
Tags: clean, portfolio, basic, serif
*/

@import "style/css/reset.css";
@import "style/css/typography.css";
@import "style/css/layout.css";
@import "style/css/960.css";

/* GENERAL STYLES */

body {
background-color: #fff;

background-image: url('strip.png');
background-repeat: repeat;

color: #202020;
font-family: Garamond, "Hoefler Text", "Times New Roman", Times, serif;
font-size: 15px;
line-height: 19px;
}

a, a:visited {
text-decoration: none;
color: #5b8c89;
}

a:hover {
color: #67b2ae;
}

.emph {
color:#999999;
font-family:"Century Gothic", "Apple Gothic", Arial, sans-serif;
font-size: 12px;
}

h2 {
color:#666666;
font-family:"Century Gothic", "Apple Gothic", Arial, sans-serif;
font-size:35px;
font-weight:normal;
letter-spacing:1px;
padding: 10px 0px 20px 10px;
}

.page-template-default p {
padding: 10px 0px;
}

/* HEADER STYLES */

#process_area p.pad {
padding-top: 10px;
}

#top {
height: 6px;
background: #68375e;
}
.logo {
margin-left:10px;


height:130px;
color: #202020;

}

.logoimg {
background-image: url('logo.jpg');
background-position: 0px 0px;
background-repeat: no-repeat;
width: 40px;
height: 40px;
text-indent: -9999px;
position: absolute;
margin-left: 270px;
}


.logoimg:hover {
background-image: url('result-2.png');
background-position: 0px -50px;
}

.logo h1 {
font-family:"Century Gothic", "Apple Gothic", Arial, sans-serif;
font-size:18px;
font-weight:normal;
height:20px;
letter-spacing:6px;
line-height:25px;
padding-top:60px;
text-transform:uppercase;
}

.logo h1 a {
color: #5b8c89;
}

.logo h1 a:hover {
color: #67b2ae;
}

.logo .tag {
font-family:"Century Gothic", "Apple Gothic", Arial, sans-serif;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 1px;
margin-top: 5px;
color: #68375e;
}

/* NAV STYLES */

.nav {
font-family:"Century Gothic", "Apple Gothic", Arial, sans-serif;
font-size:11px;
letter-spacing:3px;
text-align: right;
color: #999;
margin-top: 60px;
}

#menu {
color:#333333;
font-family:"Century Gothic", "Apple Gothic", Arial, sans-serif;
font-size:12px;
letter-spacing:3px;
position:absolute;
text-transform:uppercase;
z-index:100;
}

#menu a {
color: #666;
}

#menu1 {
clear: both;
}

#content {
padding: 70px 0px 30px 0px;
}

ul, li{
cursor: pointer
}

ul li.top {
border-bottom: 1px solid #b7b7b7;
border-top: 1px solid #b7b7b7;
padding: 5px 0px;
}

ul .item{
display:none;

}

ul:hover .item{
display:block;
background-color: #fff;
border-bottom: 1px solid #b7b7b7;
padding:5px 5px;
margin: 0px 0px 0px -5px;
}

ul:hover .top {
font-weight: bold;
}

ul:hover .item a{
color:#000;
text-decoration:none;
}

ul:hover .item a:hover{
color:#999;
font-weight: bold;
}

/* HOME PAGE STYLES */


ul:hover .about_home {
}

.index {
padding:55px 0 30px;
}

.sprite-web1 {
border: 0;
text-indent: -999px;
width: 220px;
height: 162px;
background-image: url('inspire.png');
margin-bottom: 15px; 
}

a:hover .sprite-web1 {

opacity: .8;
}

.sprite-motion1 {
border: 0;
text-indent: -999px;
width: 220px;
height: 162px;
background-image: url('dove.png');
margin-bottom: 15px; 
}

a:hover .sprite-motion1 {

opacity: .8;
}

.sprite-brand1 {
border: 0;
text-indent: -999px;
width: 220px;
height: 162px;
background-image: url('iwhr.png');
margin-bottom: 15px; 
}

a:hover .sprite-brand1 {

opacity: .8;
}

.betterbrainstorms {
border: 0;
text-indent: -999px;
width: 220px;
height: 162px;
background-image: url('bb.png');
margin-bottom: 15px; 
}

a:hover .betterbrainstorms {

opacity: .8;
}

.sternick {
border: 0;
text-indent: -999px;
width: 220px;
height: 162px;
background-image: url('sternick.png');
margin-bottom: 15px; 
}

a:hover .sternick {

opacity: .8;
}

.iplanit {
border: 0;
text-indent: -999px;
width: 220px;
height: 162px;
background-image: url('iplanit.png');
margin-bottom: 15px; 
}

a:hover .iplanit {

opacity: .8;
}

.adshop {
border: 0;
text-indent: -999px;
width: 220px;
height: 162px;
background-image: url('adshop.png');
margin-bottom: 15px; 
}

a:hover .adshop {

opacity: .8;
}
.whsp {
border: 0;
text-indent: -999px;
width: 220px;
height: 162px;
background-image: url('whsp.png');
margin-bottom: 15px; 
}

a:hover .whsp {

opacity: .8;
}

.oread {
border: 0;
text-indent: -999px;
width: 220px;
height: 162px;
background-image: url('oread.png');
margin-bottom: 15px; 
}

a:hover .oread {

opacity: .8;
}

.six_st {
border: 0;
text-indent: -999px;
width: 220px;
height: 162px;
background-image: url('16st.png');
margin-bottom: 15px; 
}

a:hover .six_st {

opacity: .8;
}

.cu {
border: 0;
text-indent: -999px;
width: 220px;
height: 162px;
background-image: url('cu.png');
margin-bottom: 15px; 
}

a:hover .cu {

opacity: .8;
}

.link_img {
border: 0;
text-indent: -999px;
width: 220px;
height: 162px;
background-image: url('result.png');
background-position: 0px 0px;
}

a:hover .link_img {
background-image: url('result.png');
background-position: 0px -172px;
}

/* PROJECT STYLES */

h1.project_title {
color:#666666;
font-family:"Century Gothic", "Apple Gothic", Arial, sans-serif;
font-size:35px;
font-weight:normal;
letter-spacing:1px;
line-height:40px;
margin:5px 0 0 0;
}

.project_type_img {
position: absolute;
margin-top:7px;
}

#summary {
font-family:"Century Gothic", "Apple Gothic", Arial, sans-serif;
font-size:15px;
line-height:20px;
margin-top:15px;
}

#site_link {
font-family:"Century Gothic", "Apple Gothic", Arial, sans-serif;
letter-spacing: 2px;
font-size: 14px;
text-align: right;
padding: 0px 0px 5px 0px;
border-bottom: 1px solid #b7b7b7;
}

#site_link a, #site_link a:visited {
text-decoration: none;
text-transform: uppercase;
}

#site_link a:hover {
}

.page-id-48 #processImages, .page-id-81 #processImages {
display: none;
}

/* PROBLEM, PROCESS, SOLUTIONS STYLES */

#problem_area, #process_area, #solution_area, #collab{
padding-top: 10px;
}

.text_right {
width: 300px;
margin-left: 140px;
padding-bottom: 10px;
}

.page-template-page-motion-php .text_right {
margin-top: 10px;
}



.divider {
border-bottom: 1px solid #b7b7b7;
}

p.problem_title, p.about_motion {
position: absolute;
text-transform: uppercase;
font-family:"Century Gothic", "Apple Gothic", Arial, sans-serif;
font-size: 12px;
letter-spacing: 1px;
color:#666666;
}

#processImages {
	border: 1px solid #999;
}

.main_image {
padding-bottom: 30px;
}

.page-id-74 #processImages {
display: none;
}
	
/* MOTION STYLES */

#about_motion, #video {
margin-top: 30px;
}

p.about_motion {
margin-top: 10px;
}

#collab .text_right p {
margin-top: -10px;
}

.page-template-page-custom-php #collab .text_right p, .page-template-page-tool-php #collab .text_right p, .page-template-page-soon-php #collab .text_right p {
margin-top: 0px;
}

.page-template-page-custom-php #about_motion .text_right {
padding-top: 10px;
}

#video {

}

.page-id-41 #collab {
display: none;
}

.page-id-87 #processImages {
display: none;
}

/* BRANDING STYLES */

#logo_img {
margin-top:28px;
}

.page-template-page-identity-php .text_right p {
margin-top: 10px;
}


/* IMG SLIDESHOW STYLES */
.slideshow{
height: 232px; 
width: 232px; 
margin: auto;
}

.slideshow img {
padding: 15px; 
border: 1px solid #ccc; 
}

div#controls{ 
background:none; 
margin-top:-34px;
position:absolute;
z-index:500;
margin-left: 3px;
font-family:"Century Gothic", "Apple Gothic", Arial, sans-serif;
}

div#controls a {
color: #999;
display:block; 
float:left; 
height:16px; 
font-weight: bold;
width:14px; 
text-decoration: none; 
margin: 7px 3px 3px 3px;
padding: 2px 0px 2px 8px;
}

div#controls a:hover {
color: #b5b5b5;
}

div#controls a.activeSlide {

color: #fff; 
}
 
div#controls a:focus {
outline: none;
}

/* NEXT/PREV LINK STYLES */
	
#prev_link, #next_link {
border-bottom:1px solid #B7B7B7;
border-top:1px solid #B7B7B7;
font-family:"Century Gothic", "Apple Gothic", Arial, sans-serif;
margin-top:30px;
padding:5px 0;
}

#next_link {
text-align: right;
}

#prev_link a, #prev_link a:visited, #next_link a, #next_link a:visited {
color:#333333;
font-family:"Century Gothic", "Apple Gothic", Arial, sans-serif;
font-size:11px;
letter-spacing:2px;
text-decoration:none;
}

#prev_link a:hover, #next_link a:hover {
color: #999;
}

/* FOOTER STYLES */

#footer {
text-align: right;
padding: 60px 10px 0px 10px;
height: 60px;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 10px;
font-family:"Century Gothic", "Apple Gothic", Arial, sans-serif;
}