/* If you make a mess of this stylesheet Mark will super glue your macbook lid and Daniel will watch! */

/* SWATCHES 
#333333 - [dark grey] body text
#3084ca - [blue] link colour
#78b9e7 - [ dark blue ] hover link
#d9d9d9 - [light grey] borders
#48860b - [green]
*/

/* =============== */
/* = Global CSS = */
/* =============== */

* {margin:0; padding:0; }

html, body {height: 100%;} /* sticky footer */

body{ background:#FFF; font-family: 'Lucida Grande', 'Lucida Sans Unicode',sans-serif; font-size:13px; color:#434343;margin:0;-webkit-text-size-adjust: none; }

/*body.home {background: url('resources/ferrari.jpg') no-repeat top center;}*/

h1, h2, h3, h4, h5, h6 {font-family:'Lucida Grande', 'Lucida Sans Unicode'; font-weight:normal;color:#000;}
h1  { text-shadow: 2px 2px 2px #3c7710;  font-weight: 800;font-size:40px; color:#FFF; letter-spacing:-1px; margin-top:2px; float:left; line-height:normal;}
h2 {font-size:32px; margin: 0 0 25px;  }
h2.small { font-size:22px; margin-bottom: 15px; }
h3 {font-size:16px; margin:0 0 10px; font-weight:bold;}
h4 {font-size:14px; margin:0 0 10px; font-weight:bold;}

input {margin:0 0 10px 0;}
p {line-height:18px; margin:0 0 15px 0; }
ul { text-align:right; margin:0px 0 25px 0px; padding:0 0 0 5px; }
ul li { text-align:right;  margin:0 0px 10px 0;background: url('resources/greybullet.gif') no-repeat top left; padding:0 0 0 0px; list-style-type:none; }
#footer ul {text-align:left;}
#footer ul li {text-align:left;}
a {color:#3084ca; text-decoration:none; font-weight:normal; }
a:hover { color: #78b9e7; }
img { border: none; }

form  { margin:15px 0 0 0; padding:5px 25px 15px 15px; background:#efefef; border:1px solid #d9d9d9;-moz-border-radius: 5px;-webkit-border-radius: 5px;}/*used for contact.html*/
form label {display:block; font-size:12px; margin:15px 0 5px 0;color:#000; font-weight:bold;}
form textarea {width:98%;font-family:helvetica, arial, sans-serif; padding:7px; font-size:14px;}
form select {font-size:13px; padding:1px;margin:4px 0 10px 0}
form input[type="text"], form input[type="password"] { width:100%; padding:3px; font-size:14px;}
form input[type="image"] {margin:10px 0 0 0; display:block; }

/* custom classes */
.screenshot {margin-bottom:18px;}
.screenshot img { border: 3px solid #ccc; }
.icon {margin:0 10px 10px 10px;} /* DEPRECATED - use icon-left or icon-right */
.icon-left { float:left; margin:0 10px 10px 0;}
.icon-right { float:right; margin:0 0 10px 10px;}

.quote { clear: left; margin: 10px 0 30px 30px; }
.quote blockquote { font-size: 16px; font-style: italic; font-family: Times, "Times New Roman", Serif; margin-bottom: 7px; color: #555; }
.quote img { float: left; margin-right: 25px; }
.quote p { text-align: right; color: #999; }
.box { background: #f2f2f2; padding: 15px; margin-bottom: 20px; border: 1px solid #ddd; }
.block { background:#efefef; border:1px solid #d9d9d9;-moz-border-radius: 5px;-webkit-border-radius: 5px; padding: 10px; margin-bottom: 30px; }

.highlight-box { border:1px solid #e0bb3e; background:#fffcd7; margin: 0 0 25px 0; } /* yellow box on sign up */
.highlight-box h2 { margin: 0 0 10px 0;}
.highlight-box p { margin:0 0 5px 0 ; font-size:16px;}
.highlight-box p.notes { font-size:11px; }
.highlight-box-wrapper { padding:15px; }

.date { color: #4aa40d; font-weight: bold; }
.arrow-link { padding-left: 18px; background: url('resources/arrow13.gif') center left no-repeat; }

/* typography related */
.light, .note, .hint { color: #777; }
.lighter { color: #ccc; }
.center {text-align:center; margin-left:auto; margin-right:auto;}
.big { font-size: 150%; }

.code { margin-bottom: 20px; background: #333; padding: 7px; }
.code-example { background:#fffbdf; border:1px solid #ffdeb7;  font-family:"Monoco","Lucida Console", sans-serif; margin-bottom:18px;}
.code-example .highlight { color:#59a322; font-weight:bold; }
.code-example em { color:#747474; font-weight:normal; font-style:normal; }
.code-example-wrapper { padding:15px;}

.code-tag { color: #069cc1; }
.code-liquid { color: #a0dde6; }
.code-liquid2 { color: #fff; }
.code-quot { color: #bedc77; }

.interview p { margin-bottom: 32px; }

/* the grid */
.col-1, .col-2, .col-3, .col-4, .col-4-5, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {margin-right:35px; float:left;}
.col-12 { margin-right:0px;}

.col-12 {width:925px;}
.col-11 {width:845px;}
.col-10 {width:765px;}
.col-9 {width:685px;}
.col-8 { width:605px;}
.col-7 {width:525px;}
.col-6 {width:445px;}
.col-5 {width:365px;}
.col-4-5 {width:307px;}
.col-4 {width:285px;}
.col-3 {width:205px;}
.col-2 {width:125px;}
.col-1 {width:45px;}  
  




.last {margin-right:0 !important;}

.margin-bottom {margin-bottom:10px; }


.l { text-align: left; }
.r { text-align: right; }
.left{float:left;}
.right{float:right;}
.clear {clear:both;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden; }

hr {color:#d9d9d9; background:#d9d9d9;border:0px; height:1px;margin-bottom:25px;clear:both;}
.screenshot {  margin-bottom:25px}

/* ========== */
/* = Layout = */
/* ========== */

/* all content areas that are outside of grid but need to be centered with correct width */
.content { width:925px; margin: 0 auto; display: block; padding:0 20px; }
.content:after {content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}

#wrapper {min-height:100%; height:auto !important;height:100%;margin:0 auto;/* neg val of footer height*/}

#header.twitter { background: #53a70f url('resources/bg-header-contest.gif') top left repeat-x; height: 260px; text-align: center; }

#masthead { height:41px; padding-top:13px; background: #212121 url('resources/bg-masthead.gif') top left repeat-x; } /* this contains the main nav */
#masthead img.shopify-logo  { display:block; float:left; position: relative; bottom: 5px; }
#masthead ul#nav-primary { float:right; margin:0; }
#masthead ul#nav-primary li { float:left; list-style-type:none; margin:0 4px 0 0; height:27px; padding:8px 0 0 2px; background:none; }
#masthead ul#nav-primary li a { padding:7px 4px 0px 6px; color:#ddd; text-decoration:none; font-weight:normal; font-size: 13px; text-shadow: 1px 1px 1px #222; outline:none; }
#masthead ul#nav-primary li a:hover { color: #fff; text-decoration:none;}
#masthead ul#nav-primary li a:active, #masthead ul#nav-primary li a:focus { color:#FFF; } 
#masthead ul#nav-primary li.current { background: url('resources/btn-currentpage-left.png') center left no-repeat; padding:1px 0 0 4px; line-height:12px; margin-top:2px;}
#masthead ul#nav-primary li.current a { background:  url('resources/btn-currentpage-right.png') center right no-repeat;display:block; height:19px;}


#banner { height:75px; padding:30px 0 40px 0; background: url('resources/bg-subpagebanner.gif') repeat-x; } /* green banner used on all sub-pages */

#banner h1 { font-weight:bold; color:-moz-linear-gradient(blue, white, blue);  }

#content {padding:20px 0 0;}


#footer, #push { clear:both;/* .push must be the same height as .footer */ }
#push {height:10%}

#footer-wrapper { padding:20px 0 0 0; width:925px; margin:auto; }
#footer {height:250px; background:#111 url('resources/bg-footer.gif') repeat-x; color: #666; border-top: 1px solid #444; font-size: 11.5px; }
#footer.frontpage {height:250px; }
#footer h3 { color: #fff; border-bottom: 1px solid #444; margin-bottom: 10px; padding:0 0 5px 0; font-size: 13px; font-weight:normal;}
#footer a { color: #777 }
#footer a:hover { color: #cdcdcd;  }
#footer ul { list-style-type: none; margin: 0 0 20px 0; padding: 0; }
#footer ul li { margin-bottom:5px; font-size:11.5px; background:none; padding:0; }
#footer ul li a { color:#999;  }
#footer ul li a:hover { color:#3084ca; }

#footer .content { margin-top:20px; }
#footer .copyright { margin-top:20px; }

#footer .contact-us img { margin-right:4px;}
#footer .contact-us li { margin-bottom:7px }
#footer .contact-us, #footer .contact-us a  { color: #cdcdcd; }
#footer .contact-us * { vertical-align: middle; }
#footer .contact-us a:hover { }

#footer  #copyright { text-align: center; font-size: 11px; color: #666; margin: 15px 0 10px 0; }

/* ======= */
/* = Main = */
/* ======= */

/* experience detail page */
#contentwrapper-driving { padding:20px 0 0 0; width:925px; margin:auto;}
#contentwrapper-driving .left-col {width:275px; float:left;}
#contentwrapper-driving .right-col {width:630px; float:right;}

/* category page */
#contentwrapper-cat { padding:20px 0 0 0; width:925px; margin:auto;}
#contentwrapper-cat .left-col {width:275px; float:left;}
#contentwrapper-cat .right-col {width:630px; float:right;}

/* news page */
#contentwrapper-news { padding:20px 0 0 0; width:925px; margin:auto;}
#contentwrapper-news .left-col {width:275px; float:right;}
#contentwrapper-news .right-col {width:630px; float:left;}

/* home page */
#contentwrapper-index { padding:20px 0 0 0; width:925px; margin:auto;}
#contentwrapper-index .left-col {width:275px; float:right;}
#contentwrapper-index .right-col {width:630px; float:left;}
.l-col {position:relative; top:200px; width:304px; float:left; margin-left:5px}
.m-col {position:relative; top:200px; width:304px; float:left; margin-left:5px}
.r-col {position:relative; top:200px; width:304px; float:right;}
.clearall {clear:all;}

.boxed {margin:5px; background-color:#eeeeee; padding:3px;}




a.button {
	display: inline-block;
	font: bold 14px "Trebuchet MS", Verdana, Arial, Serif;
	text-decoration: none;
	color: #fff;
	outline: none;
	background: url('resources/button.png') no-repeat left top;
	line-height: 40px;
	padding-left: 10px;
}
a.button:hover { background-color: #ffffff; color:#000000 }
a.button span {
	line-height: 40px;
	display: block;
	padding-right: 10px;
	background: url('resources/button.png') no-repeat right bottom;
}
.button span
{
 
}
/*---Adjustable Color Classes--*/
a.red { background-color: red;}
a.green { background-color: green;}
a.orange { background-color: orange;}
a.blue { background-color: blue;}


#cu3er-container {width:925px; outline:0; text-align:center;}





.experience {
float: left;
width: 190px;
height: 280px;
margin: 0px 5px 15px 15px;
border:0px;
padding:0;
}

.experiencefp {
float: left;
width: 170px;
/*height: 40px;*/
margin: 0px 5px 15px 10px;
border:0px;
padding:0;
padding-bottom:40px;
}

.experience_header {
width:200px;
height:40px;
margin:0;
padding:0;
color:#ffffff;
text-align:center;
font:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:18px;
font-variant:small-caps;
}

.experience_header p {
padding:4px 0 0 0;
}

.experience_image {
width:200px;
height:120px;
margin:0;
padding:0;
}

.experience_content {
width:200px;
height:80px;
margin:0;
padding:0;
}

.experience_content p {
padding: 5px;
font-size:11px;
color:#ffffff;
text-align:justify;
}

.experience_footer {
width:200px;
height:40px;
margin:0;
padding:0;
}

.inlineimage {
float:left;
margin:0 10px 10px 0;
}

.pagination {
clear:both; 
text-align:center;
}