/*
Theme Name: Creative Agency White
Theme URI: http://www.fredrikdanielsson.se/
Description: 
Version: 3.0
Author: Fredrik Danielsson
Author URI: http://www.fredrikdanielsson.se/
Tags: White, Minimalistic
*/

/*

General Text color Dark Gray: #79c41f
Sidebar Text Color Ligth Gray: #6b727d

*/

/* =========== */
/* ! GENERAL   */
/* =========== */

body {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	line-height: 20px;
	color: #000;
	margin: 0;
	padding: 0; 
	background-color: #ededed;
}

body.single-post,
body.blog 
{
	background: #fff url(images/wave_blog.gif) center top repeat-x;
}

textarea, input {
	font-family: Georgia, "Times New Roman", Times, serif;
}

a, 
a:visited,
a:active {
	color: #ff5400;
	text-decoration: none;
}
a:hover, a:focus {
	color: #79c41f;
}

h1 {
	margin: 0;
}

h2 {
	text-transform: uppercase;
	color: #000;
	font-size: 24px;
	line-height: 26px;
	font-weight: normal;
	margin: 0 0 10px 0;	
}

h2 a,
h2 a:visited,
h2 a:active {
	color: #000;	
	text-decoration: none;
	background: none;
}

h2 a:hover, h2 a:focus { color: #79c41f; background-color:transparent; }

h3 {
	font-size: 16px;
}

.wrap {
	width: 960px;
	margin: 0 auto 0 auto;
	padding: 0 0px 0 0;
	position: relative;
}

img {
	border: none;
}

.alignright {float: right; margin: 0 0 0 10px;}
.alignleft {float: left; margin: 0 10px 0 0;}

.move-aside {
	position: absolute;
	left:-9999px;
	width: 1px;
	height: 1px;
	top:-9999px;
}

.clear {clear: both; overflow: auto;}

/* =========== */
/* ! BUTTONS   */
/* =========== */

.button {
	color: #000;
	float: left;
	padding: 0px 22px 3px 0px;
	height: 27px;
	border: 0;
	cursor: pointer;	
	color: #000;
	background: transparent url(images/button-normal-right.png) no-repeat scroll right top;
	font-family: Arial, sans-serif;
	font-size: 14px;
	line-height: 18px;
}

.button span {
	display: block;
	padding: 0px 0 3px 22px;
	height: 27px;
	white-space: nowrap;
	line-height: 27px;
	background: transparent url(images/button-normal-left.png) no-repeat scroll left top;
}

.button:hover  { background-position: right -30px; color: #000; }
.button:hover span  { background-position: left -30px; }
.button:active, .button:focus   { background-position: right -60px; outline: none; color: #000; }
.button:active span, .button:focus span  { background-position: left -60px; outline: none;}

button::-moz-focus-inner /* fixing evil default firefox padding */ {  
	padding:0;  
	border:none;  
}

/* ========== */
/* ! HEADER   */
/* ========== */

#header {
	margin:0px 10px 0 10px;
	position: absolute;
	font-family: Arial, "sans-serif";
	font-size:16px;	
	line-height:20px;
	width: 100%;
	top:80px;
	left: 0;
	right: 0;
	z-index: 1000;
}

#header h1 {
	font-size:16px;	
	line-height:20px;	
	font-weight:normal;
	left:80px;
	position:absolute;
	top:14px;
	width:360px;
}

h1 a,
h1 a:hover,
h1 a:focus {background-color: transparent;}


#header img {
	border: none;
}

#header ul {
    left: 640px;
    list-style: none;
    margin: 0 0 0;
    padding: 0;
    position: absolute;
    top: 14px;
}

#header ul li {
	float: left;
	margin:0 0 0 13px;
	padding:0 0 0 30px;	
	background: url(images/divider.png) left center no-repeat;
	line-height: 40px;
}
#header ul li:first-child {background: none;}

#header ul a { color: #000;}

body.page-template-page-start-php #header ul {
	display: none;
}

/* ================ */
/* ! SCREEN INTRO   */
/* ================ */

