/* ----------------------------------------------------------------
 * FILE: layout.css
 * ----------------------------------------------------------------
 * Created: 05-01-09 (dd-mm-yy)
 * Template: Clean Palette
 *
 * ----------------------------------------------------------------
 * TOC:
 * ----------------------------------------------------------------
 * - GLOBAL
 *   - HEADERS
 *   - TEXT
 *   - LINKS
 *   - IMAGES
 *   - LISTS
 *   - TABLES
 *   - FORMS
 *   - CLASSES 
 *     - IMAGES
 *     - LINKS
 *     - ICON-LIST 
 * - SKIP-LINK
 * - CONTAINER
 * - HEADER
 *   - LOGO
 *   - NAVIGATION
 * - CONTENT
 *   - MAIN
 *   - SUB
 *   - BREADCRUMB
 *   - LATEST WORK
 *   - CLASSES
 *     - COL
 *     - ICONS
 *     - INTRO
 *     - FRAME
 * - FOOTER
 * ---------------------------------------------------------------- 
*/

/* ---------------------------------------------------------------- 
 * GLOBAL
 * ---------------------------------------------------------------- 
*/ 
html { 
height: 100%;}

body {	
height: 100%;
margin: 0;	
padding: 0;}	

/* ---------------------------------------------------------------- 
 * GLOBAL > HEADERS
 * ---------------------------------------------------------------- 
*/ 
h1, h2, h3, h4, h5, h6 { 
margin: 0; 
padding: 0;
clear: left;}

h1 { 
margin-bottom: 20px; 
padding: 30px 0 0;}

h2 { 
margin-bottom: 20px; 
padding-top: 30px;}

h3 { 
margin-bottom: 15px; 
padding-top: 30px;}

h4 { 
margin-bottom: 10px; 
padding-top: 30px;}

h5 { 
margin-bottom: 5px; 
padding-top: 30px;}	

h6 { 
margin-bottom: 0; 
padding-top: 20px;}

/* ---------------------------------------------------------------- 
 * GLOBAL > TEXT
 * ---------------------------------------------------------------- 
*/ 
p { 
margin: 15px 0;}

pre, code, blockquote { 	
display: block; 	
margin: 25px 0; 
padding: 15px; 
clear: both;}

blockquote { 
padding-top: 0;
padding-bottom: 20px;}	

blockquote > div {
padding: 1px;}

blockquote p {
margin-bottom: 0;}

.quote-author {
margin: 20px -15px -20px;
padding-top: 35px;}

/* ---------------------------------------------------------------- 
 * GLOBAL > LINKS
 * ---------------------------------------------------------------- 
*/ 
a { 
white-space: nowrap;}

a.btn {
padding: 3px 8px;
margin: 0px 3px 10px 0;
display: inline-block;}    

/* ---------------------------------------------------------------- 
 * GLOBAL > IMAGES
 * ---------------------------------------------------------------- 
*/ 
img { 
padding: 5px;}

img.right { 
margin: 5px 0 15px 30px;}

img.left { 
margin: 5px 30px 15px 0;}

/* ---------------------------------------------------------------- 
 * GLOBAL > LISTS
 * ---------------------------------------------------------------- 
*/ 
ul, ol, dl { 
margin: 15px 0 15px 20px; 
padding: 0;}

ul ul, ol ol { 
margin-top: 0; 
margin-bottom: 0;}

ol { 
margin-left: 25px;}

dl { 
margin-left: 0;}	

dl dt { 
margin-top: 15px; 
font-weight: bold;}	

dl dd { 
margin: 0;}

/* ---------------------------------------------------------------- 
 * GLOBAL > TABLES
 * ---------------------------------------------------------------- 
*/ 
table { 
margin: 20px 0;
border-collapse: collapse;}    

table thead th,
table tfoot th,
table tfoot td { 
padding: 5px 15px;}

table tbody th, 
table tbody td { 
padding: 5px 15px;}

/* ---------------------------------------------------------------- 
 * GLOBAL > FORMS
 * ---------------------------------------------------------------- 
*/  
form {  
margin: 30px 0 0; 	
padding: 0;}

form fieldset { 
margin: 0;	
padding: 10px 30px;  
position: relative;}

