@import url("reset.css");

/*

Copyright. Digitalmash 2002-2016. All Rights Reserved.

    ___       ___       ___       ___       ___       ___       ___   
   /\  \     /\  \     /\  \     /\  \     /\  \     /\  \     /\__\  
  /::\  \   _\:\  \   /::\  \   _\:\  \    \:\  \   /::\  \   /:/  /  
 /:/\:\__\ /\/::\__\ /:/\:\__\ /\/::\__\   /::\__\ /::\:\__\ /:/__/   
 \:\/:/  / \::/\/__/ \:\:\/__/ \::/\/__/  /:/\/__/ \/\::/  / \:\  \   
  \::/  /   \:\__\    \::/  /   \:\__\    \/__/      /:/  /   \:\__\  
   \/__/     \/__/     \/__/     \/__/               \/__/     \/__/  
    ___       ___       ___       ___   
   /\__\     /\  \     /\  \     /\__\  
  /::L_L_   /::\  \   /::\  \   /:/__/_ 
 /:/L:\__\ /::\:\__\ /\:\:\__\ /::\/\__\
 \/_/:/  / \/\::/  / \:\:\/__/ \/\::/  /
   /:/  /    /:/  /   \::/  /    /:/  / 
   \/__/     \/__/     \/__/     \/__/  

Please look, but don't copy. It's bad karma.

*/