#screens {
	width: 100%;
	height: 560px;
	overflow: hidden;
	position: relative;
	margin: 0 0 20px 0;
}

#screenwrap {
	width: 9999px;
	position: absolute;
	top:0;
	left: 0;
}

#screenIntro {
	height: 560px;
	width:960px;
	float: left;
	position: relative;
}

#screenIntro .introduction {
	width: 560px;
	margin: 245px 10px 40px;
	z-index: 20;
	position: relative;
}

#screenIntro .introduction h2 {
	font-weight: normal;	
	margin: 0px 0 35px 0;
	font-size: 40px;
	text-transform: uppercase;
	line-height: 48px;	
	position: relative;
	clear: both;
}

#screenIntro .introduction a {
	font-family: Arial, sans-serif;
	font-size: 16px;
	line-height: 20px;
	height: 54px;
	display: block;
	float: left;
	padding: 0px 22px 0px 0px;
	background: transparent url(images/button-big-right.png) no-repeat scroll top right;
	color: #fff;
}

#screenIntro .introduction a span {
	background: transparent url(images/button-big-left.png) no-repeat scroll top left;
	display: block;
	padding: 5px 0 9px 22px;
	height: 40px;
}

#screenIntro .introduction a:hover  { background-position: right -54px; }
#screenIntro .introduction a:hover span  { background-position: left -54px; }
#screenIntro .introduction a:active, .intro a:focus   { background-position: right -108px; outline: none; }
#screenIntro .introduction a:active span, .intro a:focus span  { background-position: left -108px; outline: none;}


#screenIntro .portrait video,
#screenIntro .portrait img {
	width: 620px;
	height: 560px;
	position: absolute;
	top:0px;
	left:370px;
	z-index: 10;
}


/* ======================= */
/* ! SCREEN WORK WITH ME   */
/* ======================= */

#screenWhatIDo {
	height: 560px;
	width:960px;
	float: left;
	position: relative;
}	

#screenWhatIDo div {
	position: absolute;
	z-index: 10;
	right:-180px;
	margin: 0px;
	background: transparent url(images/what-i-do-bgr.png) scroll no-repeat 0 0;
	color: #fff;
	font-size: 18px;
	line-height: 25px;
	font-family: "nudista-web-1","nudista-web-2",sans-serif;	
	padding: 40px 20px 16px 20px;
	width: 240px;
}


h2.what-i-do {
	font-weight: normal;	
	margin:260px 60px 0 90px;
	font-size: 30px;
	text-transform: uppercase;
	line-height: 40px;	
	width: 790px;
	position: relative;
	z-index: 2;		
}

h2.what-i-do > span {
	position: relative;
	cursor: pointer;
	z-index: 5;
}

h2.what-i-do > span span {
	position: absolute;
	display: none;
	z-index: 10;
	right:-180px;
	margin: 0px;
	background: transparent url(images/what-i-do-bgr.png) scroll no-repeat 0 0;
	color: #fff;
	font-size: 18px;
	line-height: 25px;
	font-family: "nudista-web-1","nudista-web-2",sans-serif;	
	padding: 40px 20px 16px 20px;
	width: 240px;
}

h2.what-i-do span.a { 
	color: #e15958; /*red*/
}
h2.what-i-do span.a span {
	width: 320px;
	top: 0;
	right: -260px;
}

h2.what-i-do span.b { 
	color: #b3cd6c; /*green*/
}
h2.what-i-do span.b span { 
	width: 420px;
	left: 100px;
	top: 0;
}

h2.what-i-do span.c { 
	color: #84ccea; /*blue*/	
}

h2.what-i-do span.c span {
	width: 540px;
	top: 0;
	left: -380px;
	background-image: url(images/what-i-do-bgr-2.png);
	background-position: top right;
}

h2.what-i-do span.d { 
	color: #f7941d; /*orange*/	
}
h2.what-i-do span.d span { 
	top: 0;
}

h2.what-i-do span.e { 
	color: #f50077; /*orange*/	
}
h2.what-i-do span.e span {
	width: 340px;
	top: 0px;
	right: -280px;
}

