html, body, div, span, applet, object, iframe, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, 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,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}


/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.2;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* start of my style sheet */
body {
	margin:0;
	padding:0;
	background-color:#efefef;
	color:#60778b;
    font-family: 'Work Sans', sans-serif;
	font-size:16px;
	line-height:1.3;
}
#container {
    width:100%;
    padding:0;
    margin:0;
}
#header {
    width:100%;
    position: relative;
    top:50px;
    height:320px;
    padding:0;
    margin:0;
    text-align:center;
    background-image: url('/images/ghost-head.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    overflow:auto;
}
#film #header {
    background-image: url('/images/quinta-head.jpg');
}
#actor #header {
    background-image: url('/images/irregulars-head.jpg');
}
#music #header {
    background-image: url('/images/leeds-head.jpg');
}
#photo #header {
    background-image: url('/images/watchet-twilight-head.jpg');
}
#about #header {
    background-image: url('/images/fletchermoss.jpg');
}
#contact #header {
    background-image: url('/images/fashion-head4.jpg');
}
#header a {
    text-decoration:none;
    width:100%;
    height:320px;
}
.head-credit {
    width:100%;
    text-align:right;
}
.head-credit p {
    font-size:12px;
    line-height:1;
    margin:0 24px 0 0;
}
.head-credit p a {
    text-decoration:none;
    font-weight:bold;
}
h1 {
    position: relative;
	margin:0;
	padding:85px 0 0 0;
	font-size:86px;
	font-weight:bold;
	color:#e8e8e8;
	line-height:1.2;
	text-transform: uppercase;
	letter-spacing:7px;
	word-spacing:8px;
    text-shadow: 1px 1px 3px #222;
}
h2 {
	font-size:32px;
	font-weight:bold;
	line-height:1;
	color:#eee;
	text-transform: uppercase;
	letter-spacing:15px;
	word-spacing:10px;
    text-shadow: 1px 1px 2px #222;
	margin:0;
	padding:0 0 0 8px;
}
h3 {
    clear:both;
	font-size:24px;
	font-weight:bold;
	line-height:1;
	text-transform: uppercase;
	letter-spacing:2px;
	word-spacing:4px;
	margin:12px 0 18px 0;
	padding:0;
}
h3 span {
    display:block;
	font-size:16px;
	font-weight:normal;
	text-transform:none;
	margin:6px 0 0 0;
}
h4 {
    clear:both;
	font-size:22px;
	font-weight:normal;
	line-height:1;
	text-transform: uppercase;
	text-decoration:underline;
	letter-spacing:2px;
	word-spacing:4px;
	margin:12px 0 6px 0;
	padding:12px 0 0 0;
}
#nav {
    position: absolute;
    top:0;
    width:100%;
    height:40px;
    text-align:right;
}
strong {
    font-weight:bold;
}
#nav p {
	font-size:18px;
	font-weight:bold;
	line-height:1;
	text-transform: uppercase;
	letter-spacing:3px;
	word-spacing:3px;
	margin:14px 24px 0 0;
}
#nav a, #nav a:visited {
	color:#60778b;
	text-decoration:none;
    margin:0 4px;
}
#nav a:hover, #nav a:active {
	color:#cc4455;
	text-decoration:none;
    margin:0 4px;
}
#home #nav a.home, #home #nav a.home:visited, 
#film #nav a.film, #film #nav a.film:visited, 
#actor #nav a.actor, #actor #nav a.actor:visited, 
#music #nav a.music, #music #nav a.music:visited, 
#about #nav a.about, #about #nav a.about:visited, 
#services #nav a.photography, #services #nav a.photography:visited, 
#blog #nav a.blog, #blog #nav a.blog:visited, 
#contact #nav a.contact, #contact #nav a.contact:visited {
	color:#45a033;
	text-decoration:underline;
}
.clear {
    clear:both;
}
#content {
    width:100%;
    margin:60px 0;
}
.blog-left {
    float:left;
    width:80%;
}
.post {
    width:90%;
    margin:24px 5% 0 5%;
    padding:0;
    overflow:auto;
}
.post .option {
    width:46%;
    height:300px;
    border:0;
    margin:10px 2%;
    padding:0;
    float:left;
    text-align:center;
	background-image:url(/images/options.jpg);
	background-position:0 0;
	background-repeat:no-repeat;
}
.post .music {
background-position:-582px 0;
}
.post .weddings {
background-position:-582px -300px;
}
.post .about {
background-position:0 -300px;
}
.post .film:hover {
background-position:0 -600px;
}
.post .music:hover {
background-position:-582px -600px;
}
.post .weddings:hover {
background-position:-582px -900px;
}
.post .about:hover {
background-position:0 -900px;
}

