@charset "UTF-8";
/* www.panoptika.net */

/*Reset*/
html, body, 
/* Structures */div, span, applet, object, iframe, 
/* Text */h1, h2, h3, h4, h5, h6, p, blockquote, a, em, img, ins, q, small, strong, b, u, i, center,
/* Lists */dl, dt, dd, ol, ul, li,
/* Forms */fieldset, form, label, legend,
/* Tables */table, caption, tbody, tfoot, thead, tr, th, td{margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent}
ol, ul, li{list-style:none}
table{border-collapse:collapse; border-spacing:0}/* tables still need 'cellspacing="0"' in the markup */
img{border:0}
strong{font-weight:bold }
em{font-style:italic; font-weight:normal}
table {margin:1em 0}

/* eliminate page shift on Mozilla browsers */
html{overflow-x:auto; 
min-height:100%;
margin-bottom:1px;
overflow-y:scroll}

/* GLOBAL STYLES */
html, body {height:100%; font-size: 100%} /* sets footer to bottom */
body { font: 62.5%/1.5em Arial, Helvetica, sans-serif; color: #000; text-align: center; background: #e1e1d8 url(../back_palecolour.gif) repeat; }
body.portraits {background: #e1e1d8 url(../_css/none); width: 620px}

/*Typography*/
h1,h2,h3,h4,h5,h6{ font-weight:normal; text-transform: uppercase; }

h1#site_header { width:380px; height:48px; background:url(http://www.panoptika.net/abuttons/logo.gif) no-repeat 0 0; text-indent:-9999em; margin:1.8em 0 0 0; float: left; }

h2{ font-size: 1.4em; color: #333; padding-top: 1.5em; float: left; }/* subHead page headings */ 
h2.info{ font-size: 1.4em; margin:0 0 1em 0; padding:0; float: none; color: #000000; font-weight: bold; }
h3{ font-size: 1.2em; margin:2em 0 1em 0; padding:0; float: none; font-weight: bold; text-transform: none; }
h4{ font-size: 1.4em; line-height: 1.5em; margin:0 0 1.5em 0; }
#workdonecontent h4{font-size: 1.2em; letter-spacing: 0.15em; left: 0; padding-top: 3em}/* WORK DONE pg*/ 

#content_cd h4 { padding: 0 0 0.25em 0; text-align: left; color: #666; font-size: 2em; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; margin: 0; line-height: normal; }/* cd/bookcovers enlargments*/
h5{ line-height: 1.5em; margin:0 }
#content_cdthumbs h5 { padding-right: 3px; font-style: italic; margin: 1em 0 0.25em 0; font-size: 12px; color: #333333; text-transform: capitalize; }
#content_bookcvrs h5 { padding-right: 3px; font-style: italic; margin: 1em 0 0.25em 0; font-size: 12px; color: #333333; text-transform: capitalize; }
h6{ font-size: 1.4em; line-height: 1.5em; margin:0 0 0.75em 0em }
#content_cdthumbs h6, #content_bookcvrs h6{ font-size: 1.1em; line-height: 1em; color: #333333; margin: 0; text-transform: capitalize; font-weight: bold; }


a:link, a:visited {color: #993333; text-decoration: none }
a:hover { color: #666; }
p, li, em, strong, h5  {font-size: 12px} /* 1em = 12px */ 
p {line-height: 18px; margin: 0 0 1.5em 0} /* 1.5em = 18px */  
ul {margin:0 0 1.5em 0} /* used on az and clientlist page **/ 
li { line-height: 1.5em; color: #333; text-transform: none; padding-bottom: 0em }
ul{padding-bottom: 1.5em}
#footnote { position: absolute; top: 600px; clear: both; }
p.foot_right  { font-size: 1.1em; padding: 2em 0 0; float: right; width: 400px; text-align: right; } /* footer message "email..." */
p.foot_left  { font-size: 1.1em; padding: 2em 0 0; text-align: left; float: left; width: 300px; } /* footer message "click once on any image..." */
#licenseinfo p { font-size: 1.1em; padding-top: 1.5em;}
#content_cd p {font-size: 1.2em;}
#content_bookcvrs .txt_box p, #content_cdthumbs .txt_box p{ font-size: 11px; margin: 5px 0 0 0; color: #666666; line-height: 1.5em; }
#workdonecontent #leftcolumn p { letter-spacing: 0.05em; margin: 1.8em 0; font-size: 1.5em; line-height: 1.8em; }

#containerport p { padding: 0 10px 0 0; margin: 0; font-size: 1.1em; line-height: 1.5em }
#containerport p.title { font-size: 1.2em; font-weight: bold; padding: 9px 0 0 0}

/*LAYOUT */ 
#indexcontent, #subHeadNav, #content, #containerlibfull,#containerlib,#containerworkdonecd,#workdonecontainer,#containercd,#subHeadNav,#content_commss,#footnote { width:970px }
#wrap{ width:100%; margin:0 auto; min-height:100%; position:relative; background: url(../bkgrd_header.gif) repeat-x; }
#container{ width:970px; margin:0 auto; text-align:left; padding-bottom: 36px }/* bottom padding for footer  - normally on #content - but this site set diff*/
#header { height: 81px; background: #898375 url(../abuttons/back_navgreycol.gif) repeat; padding: 0; margin: 0 }
#mainNav { float: right; margin: 0;/* 0 on margin to avoid margin collapse **/ padding: 54px 0 0 0; text-align: left; width: 500px; overflow: visible }
#mainNav a:link, #mainNav a:visited { margin: 0 27px 0 0; padding: 0; overflow: visible }
#mainNav a:link.last, #mainNav a:visited.last {margin-right: 0}

#content_full {clear: both}/* client list, newimages, video */

/* INDEX Page*/
#banner { padding: 0; margin: 0; height: 194px }
#indexcontent { overflow: auto; padding: 0; text-align: center; }
#indexcontent .indexcell { height: auto; padding: 36px 0 0 0; width: 33%; float: left }
#indexcontent .indexcell a:link, 
#indexcontent .indexcell a:visited { padding: 0; letter-spacing: 0.15em; text-transform: uppercase; font-weight: lighter; font-size: 11px; color: #FFFFFF; height: 153px; width: 179px; display: block; position: relative; margin: 0 auto; background: #898375 url(../abuttons/back_navgreycol.gif) repeat  }
#indexcontent .indexcell a:hover { color: #FFFF66; font-weight: bold; }
#indexcontent .indexcell img { display: block; margin: 0 auto; padding: 4.5px 0 0 0 }
#indexcontent p { line-height: 1.8em; margin: 0; padding: 1em 0 1.5em; text-align: center; overflow: visible; clear: both; font-size: 1.3em; }
#indexcontent p.big { padding: 1em 0 0; font-size: 1.9em; }
#indexcontent p.email { padding: 0; margin: 0; font-size: 1.3em; } /** spacing above email **/
#indexcontent a:link.email, 
#indexcontent a:visited.email { padding: 0 18px 0 0; margin: 0 } /** spacing above email **/
#indexcontent a:hover.email {text-transform: lowercase}

/*LAYOUT contd*/ 
#categNav { height: 30px; clear:both; margin: 0; padding: 0 }

#subHead { clear:both; margin: 0; padding: 0; }
#subHeadNav p { padding: 15px 0px 0 0; letter-spacing: 0.2em; text-align: right; margin: 0 0 2em 0; } /* az page - version eng/fr */
#subHeadNav p.numbers { color: #000; font-size: 1.4em; letter-spacing: 1px; } /* affects page numbers 12... */
#subHeadNav img {vertical-align: top; padding: 0 0 0 10px} /* ARROWS on az and cd pages see individual sections below */

#subHeadNav a:link, 
#subHeadNav a:visited { text-align:right; text-transform: none; color: #999; }
#subHeadNav a:hover {color: #CC6600}
#subHeadNav a:active {color: #333}
#subHeadNav img.az {vertical-align: top; padding: 0 0 0 5px} /* for arrows on az pages only / 5px pad btwn text and arrow */

#leftcolumn { float: left; display: inline; text-align: right; width: 380px; }
#rightcolumn { float: right; width: 500px }/*license, newsletter, contact, copyright pages */
#leftcolumn.wd { float: left; width: 353px; margin-left:0; } 

/* az page*/
#az { float: left; width: 100%; margin-top: 1em; }
#az a:link, #az a:visited { color: #666666; text-decoration: none }
#az a:hover { color: #993333; }
#az li.sub, #az li.sub { padding-top: 1.5em }
.column1 { width: 280px; float: left; overflow: hidden; }
.column2 { float: left; display: inline; width: 350px; }
.column3 { float: right; width: 324px; margin-bottom: 36px; overflow: visible; }
.column3 p { padding: 0; margin: 0; }

/* WORK DONE Page*/
#workdonecontent .featurecell {border-bottom: 3px solid #898375; height: auto; padding: 0 0 5px 0}/* HOME + work done pages */
#workdonecontent #rightcolumn img {padding: 9px 3em 9px 0; float: left}/* work done pages */
#workdonecontent .featurecell2 {height: auto; padding: 9px 0 0 0} /*  for last cell of column /without border bottom */

/* new images + video PAGE */
#content_lib { clear: both; }
#content_lib img,#content_full img {border: 1px solid #D2D0B5}
#content_lib a:hover img,#content_full a:hover img {border: 1px solid #666}
#content_lib td, #content_full td {padding: 0 4px 5px 0; border: 0 solid #fff; vertical-align: top; text-align: left} 

/* bookcovers and cdthumbs*/
#content_cdthumbs a:link,#content_bookcvrs a:link,
#content_cdthumbs a:visited,#content_bookcvrs a:visited { text-transform: none} /* to stop lowercase setting */
#content_bookcvrs { width:1010px }
#content_cdthumbs { width:1010px }
#content_bookcvrs div.box{ display: block; float: left; width: 180px; height: 414px; margin: 0 21px 15px 0; padding: 0 0 10px 0 }
#content_cdthumbs div.box{ display: block; float: left; width: 180px; height: 288px; margin: 0 19px 1.5em 0; padding: 0 0 1.5em 0 }
#content_bookcvrs div.box .img_box { width: 170px; height: 220px; position: relative; }
#content_cdthumbs div.box .img_box { width: 156px; height: 165px; position: relative; }

div.box .img_box img { border: 1px solid #B9B9B9; bottom: 0px; left: 0px;position: absolute;}
div.box .txt_box{ font-size: 10px; text-align: left; width: 180px}

/* cd enlargements page */ 
#content_cd td.title { width: 288px; height: 144px; overflow: visible; vertical-align: top; }
#content_cd img { padding: 9px 9px 9px 0 }
#subHeadNav img.back {vertical-align: top; padding: 0 5px 0 35px} /* for arrows on az pages only / 5px pad btwn text and arrow */
a:link.CDInfoLink, 
a:visited.CDInfoLink {text-transform: capitalize; color: #666633} /*Lynch  website link*/

/* other work and videos page*/ 
#content_commss #cell { float:left; position: relative; left: 0; top: 10px; margin-bottom: 10px; width: 100%; }
#content_commss #cell img { margin: 0 5px 0 0; }
#content_commss #img { float:left; width: 580px; padding: 0; margin: 0 20px 0 0 }
#content_commss #text { padding: 0; float: left; position: relative; width: 360px; color: #666666; }
#content_commss iframe {border: 1px solid #B9B9B9;}

/*  PORTRAITS PAGE */
#containerport { clear: both; float: left; width: 100% }
#containerport td { vertical-align: top; margin: 0; padding-bottom: 20px; width: 16%}
#containerport img { }
#containerport div.box{ display: block; float: left; width: 150px; height: 288px; margin: 0 4.5px 18px 0; padding: 0 0 9px 4.5px; }
#containerport div.box .img_box { width: 150px; height: 160px; position: relative; }
#containerport div.box .img_box img { border: 1px solid #B9B9B9; left: 0px; position: absolute; top: 0px; }
#containerport div.box .txt_box{ font-size: 10px; text-align: left; width: 150px }
 

/* portrait images  - body portrait style  see top */
#portraits {position: relative; width: 620px; left: 0; top: 0}
#portraits #header  { height: 54px; padding: 0; margin: 0; background: #898375 }
#portraits #header   h1  { margin: 0; text-align: left; padding: 9px 0 0 170px }
#arrows  {clear: both; text-align: right; margin: 0}
#arrows img.arrowsright  {margin: 0 27px 0 19px; padding: 9px 0 9px 0 }
#arrows img.arrowsleft  {margin: 0 27px 0 0; padding: 9px 0 9px 0 }
#portrait_img { margin: 0 auto; width: 620px; clear: both; height: 460px }
#portraits img.center   {margin: 0 auto; display: block}
#portraits p {font-size: 10px; color: #333; font-family: Verdana, Arial, Helvetica, sans-serif}
#portraits p.title  { }
#portraits a:link {text-transform: capitalize; color: #993300}

/* client list info page*/ 
.clientscolumn { float: left; width: 290px; margin-right: 20px; }
.clientscolumn li { font-size: 1.2em }
.clientscolumn li a:link, .clientscolumn li a:visited {  color: #666;text-transform: none }
.clientscolumn li a:hover { color: #993333;text-decoration: none }
#clientcolumn { padding: 0; float: left; width: 970px; overflow: hidden }

/*footer styles */
#footerbkgrd { position:absolute; bottom:0; height:37px; background: url(../bkgrd_header.gif) repeat-x; left: 0; width: 100% }
#footer { position:absolute; z-index: 100; bottom:0; width:100%; height:37px; right: 0 }
#footer img {padding: 0; vertical-align: top}
ul.footer { white-space: nowrap; margin: 0 auto; border: 0 none; padding: 9px 0 0 0; text-align: right; width: 970px }
ul.footer li {display: inline; color: #333; list-style-type:none; padding:0}
ul.footer li a:link, ul.footer li a:visited, ul.footer li a:active { padding: 0 0 0 25px }

.spacer {clear:both}/* forces div container to recognise containing elemnts / to stretch vertically */

.clearfloat {clear:both; height:0;font-size: 1px;line-height: 0}/* to be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */

 /* bak2top*/
#bak2top { margin: 0 9px 18px 0; padding: 0; clear: both; text-align: right; }
#bak2top a { font-size: 1em; text-decoration:none; font-weight: normal; text-align: right; color: #993333; }
#bak2top a:hover { text-decoration:none; color: #666666 }

#error404 h4 { text-align: center; font-size: 1.8em; line-height: 3em; font-weight: bold; font-family: Tahoma, Helvetica, sans-serif; padding-bottom: 9px }
#error404 p { text-align: center; line-height: 3em }

img.flag { padding: 0; margin: 0 0 0 9px; float: right }


/* slideshow*/
#slideshow { }
#slideshow p { margin: 0 0 5px 0; padding: 0; clear: both; text-align: right; }
#SLIDESTEXT { padding: 10px 0 10px; color: #333333; letter-spacing: 0.1em; }
#slidenames  { width: 402px; }


.caption_arrows {margin: 0 20px}


a:hover, a:focus {
        color:#000;
        text-decoration:none;
    }
a[rel="external"] {
        padding-right: 13px;
        background-image: url(../a_images/external-red.gif);
        background-position: top right;
        background-repeat: no-repeat;
    }

a[rel="external"]:hover,
a[rel="external"]:focus {
        background-image: url(../a_images/external-grey.gif);
    }