h2.what-i-do span.f { 
	color: #90007C; /*orange*/	
}
h2.what-i-do span.f span { 
	width: 320px;
	top: 0px;
	left: -160px;
	background-image: url(images/what-i-do-bgr-2.png);
	background-position: top right;

}

h2.what-i-do span.g { 
	color: #8BCA29; /*orange*/	
}
h2.what-i-do span.g span {
	width: 320px;
	right: -260px;
	bottom: 0px;
	background-image: url(images/what-i-do-bgr-3.png);
	background-position: bottom left;
	padding: 20px 20px 36px 20px;	
}


h2.what-i-do span.h { 
	color: #123893; /*orange*/	
}
h2.what-i-do span.h span { 
	width: 200px;
	right: -140px;
	bottom: 0px;
	background-image: url(images/what-i-do-bgr-3.png);
	background-position: bottom left;
	padding: 20px 20px 36px 20px;	
}

h2.what-i-do span.i { 

}
h2.what-i-do span.i span { 
	width: 280px;
	right: -120px;
	bottom: 0px;
	background-image: url(images/what-i-do-bgr-4.png);
	background-position: bottom left;
	padding: 20px 20px 36px 20px;	
}
h2.what-i-do span.i span a {
	color: #fff;
	border-bottom: 2px dotted #fff;
}
h2.what-i-do span.i span a:hover,
h2.what-i-do span.i span a:focus {
	color: #166359;
	border-bottom-color: #166359;	
}

/* End of what-i-do */
#screenWhatIDo p.return {
	position: absolute;
	top: 140px;
	right: 10px;
}
#screenWhatIDo p.return a {
	padding:0 5px 8px 15px;	
	background: url(images/returnarrow.png) no-repeat right bottom transparent scroll;	
}
#screenWhatIDo p.return a:hover,
#screenWhatIDo p.return a:focus
 { background-image: url(images/returnarrow_hover.png); }
 
.contactarrowoverlay {
	background:url("images/contactarrow.png") no-repeat scroll 0 0 transparent;
	height:330px;
	position:absolute;
	right:-40px;
	top:-120px;
	width:320px;
	display: none;
} 

/* =========== */
/* ! METABAR   */
/* =========== */

.from-the-blog {
	float: left;
	width: 460px;
	margin: 0 10px 20px 10px;
	position: relative;
	z-index: 10;
}

.from-the-blog .article {
	margin-bottom: 14px;
	padding: 0;
}

.from-the-blog h2 {
	font-size: 16px;
	line-height: 18px;
	border-bottom: 1px solid #b2b2b2;
	margin: 10px 240px 12px 0;
	padding: 0 0 10px 0; 
	font-weight: normal;
	text-transform: uppercase;		
}

.from-the-blog h3 {
	font-size: 14px;
	line-height: 18px;
	margin: 0;
	font-family: Arial, "sans-serif";
}

.from-the-blog p {
	margin: 0;
}

.from-the-blog h3 a {
	background-image: none;
	color: #000;
}

.from-the-blog h3 a:hover, .from-the-blog h3 a:focus {
	color: #31bae6;
}



.spotlight {
	float: left;
	margin: 0 10px 0 10px;
	width: 220px;
	position: relative;
	z-index: 10;
}

.spotlight .area {
	cursor: pointer;
}

.spotlight .area img {
	vertical-align: bottom;
	float: left;
	margin: 5px 20px 10px 10px;
}

.spotlight h2 {
	font-size: 16px;
	line-height: 18px;
	border-bottom: 1px solid #b2b2b2;
	margin: 10px 0 12px;
	padding: 0 0 10px 0;
	font-weight: normal;
	text-transform: uppercase;	
}

.spotlight p {
	margin-top: 8px;
}

.spotlight .areaposition {
	text-align: center;
}

.spotlight .areaposition img {
	margin: 0 1px;
}

.spotlight ul {
	margin-top: 8px;
	padding: 0 0 0 14px;
}

.tweets {
	float: left;
	width: 220px;
	margin: 0 10px 0 10px;
	position: relative;
	z-index: 10;	
}