.post .option h3 {
    font-size:72px;
    margin:114px 0 0 0;
    color:#ccc;
    text-shadow: 1px 1px 3px #222;
}
#blog .post {
    width:85%;
    margin:24px 5% 24px 10%;
    padding:0;
    overflow:auto;
}
.post p {
  clear:both;
    font-size:14px;
    letter-spacing:1px;
    word-spacing:1px;
    margin: 0 0 20px 0;
}
.post a, .post a:visited {
	color:#60778b;
	text-decoration:none;
	font-weight:bold;
    margin:0;
}
.post a:hover, .post a:active {
	color:#cc4455;
	text-decoration:none;
    margin:0;
}
.post figure, #blog .post figure {
    clear:both;
  height:400px;
  width:711px;
    margin:3px 24px 12px 0;
    display:table
}
#photo .post figure {
  height:400px;
  width:533px;
}
.post figure.right {
    float:right;
    margin:0 0 12px 24px;
    display:table
} 
.post .film-thumb {
    float:left;
    width:45%;
    margin:0 5% 24px 0;
}
.month {
    margin:24px 0 -12px 9%;
    width:86%;
    background-color:#676767;
    padding:2px 8px 2px 1%;
    color:#efefef;
	text-transform: uppercase;
	font-weight:bold;
	font-size:24px;
	letter-spacing:2px;
}
.month span {
    float:left;
    margin:4px 12px 4px 0;
}
figcaption {
    font-size: 12px;
	letter-spacing:1px;
	display:table-caption;
	caption-side:bottom;
}
.post .half {
    float:left;
    width:50%;
    margin:0;
    padding:0 5% 0 0;
    overflow:auto;
}
#sidebar {
    float:left;
    margin:0 4% 20px 0;
    padding:0;
    width:16%;
    line-height:1.4;
}
#sidebar div {
    margin:24px 0 0 0;
    overflow:auto;
}
#archive {
    margin:0 0 24px 0;
}
#archive a, #archive a:visited {
    text-decoration:none;
	color:#60778b;
}
#archive a:hover, #archive a:active {
	color:#cc4455;
}
#archive li {
    font-weight:bold;
    font-size:18px;
    margin: 0 0 2px 0;
    padding:0;
}
#archive li ul {
    margin:0 0 18px 0;
    padding:0;
}
#archive li ul li {
    font-weight:normal;
	text-transform: uppercase;
    font-size:18px;
}
#archive li ul li ul {
    margin:1px 0 12px 0;
    border-top: 1px solid #c6ced5;
}
#archive li ul li ul li {
    font-weight:normal;
	text-transform:none;
    font-size:16px;
    line-height:1.2;
    padding:3px 0;
    border-bottom: 1px solid #c6ced5;
}
#archive li ul li ul li a span {
    display:block;
    width:100%;
    text-align:right;
    font-size:14px;
    line-height:1.4;
}


/* photography style */
.photoroll {
    width:100%;
}
.photoroll li {
    float:left;
    height:460px;
  width:723px;
    padding:0;
    margin:0;
}
#photo .photoroll li {
  width:545px;
}
.photoroll li figure {
    padding:0;
    margin:0;
}
.photoroll li figure img {
    height:400px;
    padding:0;
    margin:6px 12px 0 0;
}
.photoroll figcaption {
    font-size: 12px;
	display:table-caption;
	caption-side:bottom;
	padding: 0;
}

#footer {
    clear:both;
    width:100%;
    margin: 40px 0 18px 0;
    font-size:16px;
	text-transform: uppercase;
	letter-spacing:2px;
}
#footer a, #footer a:visited {
	color:#60778b;
	text-decoration:none;
}
#footer a:hover, #footer a:active {
	color:#cc4455;
	text-decoration:none;
}
.left {
    float:left;
    width:38%;
    margin:0 2% 0 10%;
    padding:8px 0;
}
#blog .left {
    float:left;
    width:40%;
    margin:0 2% 0 8%;
    padding:8px 0;
}
.right {
    float:left;
    width:40%;
    margin:0 8% 0 2%;
    padding:8px 0;
}
#blog .right {
    float:left;
    width:38%;
    margin:0 10% 0 2%;
    padding:8px 0;
}
.full {
	background-color:#dedede;
    clear:both;
    width:100%;
    margin:0;
    padding:3px 0 3px 0;
    text-align:center;
}