body { background-color:#edf0f0; font-family: Helvetica, Arial, sans-serif; }
#container { width:960px; }
#header { padding:72px 10px 0; height:144px; }
h1 a { height:24px; width: 123px; padding:0 50px 50px 0; float:left; font-size: 24px; text-transform: lowercase; color:black; background: url(../images/logo.png) no-repeat; }
a, #nav a { -webkit-transition: color 0.15s ease-out;-moz-transition: color 0.15s ease-out; transition: color 0.15s ease-out; -o-transition: color 0.15s ease-out; }

a { text-decoration: none; }

.module { padding: 8px 10px 72px; border-top:1px solid white; }
.module p.listing { font-size: 24px; font-weight: bold; color:#cbcfcf; }
#work p.listing { width:730px; }
.listing, .listing a, .listing span { text-transform: lowercase; letter-spacing: -1px; } 
.listing a::after { content: " "; }

/* Work */
#work .img_hold { width:790px; float:left; }
#work img { float:left; margin:0 10px 10px 0; }
#work .col { float:right; margin:0px; width:140px; padding: 2px 10px 0 0; }
#work .col p { margin:0 0 6px; font-size:11px; font-style: italic; line-height: 13px; color:#aaa; }	
#work .col h2 { margin:0 0 4px; font-size: 12px; color:#666; }
#work .col a { color:#666; }
#work .col a:hover { color:black; }
#work p.top, #photo p.top { margin: 10px 0 10px; font-style: normal; }
#container p.top a { color:#aaa; font-size: 12px; font-style: normal; }
#container p.top a:hover { color:#666; text-decoration: none; }
.postbody p.top { position: absolute; left:10px; bottom:55px; }

/* Footer */
#footer { padding:8px 10px; margin:20px 0 72px; font-size: 14px; color:#666; font-weight: bold; border-top:1px solid white;  }
#footer p { letter-spacing: -0.3px; }
#footer p.right { width:520px; }
#footer a { color:#aaa; text-decoration: none; }
#footer a:hover { color:black; text-decoration: underline; }

/* Misc */
abbr, acronym { font-size: 75%; cursor: help; font-variant:small-caps; }	
.left { float:left; }
.right { float:right; }

/* Responsive */

@media screen and (max-width:980px){ 
	
	#container { width:98%; }
	#footer p.right { width: auto; margin-left:5px; }
	#footer p { float:left; width: auto; display: block; margin:3px 0 0; }
	
	/* Scaling work */
	#work .img_hold { width:100%; max-width:780px; }
	#work img { max-width: 100%; margin:0 1.2% 1.2% 0; }
	#work .col { float:left; margin:0px; width:98%; padding: 2px 0 0 0; position: relative; }
	#work .col p { width:80%; }
	#work .col p.top { position: absolute; top:8px; left:760px; width:30px; }
	#work .hiidef_inc .image_1, #work .hiidef_inc .image_2 { width:32.6%; margin:0 1% 1% 0; }
	#work .hiidef_inc .image_3 { width:32.6%; margin:0 0 1% 0; }
	#work .piece_love .image_1 { margin-bottom: 1.5%; }
	#work .piece_love .image_2 { width:58.2%; margin:0 2.1% .5% 0; } 
	#work .piece_love .image_3 { width:39.2%; margin:0 0 .5%; }
	#work .the_answer_is_yes .image_1 { width:48.5%; margin:0 1.5% 1.4% 0; }
	#work .the_answer_is_yes .image_2 { width:49.9%; margin: 0 0 1.4% 0; }
	#work .fontessa .image_1 { width:28.2%; margin:0 1.5% 1% 0; }
	#work .fontessa .image_2 { width:70.3%; margin:0 0 1% 0; }
	#work .omnivore .image_1 { width: 29.5%; margin:0 1% 0 0; }
	#work .omnivore .image_2, #work .omnivore .image_3 { width: 69.5%; margin:0 0 1% 0; }
	#work .self_portrait .image_1 { width: 25.1%; margin:0 1% 1% 0; }
	#work .self_portrait .image_2 { width: 73.9%; margin:0 0 1% 0; }
	#work .www09 .image_1 { width:48.5%; margin:0 1.5% 1.4% 0; }
	#work .www09 .image_2 { width:50%; margin: 0 0 1.4% 0; }
	#work .swiss .image_1 { width:49.3%; margin:0 1.4% 1.4% 0; }
	#work .swiss .image_2 { width:49.3%; margin: 0 0 1.4% 0; }	
	#work .life_experience .image_1 { width: 29.5%; margin:0 1% 1% 0; }
	#work .life_experience .image_2, #work .life_experience .image_3 { width: 69.5%; margin:0 0 1% 0; }

}

@media screen and (max-width:820px){ 
	#work p.listing { width:100%; }
	#work .col p.top { left: 97%; }
}


@media screen and (max-width:640px){ 
	#container { width:95%; }
	#footer p.right { width: auto; margin-left:0; }
	.module p.listing { font-size: 140%; }
	
}

@media screen and (max-width:480px){ 
	
	h1 a { padding: 0 0 8px; width:100%; }
	#container { width:98%; }
	#work .col p.top { left:95% }
	#header { padding-top:42px; height: 100px; }
	.module { padding: 8px 10px 42px; }
	.module p.listing { line-height: 95%;  }
	.module p.listing a, .module p.listing span, .postbody h3 { word-spacing: -1px; font-size: 20px; letter-spacing: -0.5px; }

}

@media screen and (max-width:320px){
	#footer { font-size: 11px; }
	#header { padding-top:22px; height: 100px; }
} 

@media only screen and (min--moz-device-pixel-ratio: 2),
	only screen and (-o-min-device-pixel-ratio: 2/1),
	only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (min-device-pixel-ratio: 2) {
	h1 a {
    background: url(../images/logo_2x.png) no-repeat;
    background-size: 123px 24px;

/* rest of your styles... */

}

}


/* Colours */
.listing:hover a, .listing:hover span { color:#cbcfcf; }
.color_1, .listing .color_1:hover { color:#54cacd; }
.color_2, .listing .color_2:hover { color:#e84d3a; }
.color_3, .listing .color_3:hover { color:#ff3384; }
.color_4, .listing .color_4:hover { color:#a0388d; }
.color_5, .listing .color_5:hover { color:#11066c; }
.color_6, .listing .color_6:hover { color:#0d958a; }
.color_7, .listing .color_7:hover { color:#629B39; }
.color_8, .listing .color_8:hover { color:#33811E; }
.color_9, .listing .color_9:hover { color:#F04E00; }
.color_10, .listing .color_10:hover { color:#F00200; }
.color_11, .listing .color_11:hover { color:#D9008F; }
.color_12, .listing .color_12:hover { color:#555555; }
.color_13, .listing .color_13:hover { color:#093C8B; }
.color_14, .listing .color_14:hover { color:#AECB27; }
.color_15, .listing .color_15:hover { color:#E5B208; }
.color_16, .listing .color_16:hover { color:#24121C; }
.color_17, .listing .color_17:hover { color:#C26A21; }
.color_18, .listing .color_18:hover { color:#DB2C17; }
.color_19, .listing .color_19:hover { color:#aaaaaa; }
.color_20, .listing .color_20:hover { color:#166C64; }
.color_21, .listing .color_21:hover { color:#9A1E6E; }
.color_22, .listing .color_22:hover { color:#7EADC2; }
.color_23, .listing .color_23:hover { color:#00A1CE; }
.color_24, .listing .color_24:hover { color:#ffffff; }