/*
Theme Name: UPSWELL
Theme URI: 
Description: Clean Grid
Version: 1.0
Author: UPSWELL
Author URI: http://www.hello-upswell.com
Tags: clean, grid
*/



/* MAIN STYLES */

.fix {
	padding-top: 10px;
	}

html, body {
	height: 100%;
	margin: 0 auto;
	font-family:"Myriad Pro","Lucida Grande","Lucida Sans Unicode",Verdana,Geneva,Helvetica,Arial,sans-serif;
	font-size: 14px;
	color: #595a4f;
	}

#header {
	margin-top: 10px;
	}
	
#footer {
	margin: 10px 0;
	}
	
.sidebar {
	margin: 20px 0 0 0;
	padding: 20px;
	border: 1px solid #A7A8AA;
	}
	
.module {
	margin: 20px 0 0 0;
	padding: 20px;
	border: 1px solid #A7A8AA;
	}
	
.blog_module {
	margin: 20px 0 0 0;
	padding: 30px;
	border: 1px solid #A7A8AA;
	}

.proj_contain {
	margin: 20px 0 0 0;
	padding: 20px;
	border: 1px solid #A7A8AA;
	}

.proj {
	height: 520px;
	margin: 20px 0 0 0;
	padding: 20px;
	border: 1px solid #A7A8AA;
	}
	
.grid_12 {
	margin-top: -30px;
	margin-bottom: 20px;
	}
	
.blog_ex_sub {
	margin: -14px 0 10px 0;
	padding: 0;
	color: #A7A8AA;
	}
	
.bottom {
	margin: 0;
	padding: 20px 0;
	position: absolute;
	clear: both;
	bottom: 0;
	}
	
.contact {
	margin: 0;
	padding: 0;
	width: 245px;
	text-align: right;
	float: right;
	} 
	
/* TYPE TREATMENT */

p {
	font-size: 14px;
	font-weight: normal;
	line-height: 140%;
	padding: 10px 0;
	height: 1%; /* For italics/IE6 bug */
    overflow: visible; /* For italics/IE6 bug */
	}
	
h1, h2 {
	margin: 0;
	padding: 0;
	font-size: 14px;
	color: #621A4B;
	font-weight: normal;
	}
	
.blog_headline {
	font-size: 14px;
	color: #621A4B;
	font-weight: normal;
	margin-bottom: 10px;
	padding: 0;
	}
	
.excerpt_headline {
	margin: 0;
	padding: 0;
	font-size: 14px;
	letter-spacing: 1px;
	color: #621A4B;
	font-weight: normal;
	}
	
.excerpt {
	font-size: 14px;
	color: #621A4B;
	font-weight: normal;
	padding: 0;
	}
	
.headline {
	margin: 0;
	padding: 0 0 5px 0;
	font-size: 14px;
	color: #621A4B;
	font-weight: normal;
	text-indent: 3px;
	}
	
.content_sub {
	margin: 0;
	padding: 0;
	color: #A7A8AA;
	}
	
.copy {
	font-size: 11px;
	letter-spacing: 2px;
	}	
	
.widgettitle {
	margin-bottom: 14px;
	color: #A7A8AA;
	font-size: 13px;
	font-style: normal;
	}
	
blockquote {
	border-left : 1px dotted #621A4B;
	width: 380px;
	margin: 20px;
	padding: 0 10px 0 10px;
	font-style: italic;
	font-size: 12px;
	}
	
.homepage_quote {
	margin: 0; 
	padding:0;
	font-weight: bold; 
	letter-spacing: 1px;
	font-size: 15px; 
	}
	
.homepage_subquote {
	font-style: italic;
	font-size: 13px;
	}
		
	
/* LINKS/LISTS */

a {
	text-decoration: none;
	color: #621A4B;
	}
	
a:hover {
	text-decoration: none;
	color: #A7A8AA;
	}
	
ul {
	list-style-type: disc;
	list-style-position: inside;
	color: #621A4B;
	margin-left: 0;
	padding-left: 0;
	}
	
ol {
	list-style-type: decimal;
	list-style-position: inside;
	padding-left: 0;
	margin-left: 0;
	}
	
.blog_excerpts ul {
	margin: 0;
	padding: 0;
	list-style: none;
	padding-left: 1em;
	text-indent: -1em;
	}
	