form fieldset legend { 
display: inline; 
white-space: normal;}     

form fieldset br { 
clear: both;}

form fieldset label { 
clear: left;
display: block; 	
float: left; 	
margin: 1.5em 10px 0 0; 	
width: 150px;
vertical-align: middle;}	

form fieldset input,
form fieldset select,
form fieldset textarea {  
padding: 6px 8px;
vertical-align: middle;	
width: 65%; 
margin-top: 1em;}

form fieldset select { 
width: 68%;}    

form fieldset input[type="radio"],    
form fieldset input[type="checkbox"] { 
width: auto;
margin-left: 0;
margin-top: 1.5em;
padding: 0;}

form fieldset .small {  
width: 20%;}

form fieldset select.small {  
width: 23%;}

form fieldset .med {  
width: 40%;}

form fieldset select.med {  
width: 43%;}

form fieldset button {
margin: 1em 15px 1em 160px;
overflow: visible;
padding: 5px 7px;
vertical-align: middle;
width: auto;} 

form fieldset fieldset { 
margin: 1em 0 0.5em 160px; 
padding: 0;}

form fieldset fieldset legend span {
position: absolute !important;
left: -160px;
width: 150px;}    

form fieldset fieldset input[type="radio"],    
form fieldset fieldset input[type="checkbox"] { 
margin-top: 0;}

form fieldset fieldset label { 
clear: none;
float: none;
display: inline;
margin-right: 0;}   

/* ---------------------------------------------------------------- 
 * GLOBAL > CLASSES
 * ---------------------------------------------------------------- 
*/ 
.left { 
float: left !important;}

.right {
float: right !important;}

.hide { 
display: none;}

.clear:after,
.images:after,
.hr-bottom:after,
#content > div:after,
#header > div:after,
div[id]:after {
clear: both;
content: ".";	
display: block;
font-size: 0;	
height: 0;
visibility: hidden;}

.hr-top {
clear: both;
padding-top: 30px !important;
margin-top: 30px;}

.hr-bottom {
padding-bottom: 30px;
margin-bottom: 30px;}

.hr-bottom + h2,
.hr-bottom + h3,
.hr-bottom + h4,
.hr-bottom + h5,
.hr-bottom + h6 {
padding-top: 10px !important;}

.hr-right {
padding-right: 30px;
margin-right: 30px;}

.hr-left {
padding-left: 30px;
margin-left: 30px;}
	
/* ---------------------------------------------------------------- 
 * GLOBAL > CLASSES > IMAGES
 * ---------------------------------------------------------------- 
*/ 
.images {  
margin-left: -15px; 
margin-bottom: -20px; 
padding: 0 0 20px; 
width: 100%; 
height: 1%;}

.images li { 
float: left; 
margin: 0; 
padding: 0 0 20px 15px; 
position: relative;}    

.images li img { 
vertical-align: bottom;}	
	
/* ---------------------------------------------------------------- 
 * GLOBAL > CLASSES > LINKS
 * ---------------------------------------------------------------- 
*/ 
.links {
margin-left: 0;	
padding: 0;}	

.links li a {
display: block;
padding: 5px 10px;}

/* ---------------------------------------------------------------- 
 * GLOBAL > CLASSES > ICON-LIST
 * ---------------------------------------------------------------- 
*/     
ul.icon-list {
list-style-type: none;
margin: 0;
padding: 0;}    

ul.icon-list li {
color: #000;
padding-left: 85px;
background-position: left top;
min-height: 70px;
margin-top: 15px;}    

ul.icon-list li p { 
margin-top: 0;}
    
/* ---------------------------------------------------------------- 
 * SKIP-LINK
 * ---------------------------------------------------------------- 
*/ 
#skip-link {
display: block;
left: -9999px;	
padding: 10px 20px;
position: absolute;
top: 0;}

#skip-link:focus { 
left: 0;}

/* ---------------------------------------------------------------- 
 * CONTAINER
 * ---------------------------------------------------------------- 
*/    
#container {
width: 960px;
margin: 0 auto;}
    
/* ---------------------------------------------------------------- 
 * HEADER
 * ---------------------------------------------------------------- 
*/      
#header {
width: 960px;
margin-left: -10px;
padding: 0 10px 19px;}

