/*reset*/body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
/*table{border-collapse:collapse;border-spacing:0;}*/
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym {border:0;}
/*fonts*/
body{font:13px "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;*font-size:small;*font:x-small; background:#fff;}
table {font-size:inherit;font:100%;}
select, input, textarea {font:99%  "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;}
pre, code {font:115% monospace;*font-size:100%;}
body * {}
/* IMAGES ---------------------- */	
img, a img {border: none;}
/* TABLES ---------------------- */
table {margin-bottom: 1.2em;font-size: 1em;}
/* FORMS ----------------------- */
form {margin: 0;}
/* CLEARS n FLOATS ----------------------- */
.clearfloat {clear:both; height:0; font-size: 1px; line-height: 0px;}
.floatleft {float:left;}
.floatright {float:right; margin:0 0 15px 15px; clear:both;}
.screen-readers {position:absolute;left:-9999px;top:-9999px;z-index : 2;}


/* LAYOUT BLOCKS ----------------------- */

body { text-align:center; padding:0 0; margin:0; background:#fff; }

#wrapper { text-align:left; margin:20px auto 0 auto; position:relative; padding:0 0; width:1000px; background: url(../i/photography/back-photographyhome.jpg) no-repeat 0 0; height:750px;}

#header { width:960px;  padding:0 0 0 0; height:100px; position:absolute; bottom:0; left:20px; border-top:#fff 3px solid; z-index:9;  }

#mid { width:100%;  padding:0 0 0 0; }
#side { width:250px;  padding:0 0 0 0; background:#CCC666; float:left; display:inline; }
#main { width:690px;  padding:0 0 0 0; background:#663366;float:left; display:inline; }


#footer { margin:0 auto 0 auto; padding:10px 0; width:1000px; }


/* ----- header ----- */
#logo { position:absolute; top:20px; left:0; }
.strapline { position:absolute; bottom:200px; left:40px; }

/* ----- nav ----- */
#nav { position:absolute; top:30px; right:0; }

/* NAV  */
#nav ul {  display:inline; margin:0 0 0 0; }
#nav li {  margin:0 0 0 25px ; float:left; display:inline; font-size:20px; text-transform:uppercase; letter-spacing:1px; }
#nav a { display:block; margin:0; color:#666;  }
#nav a:hover { color: #7A8C9D }

#nav-home { background: url(../i/nav/nav-home.gif) no-repeat 0 0; width:130px; }
#nav-about { background: url(../i/nav/nav-company.gif) no-repeat 0 0; width:130px;}
#nav-services { background: url(../i/nav/nav-services.gif) no-repeat 0 0; width:130px; }
#nav-contact { background: url(../i/nav/nav-contact.gif) no-repeat 0 0;  width:130px;}

#nav-home:hover, #nav-about:hover, #nav-services:hover, #nav-contact:hover { background-position:0 -40px;}
#page-home #nav-home, #page-services #nav-services, #page-about #nav-about, #page-contact #nav-contact {background-position:0 -40px;}

/* ----- GROUPS  ----- */
#page-text #wrapper {}
#block { position:absolute; top:30px; width:600px;left:200px; height:600px; overflow-x:hidden; overflow-y:auto; }
.column1 { float:left; width:560px; text-align:center; padding:0 10px;}
.column2 { float:left; width:47%; margin-right:3%;}

#block h2 { font-size:28px;margin-bottom:10px  }
#block h3 { font-size:20px; margin-bottom:10px }
#block h4 { font-size:16px; margin-bottom:10px }

/* PHOTOGRAPHY  ----------------------- */


ul#photogallery { width:450px;  height:444px; padding:0; margin: 0 0 0 0;list-style:none; position:absolute; top:166px; left:50px; }
ul#photogallery li { display: inline; }
ul#photogallery a {display: inline; float: left; margin: 0 0 0px 0; width: auto; }
ul#photogallery a:hover {-webkit-transform: scale(1.05); -moz-transform: scale(1.05); z-index: 5;}

ul#photogallery li a.pic1 { top: 11px; left:14px; position:absolute;   }
ul#photogallery li a.pic2 { top: 40px; left:119px; position:absolute;   }
ul#photogallery li a.pic3 { top: 0; left:200px; position:absolute;   }
ul#photogallery li a.pic4 { top: 80px; left:275px; position:absolute;   }
ul#photogallery li a.pic5 { top: 103px; left:350px; position:absolute;   }
ul#photogallery li a.pic6 { top: 123px; left:412px; position:absolute;   }

ul#photogallery li a.pic7 { top: 137px; left:0; position:absolute;   }
ul#photogallery li a.pic8 { top: 140px; left:70px; position:absolute;   }
ul#photogallery li a.pic9 { top: 144px; left:144px; position:absolute;   }
ul#photogallery li a.pic10 { top: 160px; left:355px; position:absolute;   }
ul#photogallery li a.pic11 { top: 185px; left:262px; position:absolute;   }

#photogallery div
{	position: absolute; top:80px; left:600px;
	visibility: hidden;
	margin: 0;
	padding: 0;}

#face { position:absolute; top:262px; right:10px; }

/* ----- left column ----- */


#intro-text { position:absolute; bottom:20px; left:30px; width:310px;} 

#intro-text p { color:#fff; font-size:12px; margin-bottom:10px; }
.ch { font-size:16px!important; line-height:90%!important; text-transform:uppercase; color:#777; }
.ch a {color:#777; }

/* ----- DESIGN  ----- */
#page-design #wrapper { text-align:left; margin:20px auto 0 auto; position:relative; padding:0 0; width:1000px; background:url(../i/design/back-main.jpg) no-repeat 0 0; height:750px;}
#page-design .notepad-content { position:absolute; top:140px; left:125px; }

#page-design .navlinks {position:absolute; left:20px; top:20px;  }
#page-design .navlinks li { text-transform:uppercase; font-size:24px; padding:3px 0; -webkit-transform: rotate(-13deg); -moz-transform: rotate(-13deg); }
#page-design .link1 { }
#page-design .link2 {   }
#page-design .link3 { }
#page-design ul { list-style:none; }
#page-design .navlinks a { color:#555; }
#page-design .navlinks a:hover { color:#7A8C9D; }
/* ----- WEB  ----- */
#page-web #wrapper { text-align:left; margin:20px auto 0 auto; position:relative; padding:0 0; width:1000px; background:url(../i/web/back-main.jpg) no-repeat 0 0; height:750px;}
#page-web .navlinks {position:absolute; right:40px; bottom:160px;  }
#page-web .navlinks li { text-transform:uppercase; font-size:24px; list-style:none; padding:3px 0; -webkit-transform: rotate(-13deg); -moz-transform: rotate(-13deg); }


/* ARTWORK  ----------------------- */

#page-artwork ul#photogallery { width:640px;  padding:0; margin: 0 0 0 0;list-style:none; position:absolute; top:80px; left:340px; }
#page-artwork ul#photogallery li { display: inline; }
#page-artwork ul#photogallery a {display: inline; float: left; margin: 0 0 0px 0; width: auto; }

#page-artwork ul#photogallery li a.pic1 { top: 100px; left:0; position:absolute;   }
#page-artwork ul#photogallery li a.pic2 { top: 80px; left:135px; position:absolute;   }
#page-artwork ul#photogallery li a.pic3 { top: 50px; left:285px; position:absolute;   }
#page-artwork ul#photogallery li a.pic4 { top: 0; left:440px; position:absolute;   }

#page-artwork #photogallery div
{	position: absolute; top:180px; left:-320px;
	visibility: hidden;
	margin: 0;
	padding: 0;}

#page-artwork .ch { font-size:28px!important; line-height:90%!important; text-transform:uppercase; position:absolute; right:100px; top:540px;  -webkit-transform: rotate(-6deg); -moz-transform: rotate(-6deg);  }


#page-artwork #wrapper { text-align:left; margin:20px auto 0 auto; position:relative; padding:0 0; width:1000px; background:url(../i/artwork/back-main.jpg) no-repeat 0 0; height:750px;}


/* BANDS  ----------------------- */
#page-artwork .bands-gallery ul#photogallery { width:910px;  height:444px; padding:0; margin: 0 0 0 0;list-style:none; position:absolute; top:70px; left:50px;  }

#page-artwork .bands-gallery  ul#photogallery li a.pic1 { top: 70px; left:30px; position:absolute;   }
#page-artwork .bands-gallery  ul#photogallery li a.pic2 { top: 100px; left:335px; position:absolute;   }
#page-artwork .bands-gallery  ul#photogallery li a.pic3 { top: 112px; left:465px; position:absolute;   }
#page-artwork .bands-gallery  ul#photogallery li a.pic4 { top: 80px; left:580px; position:absolute;   }
#page-artwork .bands-gallery  ul#photogallery li a.pic5 { top: 0; left:720px; position:absolute;  }

p.pagetitle { position:absolute; top:360px; left:70px; -webkit-transform: rotate(-6deg); -moz-transform: rotate(-6deg); font-size:34px!important;text-align:center; line-height:80%; text-transform:uppercase; color:#7A8C9D; width:200px; display:none;  }

#page-artwork .capt { font-size:27px; text-align:center; color:#7A8C9D;  }
#page-artwork .caption1 { top: 334px; left:76px; position:absolute;  -webkit-transform: rotate(-6deg); -moz-transform: rotate(-6deg);width:200px; }
#page-artwork .caption2 { top: 293px; left:384px; position:absolute;  -webkit-transform: rotate(1deg); -moz-transform: rotate(-6deg);width:120px; }
#page-artwork .caption3 { top: 330px; left:519px; position:absolute;  -webkit-transform: rotate(1deg); -moz-transform: rotate(-6deg);width:120px; }
#page-artwork .caption4 { top: 297px; left:630px; position:absolute;  -webkit-transform: rotate(1deg); -moz-transform: rotate(-6deg); width:140px;}
#page-artwork .caption5 { top: 258px; left:766px; position:absolute; -webkit-transform: rotate(1deg); -moz-transform: rotate(-6deg);width:175px; }


.backbtn {font-size:22px!important; line-height:90%!important; text-transform:uppercase; position:absolute; top:600px; right:30px;  }
.backbtn a{ color:#777 !important; }
.backbtn a:hover { color:#7A8C9D !important; }

.caption-artwork { position:absolute; top:520px; left:100px; width:530px; color:#555; }


/* ----- CONTACT  ----- */

#form { padding:0 0; position:absolute; top:85px; left:140px; }

#form .col { width:260px; margin-right:15px; float:left }

#form input, #form textarea { padding:6px 8px; width:220px; background:#fff; border:#ccc 1px solid}
#form .row { margin:0 0 10px 0;}
#form label {  margin:0 0 7px 0; display:block;}
#form .row.rowlong { margin:0 0 10px 0; }
#form input.short { width:25px; margin-right:5px; float:left}
#form fieldset { margin-bottom:10px; font-size:20px; }

#form label.label-short { display:inline; float:left; margin-right:8px; padding:5px 0; }

.btn a { background:#7A8C9D;  padding:7px 15px; color:#fff; font-size:16px }
.btn a:hover { color:#fff; }
	
.tableoptions td { width:30%; }
#form .tableoptions td input.short { width:70px; }
#form .tableoptions td label { line-height:90%; margin-top:5px; }

/* ----- footer ----- */

#footer ul { display:inline; list-style:none;}
#footer li { float:left; margin-right:10px; padding-right:10px;  color:#555; font-size:13px; border-right:#ccc 1px solid}
#footer li a { color:#555}
#footer li a:hover {}

#footer li.credit { float:right; }
#footer li.credit2 { float:right; border:none; margin-right:0; padding-right:0;}
#footer li.twitter { background:url(../i/icon-twitter.png) no-repeat 0 50%; padding-left:20px; }
#footer li.facebook { background:url(../i/icon-fb.png) no-repeat 0 50%; padding-left:20px; }



/* ----- global paragraphs, headers & horizontal rules ----- */
p, h1, h2, h3, h4, h5, h6{margin:0 0 15px;}
h1{font-size:140%;}
h2{font-size:130%;}
h3{font-size:120%;}
h4, h5{font-size:100%;}
hr{display:none;}

/* ----- global links ----- */
a {
	color:#777;
	text-decoration:none;
}
a:hover{color:#7A8C9D;}










/* ----- float fix ----- */
#wrapper:after, #header:after, #side:after, #main:after, #mid:after, #footer:after, .box:after{
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
#wrapper, #header, #side, #main, #footer, .box{display:block;}
/*  \*/
#wrapper, #header, #side, #main, #footer,.box {min-height:1%;}
* html #wrapper, * html #header, * html #side, * html #main, * html #footer, * html .box {height:1%;}
 /*  */
/* ----- end float fix ----- */