/*
Theme Name: Delft Connection Mobile
Theme URI: http://www.2tpt.nl/
Version: 1.0
Description: Mobile Template
Author: 2tptProductions
Author URI: http://www.2tpt.nl/
*/

/*------------------------------------------------*/
/*-----------------[RESET]------------------------*/
/*------------------------------------------------*/

/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q {	quotes: none; }

blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none; }

/* remember to define focus styles! */
:focus { outline: 0; }

/* remember to highlight inserts somehow! */
ins { text-decoration: none; }
del { text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table 			{ border-collapse: collapse; border-spacing: 0; }
tr			{ }
td 			{ padding:0 5px; }
td:first-child	 	{ padding:0 25px 0 5px; }



/*------------------------------------------------*/
/*-----------------[BASIC STYLES]-----------------*/
/*------------------------------------------------*/

html { }
body { line-height: 20px; font-family: Arial, sans-serif; font-size: 14px; color: #222222; background-color: #ffffff; padding: 0 0 35px; }

a { text-decoration: underline; color: #666666; }
a:hover { }

h1, h2, h3, h4, h5, h6 { padding-bottom: 25px; color: #222222; line-height: 1em; font-weight: bold; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #222222; }
h1 { font-size: 36px; }
h2 { font-size: 24px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
h5 { font-size: 14px; }
h6 { font-size: 14px; }

p { padding-bottom: 30px; line-height: 1.4em; }
strong { font-weight: bold; }
cite, em, i { font-style: italic; }
pre, code { font-family: Courier New, monospace; margin-bottom: 10px; }
ins { text-decoration: none; }
sup, sub { height: 0; line-height: 1; position: relative; vertical-align: baseline; }
sup { bottom: 0.8em; }
sub { top: 0.3em; }
dl { margin: 0 0 1.5em 0; }
dl dt { font-weight: bold; }
dd  { margin-left: 1.5em;}
blockquote  { margin: 1.5em; padding: 1em; color: #666666; background: #e6e6e6; font-style: italic; border: 1px solid #dcdcdc; }
blockquote p { padding-bottom: 0px; }

input[type=text],input.text, input.title, textarea, select { background-color:#fff; border:1px solid #bbb; padding: 2px; color: #4e4e4e; }
input[type=text]:focus, input.text:focus, input.title:focus, textarea:focus, select:focus { border-color:#2D3940; color: #3e3e3e; }
input[type=text], input.text, input.title, textarea, select { margin:0.5em 0; }
textarea { padding: 4px; }

img#about-image { float: left; margin: 3px 8px 8px 0px; }

.clear { clear: both; }
.clearfix:after 		{ visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
* html .clearfix             	{ zoom: 1; } /* IE6 */
*:first-child+html .clearfix 	{ zoom: 1; } /* IE7 */



/*------------------------------------------------*/
/*-----------------[CUSTOM STYLES]----------------*/
/*------------------------------------------------*/

html { text-align:center; }

.main-wrap { margin: 0 auto; max-width:650px; }
.header, .header-separator, .content, .footer { }

.header { width:100%; overflow:auto; background:#ffffff; }
#logo { float:left; }
#logo a img { max-width:150px; }
.payoff { float:left; text-align:left; max-width:40%; }
.payoff h2 { font-size:18px; margin-top:25px; margin-left:15px; color:#222222;  }
.nav { clear:both;  margin-top:30px; }
.nav ul { width:270px; margin: 0 auto;}
.nav ul li:first-child { border-top-left-radius: 8px; -moz-border-top-left-radius: 8px; -webkit-border-top-left-radius: 8px; }
.nav ul li { float:left; padding:7px; background:#555555; border-right:1px solid #222222; }
.nav ul li.current { background:#222222; }
.nav ul li.last { border-top-right-radius:7px; -moz-border-top-right-radius:7px; -webkit-border-top-right-radius:7px;  }
.nav ul li a { text-decoration: none; font-size:14px; color:#fff200; }

.header-separator { height:1px; background:#222222; border-top:15px solid #222222; }

.content { width:100%; min-height:400px; background:url('http://vps26.bhosted.nl/~delftcon/img/achtergrond.jpg') no-repeat center bottom; clear:both; padding-top:25px; }
.content img { background:#000000; border-bottom:3px dashed #FFF200; max-width:450px; box-shadow:0 3px 5px #333333; -moz-box-shadow:0 3px 5px #333333; -webkit-box-shadow:0 3px 5px #333333;}
.pad { padding:0 7%;  }
.quote-box h1 { }

.quote-top { color:#222222; }
.quote-bottom { }

.quick-nav { margin-bottom:100px; }
.quick-nav ul { }
.quick-nav ul li { background:#cccccc; border-bottom:1px solid #222222; padding:12px 0 7px; margin:0 15px;}
.quick-nav ul li a { color:#666666; text-decoration:none; }

.overlay { box-shadow: 0 0 10px #cccccc; -moz-box-shadow: 0 0 10px #cccccc; -webkit-box-shadow: 0 0 10px #cccccc; border:10px solid #ffffff; max-width:400px; margin:0 auto 30px; }
.inlay { box-shadow:inset 0 0 10px #cccccc; -moz-box-shadow:inset 0 0 10px #cccccc; -webkit-box-shadow:inset 0 0 10px #cccccc; background:#ffffff; }

.work-box, .project-box { margin-bottom:100px; }
.work-title, .project-title { }
.work-nav, .project-nav { clear:both; height:100px; }
.work-nav a, .project-nav a { padding-top:60px; line-height:2em; }

.nav-next { float:left; background:url('http://vps26.bhosted.nl/~delftcon/img/nav-next.png') no-repeat; height:87px; width:87px; }
.nav-prev { float:right; background:url('http://vps26.bhosted.nl/~delftcon/img/nav-prev.png') no-repeat; height:87px; width:87px; }

.footer { padding:30px 0; border-top:10px solid #222222; width:100%; line-height:1.4em; clear:both; }
.last {margin-bottom:0px; }

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */

.content img {max-width:350px; }
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */

.content img {max-width:280px; }
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
.content img {max-width:500px; }
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
.content img {max-width:600px; }
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
.content img {max-width:600px; }
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
.content img {max-width:250px; }
}