#header > div {
padding: 0 10px 0 40px;}

/* ---------------------------------------------------------------- 
 * HEADER > LOGO
 * ---------------------------------------------------------------- 
*/
#header a.logo {
float: left;
margin: 30px 0;} 
    
/* ---------------------------------------------------------------- 
 * HEADER > NAVIGATION
 * ---------------------------------------------------------------- 
*/    
#header ul {
list-style-type: none;
margin: 0;
padding: 0;
float: right;}

#header ul li {
float: left;}

#header ul li a {
padding: 30px 15px;
display: block;}

#header ul li.on a {
padding: 30px 15px;}

/* ---------------------------------------------------------------- 
 * INTRO
 * ---------------------------------------------------------------- 
*/    
#intro h1 {
padding: 20px 40px 40px;
margin: 0;}

#home #intro h1 {
padding: 50px 40px 70px;}

/* ---------------------------------------------------------------- 
 * CONTENT
 * ---------------------------------------------------------------- 
*/   
#content {
width: 960px;
margin-left: -10px;
padding: 0 10px 20px;}

#content > div {
width: 880px;
padding: 0 40px 40px;}   

/* ---------------------------------------------------------------- 
 * CONTENT > MAIN
 * ---------------------------------------------------------------- 
*/  
#content #main {
float: left;
width: 610px;}

/* ---------------------------------------------------------------- 
 * CONTENT > SUB
 * ---------------------------------------------------------------- 
*/  
#content #sub {
float: right;
width: 215px;}
    
/* ---------------------------------------------------------------- 
 * CONTENT > BREADCRUMB
 * ---------------------------------------------------------------- 
*/      
#breadcrumb {
margin: 0 -40px 10px;
padding: 0 40px;} 

#home #breadcrumb {
height: 15px;
line-height: 0;
margin-bottom: 0;}

/* ---------------------------------------------------------------- 
 * CONTENT > LATEST WORK
 * ---------------------------------------------------------------- 
*/  
#content #latest-work li {
position: relative;}

#content #latest-work p {
float: none;
margin-left: 0;
margin-top: 15px;
background-color:#000;}

#content #latest-work .details {
position: absolute;
top: 17px;
left: 17px;
width: 177px;
height: 140px;
padding: 0 15px;}

#content #latest-work li:hover .details {
display: block;}

.js #content #latest-work li:hover .details {
display: none;}

#content #latest-work .details p {
line-height: 1.5em;
font-size: 0.9em;}

/* ---------------------------------------------------------------- 
 * CONTENT > CLASSES > COL
 * ---------------------------------------------------------------- 
*/  
#content .col { 
float: left;
width: 274px;
margin-top: 30px;
margin-bottom: 15px;}

#content .hr-bottom + .col,
#content .hr-bottom + .col + .col {
margin-top: 0;}

#content .col > h2 {
padding-top: 0;}

/* ---------------------------------------------------------------- 
 * CONTENT > CLASSES > ICONS
 * ---------------------------------------------------------------- 
*/  
#content .icon-design,
#content .icon-dev {
padding-top: 18px !important;
padding-bottom: 6px !important;
margin-bottom: 0 !important;}    

#content .icon-design {
padding-left: 57px;}

#content .icon-dev {
padding-left: 50px;}

/* ---------------------------------------------------------------- 
 * CONTENT > CLASSES > INTRO
 * ---------------------------------------------------------------- 
*/  
#home #content .intro {
margin-top: 30px;}

/* ---------------------------------------------------------------- 
 * CONTENT > CLASSES > FRAME
 * ---------------------------------------------------------------- 
*/  
#content .frame img {
padding: 17px 5px 30px 2px;}

#content .frame p {
margin-top: 0;
margin-left: 250px;}

/* ---------------------------------------------------------------- 
 * FOOTER
 * ---------------------------------------------------------------- 
*/           
#footer { 
/* padding: 10px 30px 20px !important;*/ 
margin-bottom: 10px;} 
    
#footer p { 
margin: 0; 
float: left;}
 
 #footer ul {
list-style-type: none;
padding: 0;
margin: 0;
float: right;}

#footer ul li { 
display: inline; 
margin: 0 25px 3px 0;}

#footer ul li a {
white-space: nowrap;}