/* style for client thumbs */
.clients {
	clear:both;
	list-style: none;
	margin:-6px 0 0 0;
}
.clients li {
	margin: 4px;
}
.clients li a, .clients li a:hover {
	float:left;
	width:150px;
	height:150px;
	margin:6px 8px 4px 0;
	background-color:#b6c0d7;
	background-image:url(/images/clients03.jpg);
	background-position:0 0;
	background-repeat:no-repeat;
}
.clients li.allfm a {
background-position:0 0;
}
.clients li.allfm a:hover {
background-position:-750px 0;
}
.clients li.arbee a {
background-position:-150px 0;
}
.clients li.arbee a:hover {
background-position:-900px 0;
}
.clients li.danielland a {
background-position:-300px 0;
}
.clients li.danielland a:hover {
background-position:-1050px 0;
}
.clients li.found a {
background-position:-450px 0;
}
.clients li.found a:hover {
background-position:-1200px 0;
}
.clients li.global a {
background-position:-600px 0;
}
.clients li.global a:hover {
background-position:-1350px 0;
}
.clients li.jeneachus a {
background-position:0 -150px;
}
.clients li.jeneachus a:hover {
background-position:-750px -150px;
}
.clients li.kowalski a {
background-position:-150px -300px;
}
.clients li.kowalski a:hover {
background-position:-900px -300px;
}
.clients li.rac a {
background-position:0 -300px;
}
.clients li.rac a:hover {
background-position:-750px -300px;
}
.clients li.riot a {
background-position:-150px -150px;
}
.clients li.riot a:hover {
background-position:-900px -150px;
}
.clients li.scc a {
background-position:-300px -150px;
}
.clients li.scc a:hover {
background-position:-1050px -150px;
}
.clients li.tmssco a {
background-position:-450px -150px;
}
.clients li.tmssco a:hover {
background-position:-1200px -150px;
}
.clients li.tpp a {
background-position:-600px -150px;
}
.clients li.tpp a:hover {
background-position:-1350px -150px;
}

/* style for social icons */
.icons {
	list-style: none;
	margin:6px 0 0 0;
	width:250px;
	height:24px;
}

.icons li {
	float:left;
	margin:0 4px;
	width:24px;
	height:24px;
}

.icons li a, .icons li a:hover {
	float:left;
	margin:0;
	width:24px;
	height:24px;
	background-image:url(/images/icons002.jpg);
	background-position:0 0;
	background-repeat:no-repeat;
}
.icons li.fb a {
background-position:0 0;
}
.icons li.gp a {
background-position:-24px 0;
}
.icons li.in a {
background-position:-48px 0;
}
.icons li.rss a {
background-position:-72px 0;
}
.icons li.tw a {
background-position:-96px 0;
}
.icons li.vim a {
background-position:-120px 0;
}
.icons li.yt a {
background-position:-144px 0;
}

/* STYLE FOR SMALLER MOBILE DEVICES */
@media only screen and (max-device-width:780px) {
    html,body { 
        -webkit-text-size-adjust:none; 
        -ms-text-size-adjust:none; 
    }
  
	.head-credit p {
    	font-size:24px;
	}
  	h2 {
		font-size:26px;
		letter-spacing:5px;
		word-spacing:8px;
  		text-shadow: 1px 1px 2px #222;
		margin:0;
		padding:0 0 0 0px;
	}
    h3 {
        font-size:36px;
    }
    h4 {
        font-size:30px;
    }
	h4 a, h4 a:visited {
    	text-decoration:none;
  }
    #nav {
        position: absolute;
        top:0;
        width:100%;
        height:40px;
        text-align:center;
    }
    #nav p {
    	font-size:26px;
    	font-weight:bold;
    	line-height:1;
    	text-transform: uppercase;
    	letter-spacing:2px;
    	word-spacing:6px;
    	margin:14px 0 0 0;
    }
    #nav a:hover, #nav a:active {
    	color:#cc4455;
    	text-decoration:none;
    } 
    .blog-left {
        float:left;
        width:66%;
    }
    .post, .post .half {
        width:92%;
        margin:24px 4% 0 4%;
        padding:0;
        overflow:auto;
    }
    #blog .post {
        width:85%;
        margin:24px 5% 0 10%;
        padding:0;
        overflow:auto;
    }
    #sidebar {
        float:left;
        margin:0 4% 0 0;
        padding:0;
        width:30%;
    }
    #sidebar div {
        margin:24px 4% 0 4%;
        overflow:auto;
    }
    .post p {
        font-size:32px;
        letter-spacing:1px;
        word-spacing:1px;
        margin: 0 0 28px 0;
    }
    .post iframe {
        display:block;
        margin:0;
    }
    #blog .post iframe {
        margin:0;
    }
.post .film-thumb {
    float:left;
    width:100%;
    margin:0 0 24px 0;
}
	.photoroll li {
  	  float:left;
   	 height:480px;
      width: 723px;
   	 padding:0;
   	 margin:0;
	}
	.photoroll li figure img {
  	  height:400px;
  	  padding:0;
  	  margin:6px 12px 0 0;
	}
	.photoroll figcaption {
 	   font-size: 26px;
  }
    figcaption {
        width:100%;
        font-size: 24px;
    	letter-spacing:0;
    }
    #footer {
    	background-color:#dedede;
        clear:both;
        width:100%;
        margin: 40px 0 0 0;
        padding:0;
        font-size:30px;
    	text-transform: uppercase;
    	letter-spacing:2px;
    }
    .left, .right, #blog .left, #blog .right {
        clear:both;
        width:92%;
        margin:0 4% 0 4%;
        padding:20px 0;
    }
    .full {
        clear:both;
    	background-color:#efefef;
        width:100%;
        margin:0;
        padding:20px 0;
        text-align:center;
    }   
    
}