@charset "UTF-8";
/* Saint-Marc Expo CSS Document - Site Design and Production: 2007 Geoff White - www.geoffwhitedesign.com */

body {background-color: #fed253; text-align: center; margin: 0; font-size: 62.5%;}
#outer {width: 780px; margin: 0 auto; text-align: left; background-image:url(images/middle-bg.jpg); background-repeat:repeat-y; background-position: center;}
.home #shadowtop {background-image:url(images/top-bg-normal.jpg); background-repeat: no-repeat; background-position:center top;}
.masques #shadowtop {background-image:url(images/top-bg-masques.jpg); background-repeat: no-repeat; background-position: 1px 0px;}
#shadowbottom {background-image:url(images/bottom-bg-normal.jpg); background-repeat: no-repeat; padding:0 0 175px 0; background-position:center bottom;}
#inner {position: relative; top: 30px; left: 58px; margin: 0; width: 666px; font-size: 1.2em; font-family: Arial, Helvetica, sans-serif;}
#topnav {text-align: center; height: 115px;}
#topnav #logo {display: block; margin: 0 auto; border: none; padding-top: 5px}
#topnav p {margin: 6px 0; text-align: center;}
#topnav p a:link, #topnav p a:visited {padding: 0 7px; color:#003362; text-decoration: none;}
#topnav p a:hover {text-decoration: underline;}
#topnav p a:active {color: white;}

#titlebox {height: 130px;}
#titlebox p {clear: both; text-align: right;}
#titlebox a:link, #titlebox a:visited {color: white; font-weight: bold; font-style: italic; padding: 2px 10px 2px 30px; display: block; float: right; background:url(images/bullet.jpg) 3px 3px no-repeat;}
#titlebox a:hover {color:#5db0c8;}
#titlebox a:active {color:#e94131;} 
.titleimage {display: block; float: right; padding-top: 30px;}
.right-mini-column {float: right; display: block; width: 122px; margin-top: 5px;}
.right-mini-column img {display: block; clear: right; border:none;}
.left-mini-column {float: left; display: block; width: 122px; margin-top: 5px;}
.left-mini-column img {display: block; border:none;}

.masques #main-content {color: white; margin-bottom:30px;}
.masques .right-content {display: block; float: right; width: 286px; color: white; clear: right;}
.masques .left-content {display: block; width: 350px; color: white; clear:left;}

.masques #main-content p {padding: 0 124px;}
ul {padding: 0; margin-left: 0;}
ul li {list-style: none; background:url(images/bullet.jpg) 0px 1px no-repeat; padding-left: 28px; margin: 4px 0;}

.home {}
.home #main-content {margin-top: 52px; color: white;}

.masques {margin-top: 0;}

.masques h1 {font-size: 2.2em; font-family:"Times New Roman", Times, serif; font-style: italic; color: #e94131; font-weight: normal; letter-spacing: .5px; margin: 0 0 8px 0; padding:0; clear: none;}

.home h1 {font-size: 2.2em; font-family:"Times New Roman", Times, serif; font-style: italic; color: #e94131; font-weight: normal; letter-spacing: .5px; margin: 30px 0 8px 0; padding:0; clear: none;}

.home h1 a {color: #e94131; text-decoration: none; font-weight: normal;}
.home h1 a:active {color: white;}

h2 {font-size: 2.2em; font-family:"Times New Roman", Times, serif; font-style: italic; color: #e94131; font-weight: normal; letter-spacing: .5px; margin: 0 0 8px 0; padding:0; clear: both;}

h3 {font-size: 2.2em; font-family:"Times New Roman", Times, serif; font-style: italic; color: #e94131; font-weight: normal; letter-spacing: .5px; margin: 0 0 8px 0; padding:0; clear: none;}

p {margin:0 0 8px 0; text-align: justify;}
a:link, a:visited {color:#5db0c8; font-style: italic; font-weight: bold;}
a:hover {color:#e94131;}
a:active {color: white;}
.inset {width: 316px; float: right; background-image:url(images/inset-middle.jpg); background-repeat:repeat-y; padding:0; margin: 0 0 30px 30px; display: block;}
.inset div {background:url(images/inset-top.jpg) no-repeat top center; display: block; padding: 0;}
.inset p {margin: 0;}
.inset div blockquote {background:url(images/inset-bottom.jpg) no-repeat bottom center; display:block; padding: 10px 40px 40px 40px; margin: 0;}
.inset ul {padding: 0; margin-left: 0;}
.inset ul li {list-style: none; background:url(images/bullet-inset.jpg) 0px 1px no-repeat; padding-left: 28px; margin: 4px 0;}
img.thumb {float:left; display: block; padding: 9px; background:url(images/thumb-bg.jpg) top left no-repeat;  width:82px; height: 82px; margin-bottom: 24px;}
img.med {display: block; padding: 9px; background:url(images/med-bg.jpg) top left no-repeat; width:190px; height: 141px; margin-bottom: 24px; border: none;}
img.box {width:215px; height: 223px; padding: 9px; background:url(images/box-bg.jpg) top left no-repeat; float: right; display: block; margin:0 0 10px 10px;}

ul.grid {display: block; padding: 0; margin: 0 auto; clear: both; width: 688px;}
ul.grid li {list-style: none; background-image: none; display: block; float: left; padding: 0; margin: 0; width: 33%;}
ul.grid li.clear {list-style: none; background-image: none; display: block; float: none; padding: 0; margin: 0; height: 1px; line-height: 1px; clear:both; width: 688px;}
ul.grid li span {padding: 4px;}
.padright {margin-right: 18px;}
.grid a {text-decoration: none;}

/* Styles for Image Popups */
.pop-left {position: relative; z-index: 0; float: left; }

.pop-left:hover {background-color: transparent; z-index: 50;}

.pop-left span, .pop-right span {position: absolute; background-color: white; padding: 5px; left: -1000px; visibility: hidden; color: black; text-decoration: none;}

.pop-left:hover span {visibility: visible; top: -5px; left: 80px;}

.pop-right {position: relative; z-index: 0; display:block; float: right;}

.pop-right:hover {background-color: transparent; z-index: 50;}

.pop-right:hover span {visibility: visible; top: -5px; left: -380px;}


ul.grid .pop-left:hover span {visibility: visible; top: 40px; left: -110px;}

/* Styles for Forms */
.contactform {margin-top: 20px;}
.contactform p{
width: 400px;
clear: left;
margin: 0 auto;
padding: 10px 0 10px 0;
padding-left: 200px;
border-top: 1px dashed white;
height: 1%;
text-align:left;
}

.contactform label{
font-weight: bold;
float: left;
margin-left: -180px;
width: 200px; 
}

.contactform input[type="text"]{ 
width: 180px;
}

.contactform textarea{
width: 350px;
height: 150px;
}

* html .threepxfix{
margin-left: 3px;
}
.clear {display: block; clear: both;}