.tweets .tweet {
	padding: 43px 0px 0px 50px;
	background: url(images/tweetsbgr3.png) no-repeat 2px 5px transparent;
	word-wrap:break-word;
	margin: 0;
}

.tweets .follow {
	font-size: 11px;
	text-align: right;	
}

.tweets .follow a:hover, .tweets .follow a:focus {
	color: #999;
}

form input {
	background: url(images/input.png) 0 0 transparent;
	border: none;
	font-size: 14px;
	line-height: 18px;	
	height: 18px;
	width: 210px;
	padding: 5px 5px 6px;
	margin: 0 0 14px 0;
	color: #777;
}

form input:focus {
	background: url(images/input.png) 0 -40px transparent;
}

/* ======== */
/* ! BLOG   */
/* ======== */

#maincol {
	position: relative;
	float: left;
	width: 600px;
	margin: 265px 0px 0 10px;
}

#maincol .post {
	position: relative;
	margin: 0px 0 80px 0;

}

#maincol .post .meta {
	width: 200px;
	padding: 0 0 5px 0;
	margin: 0 0 20px 0;
	font-size: 11px;	
	border-bottom:1px solid #ccc;
	color: #666;
	text-transform: uppercase;
	font-family: Arial, "sans-serif";
}

#maincol .post ol li {
	margin-bottom: 1em;
}

/* ============================ */
/* ! GENERAL SINGLE POST/PAGE   */
/* ============================ */

#singlemeta {
	width: 200px;
	padding: 0 0 5px 0;
	margin: 0 0 20px 0;
	font-size: 11px;	
	border-bottom:1px solid #ccc;
	color: #666;
	text-transform: uppercase;
	font-family: Arial, "sans-serif";	
}

/* =========== */
/* ! SIDEBAR   */
/* =========== */

#sidebar {
	position: relative;
	float: left;
	width:220px;
	margin: 265px 0 0 80px;
	font-family: Arial, "sans-serif";	
	font-size: 12px;
	line-height: 18px;
	color: #666666;	
}

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

#sidebar > ul > li {
	margin: 0 0 40px 0;
}

#sidebar > ul > li:first-child {
/* 	border-top: 3px solid #cccccc; */
/* 	border-bottom: 3px solid #cccccc;	 */
	padding: 0 0 20px 0;
}

#sidebar h3 {
	font-size: 16px;
	line-height: 18px;
	border-bottom: 1px solid #b2b2b2;
	margin: 10px 0 12px;
	padding: 0 0 10px 0;
	font-weight: normal;
	text-transform: uppercase;	
	color: #000;
}

#sidebar h3 a {
	color: #000;
}

#sidebar li.widget_twitter li.twitter-item {
	border-left:3px solid #DFF5F2;
	margin:10px 0 0;
	padding:0 0 0 5px;
}



/* =============== */
/* ! PAGE LAYOUT   */
/* =============== */

body.single #maincol h2 {
	font-size: 42px;
	line-height: 45px;
}

/* ================= */
/* ! MODIFICATIONS   */
/* ================= */

/* ========== */
/* ! FOOTER   */
/* ========== */


#footer {
	clear: both;
	font-size:13px;
	line-height:18px;
	font-family: Arial, "sans-serif";	
}

#footer .contactinfo {
	width:220px;
	float: right;
	padding:30px 10px 30px 10px;
}
#footer .contactinfo span {
	display: block;
	margin: 0;
}

#footer #cred {
	width:360px;
	float: left;
	background:url("images/cc.png") no-repeat scroll 0 50% transparent;
	padding:30px 10px 30px 80px;
	margin-left: 10px;
}



#footer a {color: #000;}
#footer a:hover,
#footer a:focus {
	color:#31bae6;
}



/* =========== */
/* ! DEVICES   */
/* =========== */



@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) {

#wrap {
	width: 100%;
}

#header {
	margin: 80px 60px 0 60px;
}

#maincol {
	width: auto;
	margin: 265px 60px 0 60px;
/* 	background: #ff0; */
}

}