/* pamiam.ca styles */

html, body {height: 100%;}
body {
margin: 0;
padding: 0;
background-color: #fff;
font: 75% Arial, Helvetica, sans-serif;
color: #666;
text-align: center;
}

p, div, td {
margin-top: 0px;
font: 1em Arial, Helvetica, sans-serif;
color: #666;
}
p {
text-align: justify;
}
ul {
list-style: square;
margin-top: 0;
margin-left: 0em;
padding-left: 2em;
}

a {text-decoration: none;}
a:link {color: #FF9900;}
a:visited {color: #669900;}
a:hover {color: #99CC00; text-decoration: none;}

h1, h2, h3 {
margin-top: 0px;
font-size: 100%;
color: #666;
font-weight: normal;
}
h2 {
font-size: 117%; 
font-weight: bold;
}
h3 {margin: 0; font-weight: bold;}

#container {
position: relative;
min-height: 100%;
text-align: center;
}
#box {
width: 740px;
margin: 24px auto 0;
text-align: left;
}
#topnav {
overflow: hidden; /* clear nested floats */
padding: 0 10px 0 0;
}
#home-button, #logo {
float: left;
margin: 1px 0 0 5px;
}
#smsquares {
float: right;
position: relative;
}
#smsquares, #smsquares ul, #smsquares li {
margin: 0;
padding: 0;
list-style: none;
}
#smsquares li {float: left;}
#smsquares li:hover, #smsquares li.hover { /* fix for IE7 sticky menu bug */
position: static;
}
#smsquare-about a {
background: #669900;
}
#smsquare-contact  a {
margin: 0 10px;
background: #99cc00;
}
#smsquare-projects a {
background: #ff9900;
}
#smsquare-about a:hover {
background: #b3cc80;
}
#smsquare-contact a:hover {
background: #cce680;
}
#smsquare-projects a:hover {
background: #ffcc80;
}
.smsquare {
display: block;
width: 24px;
height: 24px;
}
.smsquare img {
width: 24px;
height: 24px;
}
#smsquares li ul { /* second-level lists */
position : absolute;
left: -999em; /* hide sub-menus */
right: 0px;
width: 100px;
margin: -17px 105px 0 0;
}
#smsquares li li {
width: 100px;
font-size: 14px;
font-weight: bold;
color: #aaa;
letter-spacing: 2px;
text-align: right;
}

#smsquares li:hover ul ul, #nav1 li:hover ul ul ul, #nav1 li:hover ul ul ul ul, #nav1 li:hover ul ul ul ul ul, #nav1 li:hover ul ul ul ul ul ul, #nav1 li:hover ul ul ul ul ul ul ul, #nav1 li:hover ul ul ul ul ul ul ul ul, #nav1 li:hover ul ul ul ul ul ul ul ul ul, #nav1 li:hover ul ul ul ul ul ul ul ul ul ul,
#smsquares li.sfhover ul ul, #nav1 li.sfhover ul ul ul, #nav1 li.sfhover ul ul ul ul, #nav1 li.sfhover ul ul ul ul ul, #nav1 li.sfhover ul ul ul ul ul ul, #nav1 li.sfhover ul ul ul ul ul ul ul, #nav1 li.sfhover ul ul ul ul ul ul ul ul, #nav1 li.sfhover ul ul ul ul ul ul ul ul ul, #nav1 li.sfhover ul ul ul ul ul ul ul ul ul ul { /* hide third-and-above-level lists */
	left: -999em;
}

#smsquares li:hover ul, #smsquares li.sfhover ul { /* show lists nested under hovered list items */
left: auto;
}

h1#title{
clear: both;
width: 702px;
font-weight: bold;
font-size: 16px;
color: #aaa;
letter-spacing: 4px;
border-top: 2px solid #d3d3d3;
margin: 6px 0 30px 28px;
padding: 12px 0 0 0;
}
#main {
min-height: 240px;
margin: 0;
padding: 0 10px 12em 20px;
}
#main td {
text-align: left;
vertical-align: top;
}
#leftcol {
padding: 0 24px 0 50px;
}
#rightcol{
padding: 0 0 0 12px;
border-left: 1px solid #d3d3d3;
}

#about-content {
width: 710px;
min-height: 280px;
background: url(/images/aboutheading.gif) no-repeat -11px -18px;
}
#about-content #leftcol {
width: 200px;
}
#contact-content {
width: 710px;
min-height: 280px;
background: url(/images/contactheading.gif) no-repeat -11px -18px;
}
#contact-content #leftcol {
width: 400px;
}
#form {height: 280px; padding: 0 0 0 80px;}
#form td {text-align: right; padding: 0 0 8px 0;}
#form input, #form textarea {border: 1px solid #aaa;}

#projects-content {
position: relative;
width: 710px;
min-height: 280px;
background: url(/images/projectheading.gif) no-repeat -11px -18px;
}
#projects-content #leftcol {
width: 200px;
float: left;
}
#projects-lightbox {
float: right;
width: 424px; 
min-height: 200px;
padding: 10px 0px 0px 10px;
border: 1px #d3d3d3 solid;
}
#projects-lightbox a img {
float: left;
margin: 0 9px 19px 0;
border: 1px solid #fff;
}
#projects-lightbox a:hover img {border: 1px solid #99CC00;}

#projects-menu {text-align: right;}
.layer {
position: absolute; 
left: 50px; 
top: 0px; 
width: 440px; 
min-height: 260px;
padding: 10px 10px 20px;
border: 1px #d3d3d3 solid; 
z-index:1; 
visibility: hidden;
}
#Layer5 {width: 430px; padding: 15px;}
.sitelink {
margin: 4px auto;
text-align: center;
font-size: 10px;
}
.smallertext {font-size: 85%}
.siteheading {margin: 0;}
.formtext {font-size: 100%}

/* home page */

#squares, #squares ul, #squares li {
margin: 0;
padding: 0;
list-style: none;
}
#squares {
float: right;
margin: 20px 0 0;
}
#squares li {float: left;}
#square-about a {
background: #669900;
}
#square-contact  a {
margin: 0 20px;
background: #99cc00;
}
#square-projects a {
background: #ff9900;
}
#square-about a:hover {
background: #b3cc80;
}
#square-contact a:hover {
background: #cce680;
}
#square-projects a:hover {
background: #ffcc80;
}
.square {
display: block;
width: 90px;
}
.square img {
width: 90px;
height: 90px;
}
#squares li span {
display: block;
width: 90px;
padding: 6px 0 0;
background: #fff;
font-size: 14px;
font-weight: bold;
color: #aaa;
letter-spacing: 1px;
text-align: center;
}

#footer {
clear: both;
position: relative;
width: 100%;
min-width: 740px;
margin: -10em auto 10em;
font-size: 90%;
color: #999;
text-align: center;
}

#footer a:link {text-decoration: underline}
#footer a:visited {text-decoration: underline;}
#footer a:hover {text-decoration: none}