.blog_excerpts li {
	margin-bottom: 14px;
	padding: 0;
	list-style: none;
	line-height: 130%;
	}

.blog_excerpts li p {
	margin: 0;
	padding: 0;
	color: #595a4f; 
	font-size: 12px;
	line-height: 130%;
	}
	
.sidebar ul {
	margin: 0 0 20px 0;
	list-style: none;
	
	}
	
.sidebar li {
	padding: 0;
	text-indent: 0;
	font-size: 11px;
	font-style: italic;
	}
	
.about_list {
	margin-bottom: 14px;
	padding: .5px 0;
	list-style: none;
	text-indent: 1.5em;
	}
	
.about_list li {
	margin-bottom: 2px;
	font-style: italic;
	color: #A7A8AA;
	}

/* FLOATING ELEMENTS */

.float_left {
	float: left;
	}
	
.float_right {
	float: right;
	}
	
.center {
	text-align: center;
	}
	
.blog {
	margin: 10px 0;
	}
	
/* NAVIGATION */

#nav_bar {
	margin: 5px 0;
	padding: 0;
	float: right;
	}
	
#nav_bar ul {
	padding: 0;
	text-indent: 0;
	list-style: none;
	}
	
	
#nav_bar li {
	margin: 0 5px;
	padding: 0;
	list-style: none;
	float: left;
	}
	
#nav_bar li a {
	text-decoration: none;
	display: block;
	}	
	
#nav_about {
	display: block;
	width: 123px;
  	height: 20px;
  	background: url("./img/nav_about.png") no-repeat 0 0;
	}
	
#nav_projects {
	display: block;
	width: 75px;
  	height: 20px;
  	background: url("./img/nav_projects.png") no-repeat 0 0;
	}	
	
#nav_blog {
	display: block;
	width: 45px;
  	height: 20px;
  	background: url("./img/nav_blog.png") no-repeat 0 0;
	}
	
#nav_about:hover, #nav_blog:hover, #nav_projects:hover { 
  	background-position: 0 -20px;
	}
	
#nav_about span, #nav_blog span, #nav_projects span {
 	display: none;
	}
	
body#about a#nav_about,

body#blog a#nav_blog,

body#projects a#nav_projects {

	text-decoration: none;

	display: block;

	background-position: 0 -20px;

	}
	
/* LEFT/RIGHT COLUMNS */

.proj_left, .proj_right {width: 49%; }
.proj_left {float: left; }
.proj_right {float: right; }

body .leftcolumn, body .rightcolumn {width: 45%; }
body .leftcolumn {float: left; margin: 0; }
body .rightcolumn {float: right; margin: 0; }
body .leftcolumn p {padding-right: 0.5em; }
body .rightcolumn p {padding-left: 0.5em; }
body .topcolumn {clear: both; }

/* SIFR */

@media screen {
  .sIFR-flash {
    visibility: visible !important;
    margin: 0;
    padding: 0;
  }
  
  .sIFR-replaced, .sIFR-ignore {
    visibility: visible !important;
  }
  
  .sIFR-alternate {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    display: block;
    overflow: hidden;
  }
  
  .sIFR-replaced div.sIFR-fixfocus {
    margin: 0pt; 
    padding: 0pt; 
    overflow: auto; 
    letter-spacing: 0px; 
    float: none;
  }
}

@media print {
  .sIFR-flash {
    display    : none !important;
    height     : 0;
    width      : 0;
    position   : absolute;
    overflow   : hidden;
  }
  
  .sIFR-alternate {
    visibility : visible !important;
    display    : block   !important;
    position   : static  !important;
    left       : auto    !important;
    top        : auto    !important;
    width      : auto    !important;
    height     : auto    !important;
  }
}

/*
Place CSS rules for to-be-replaced elements here. Prefix by .sIFR-active
so they only apply if sIFR is active. Make sure to limit the CSS to the screen
media type, in order not to have the printed text come out weird.
*/
@media screen {
	
	.sIFR-active h2.headline {
    visibility: hidden;
    }
  
	.sIFR-active h2.blog_headline {
    visibility: hidden;
    }
  
	.sIFR-active p.info {
   	visibility: hidden;
   	}
    
}