/* Alan Lewis Displays */

/* general attributes */
html { padding: 0px; margin: 0px; height: 100%; }
body { margin: 0px; padding: 0px; text-align: center; font-family: verdana, arial, helvetica, sans-serif; font-size: 70%; height: 100%; }
img { border: 0; }

/* Page */
#pageholder { width: 782px; padding: 0; margin: 10px auto; text-align: center; border: 1px solid #ccc; }
html > body #pageholder { width: 780px; padding: 0; margin: 10px auto; text-align: center; border: 1px solid #ccc; }
/*for Firefox*/


/* top */
#top { height: 320px; width: 780px; margin: 0; padding: 0; text-align: left; }

#topnav { background: url(../images/topbg.gif) no-repeat; margin: 0; padding: 0; width: 780px; height: 85px; }

#toplogo { float: left; margin: 0; padding: 5px 0 0 10px; }

#toplinks { float: right; margin: 0; padding: 0; }
#toplinks ul { margin: 0; padding: 67px 10px 0 0; }
#toplinks li { list-style: none; display: inline; margin: 0; padding: 0; }
#toplinks a { float: left; text-decoration: none; height: 14px; margin: 0; padding: 0; }
#link a.portfolio { float: left; height: 14px; width: 107px; background: url(../images/linkportfolio.gif) no-repeat; margin: 0; padding: 0; }
#link a.portfolio:hover { background-position: 0 -14px; color: #fff; }
#link a.system { float: left; height: 14px; width: 95px; background: url(../images/linksystem.gif) no-repeat; margin: 0; padding: 0; }
#link a.system:hover { background-position: 0 -14px; color: #fff; }
#link a.about { float: left; height: 14px; width: 84px; background: url(../images/linkabout.gif) no-repeat; margin: 0; padding: 0; }
#link a.about:hover { background-position: 0 -14px; color: #fff; }
#link a.news { float: left; height: 14px; width: 81px; background: url(../images/linknews.gif) no-repeat; margin: 0; padding: 0; }
#link a.news:hover { background-position: 0 -14px; color: #fff; }
#link a.contact { float: left; height: 14px; width: 73px; background: url(../images/linkcontact.gif) no-repeat; margin: 0; padding: 0; }
#link a.contact:hover { background-position: 0 -14px; color: #fff; }


#welcomebank { margin: 0 0 2px 0; padding: 0; width: 780px; height: 223px; }
#col1 { float: left; margin: 0; padding: 0; width: 180px; }
#col2 { float: left; margin: 0; padding: 0 0 0 20px; width: 580px; }
#col2 ul { list-style: none; }
#col2 li { display: inline; margin-right: 20px; background: url(../images/listportfolio_blue.gif) no-repeat; background-position: center left; text-transform: uppercase; }
#col2 li a { padding: 0 0 0 15px; color: #373737; font-size: 80%; }
#col2 li a:hover { padding: 0 0 0 15px; color: #424660; }

#portfolio { width: 390px; height: 111px; background: url(../images/banner_portfolio.gif) left top no-repeat; float: left; margin: 0; padding: 0; }
#portfolio:hover { background-position: 0 -111px; }
#system { width: 390px; height: 111px; background: url(../images/banner_system.gif) left top no-repeat; float: right; margin: 0; padding: 0; }
#system:hover { background-position: 0 -111px; }


#homecol1 { margin: 10px 0 10px 0; padding: 0; float: left; width: 389px; text-align: left; border-right: 1px solid #cccccc; }
#homecol1 h1 { color: #C8420D; font-size: 100%; margin: 0; padding: 10px 0 10px 25px; }
#homecol1 p { margin: 0; padding: 5px 25px 0 25px; color: #333333; line-height: 15px; }
#homecol1 a, homecol1 a:visited { font-size: 100%; text-decoration: none; color: #BA484A; padding: 0; margin: 0; font-weight: bold; }
#homecol1 a:hover { text-decoration: none; color: #51506A; }


#homecol2 { margin: 10px 0 10px 0; padding: 0; float: right; text-align: left; height: 250px; width: 390px; }
#homecol2 h1 { color: #BA484A; font-size: 100%; font-weight: bold; margin: 0; padding: 10px 0 10px 25px; }
#homecol2 a, homecol2 a:visited { text-decoration: none; color: #BA484A; padding: 0; margin: 0; font-weight: bold; }
#homecol2 a:hover { text-decoration: none; color: #51506A; }
#homecol2 p { margin: 0; padding: 0 20px 10px 25px; color: #333333; line-height: 15px; }
#homecol2 p.colour { margin: 0; padding: 5px 10px 0 25px; color: #BA484A; line-height: 15px; }

/* Page Title */
#topbar { margin: 0; padding: 0; width: 780px; height: 28px; background: #373737; text-align: left; }
#topbar h1 { color: #fff; font-size: 120%; font-weight: bold; margin: 0; padding: 5px 0 0 20px; text-transform: uppercase; }

#leftnav { margin: 0; padding: 0; width: 160px; float: left; text-align: left; }
#leftnav ul { border: 1px solid #ccc; background: url(../images/bgportfolio.gif) repeat-x; }
#leftnav li { background: url(../images/listportfolio.gif) no-repeat; background-position: center left; text-transform: uppercase; }
#leftnav a, leftnav a:visited { padding: 0 0 0 15px; color: #373737; font-size: 80%; }
#leftnav a:hover { padding: 0 0 0 15px; color: #BA484A; }
/*#leftnav li.indent {background: url(../images/clearpixel.gif) no-repeat 5px; padding: 0px 0 0px 15px; margin:0 0 0 10; border-bottom: 1px solid #EFF3D5;}
#leftnav li.indent2 {background: #FCFDF8 url(../images/clearpixel.gif) no-repeat 5px; padding: 5px 0 5px 35px; margin:0; border-bottom: 1px solid #E8E7FA;}
#leftnav .sublink {color:#990000; padding: 0; margin:0;}
#leftnav .sublink2 {color:#0066CC;padding: 0;margin:0;font-size: 65%;}*/

/* With left menu */
#content { margin: 0; padding: 0; width: 420px; float: left; text-align: left; }
#content h1 { color: #BA484A; font-size: 100%; font-weight: bold; margin: 0; padding: 0 0 0 20px; }
#content h2 { color: #BA484A; font-size: 100%; font-weight: bold; margin: 0; padding: 10px 0 0 0; }
#content p { color: #373737; font-weight: normal; margin: 0; padding: 10px 0 0 0; line-height: 15px; font-size: 80%; }
#content td { font-size: 80%; font-weight: normal; text-decoration: none; color: #434343; }
#content a, content a:visited { font-size: 100%; text-decoration: none; color: #373737; padding: 0; margin: 0; font-weight: normal; }
#content a:hover { text-decoration: none; color: #BA484A; }
#content ul { list-style: none; margin: 0; padding: 10px 0 0 20px; text-indent: 0; }
#content li { font-weight: normal; color: #373737; margin: 0; padding: 0 0 10px 10px; background: url(../images/bullit.gif) no-repeat 1px 5px; }

/* Without left menu */
#content2 { margin: 0 0 20px 0; padding: 0; width: 780px; float: left; text-align: left; }
#content2 h1 { color: #BA484A; font-size: 100%; font-weight: bold; margin: 0; padding: 0 0 0 20px; text-align: left; }
#content2 h2 { color: #BA484A; font-size: 120%; font-weight: bold; margin: 0; padding: 10px 0 0 0; }
#content2 h3 { color: #BA484A; font-size: 120%; font-weight: normal; margin: 0; padding: 0; }
#content2 h4 { color: #424660; font-size: 100%; font-weight: bold; margin: 0; padding: 0; text-transform: uppercase; }
#content2 p { color: #373737; font-weight: normal; margin: 0; padding: 10px 20px 0 0; line-height: 15px; }
#content2 td { font-size: 80%; font-weight: normal; text-decoration: none; color: #434343; }
#content2 a, content2 a:visited { font-size: 100%; text-decoration: none; color: #BA484A; padding: 0; margin: 0; font-weight: normal; }
#content2 a:hover { text-decoration: none; color: #51506A; }
/*#content2 ul {list-style: none; margin: 0; padding: 10px 0 0 20px; text-indent:0;}
#content2 li {font-weight: normal; color: #373737; margin:0; padding:0 0 10px 10px; background: url(../images/bullit.gif) no-repeat 1px 5px;}*/
#content2 p.year { text-align: right; margin: 0; padding: 0 20px 0 0; }
#content2 form.bg { background-color: #F3F5F7; margin: 10px; border: 1px solid #E7E7E7; padding: 5px; }
#content2 p.news { clear: both; margin: 0; padding: 5px 20px 0 20px; line-height: 15px; border-bottom: 1px solid #e7e7e7; font-size: 80%; }
br { clear: left; }


#category { margin: 0; padding: 0; width: 180px; float: left; text-align: left; }
#category h1 { color: #BA484A; font-size: 120%; font-weight: bold; margin: 0; padding: 0; }

/* Portfolio navigation*/
#portnav { margin: 10px 0 10px 10px; padding: 0 0 5px 0; }
#portnav p { border: 1px solid #ccc; background: url(../images/bgportfolio.gif) repeat-x; padding: 5px; margin: 0; }
#portnav ul { list-style: none; border: 1px solid #ccc; background: url(../images/bgportfolio.gif) repeat-x; margin: 0; padding: 0 0 3px 10px; }
#portnav li { padding: 5px 0; background: url(../images/listportfolio.gif) no-repeat; background-position: center left; text-transform: uppercase; }
#portnav li a { padding: 0 0 0 15px; color: #373737; font-size: 80%; text-decoration: none; }
#portnav li a:hover { padding: 0 0 0 15px; color: #BA484A; text-decoration: none; }

.frmSearch { margin: 0 0 20px 10px; padding: 5px 0 10px 5px; border: 1px solid #ccc; background: url(../images/bgFrmSearch.jpg) repeat-x; }
.txtInputSearch { border: 1px solid #ccc; font-size: 100%; font-family: verdana, arial, helvetica, sans-serif; padding: 0; margin: 2px 0; }
.btnFrmSearch { padding: 0; margin: 10px 0 0 0; text-align: right; }
form span.block { display: block; margin: 0 0 15px 0; }
form span.block label { width: 175px; display: block; float: left; clear: left; text-align: right; margin: 0; padding: 3px 5px 0 0; }

#listings { margin: 0 0 20px 30px; padding: 0; width: 570px; float: left; text-align: left; }
#listings h1 { color: #BA484A; font-size: 120%; font-weight: bold; margin: 0 20px 0 0; padding: 15px 0 5px 0; border-bottom: 1px solid #cccccc; }


#listings ul { list-style: none; margin: 0; padding: 10px 0 0 0; text-indent: 0; display: inline; }
#listings li { display: inline; float: left; margin: 10px 10px 0 0; padding: 0; text-decoration: none; background: #fff; color: #fff; width: 130px; height: 80px; text-align: center; }
#listings a, listings a:visited { display: block; margin: 0; padding: 0; text-decoration: none; background: #fff; color: #fff; height: 80px; }
#listings a:hover { display: block; margin: 0; padding: 0; text-decoration: none; background: #fff; color: #fff; }

/* Bottom Bar */
#footer { clear: both; width: 780px; height: 45px; background: #CCCCCC url(../images/bgfooter.gif) repeat; margin: 0px 0 0; padding: 0; }
#footer p { padding-left: 10px; text-align: left; padding-top: 10px; font-size: 80%; color: #666666; }
#footer a.nas { background: url(../images/nas.gif) no-repeat; display: inline-block; width: 35px; height: 35px; }
#footer a.safecert { background: url(../images/safe_cert.gif) no-repeat; display: inline-block; width: 96px; height: 35px; margin: 0 0 0 20px; }
#footer a.nas:hover, #footer a.safecert:hover { background-position: bottom; }

#frmcol1 { float: left; margin: 0; padding: 0; width: 390px; }
#frmcol1 p { margin: 0; padding: 0 0 0 20px; }
#frmcol2 { float: left; margin: 0; padding: 0; width: 390px; }
#frmcol1 p { margin: 0; padding: 0; }
#twoColLayout { margin: 0px; padding: 0px; width: 780px; }
#twoColLayout .row { clear: both; line-height: 18px; }
#twoColLayout .col1 { float: left; width: 50%; }
#twoColLayout .col2 { float: left; width: 50%; align: left; }

#threeColLayout { margin: 0px; padding: 0px; width: 780px; }
#threeColLayout .row { clear: both; line-height: 18px; }
#threeColLayout .col1 { float: left; width: 30%; }
#threeColLayout .col2 { width: 30%; align: center; }
#threeColLayout .col3 { float: right; width: 30%; align: right; }

.txtInput { border: 1px solid #373737; font-size: 100%; font-family: verdana, arial, helvetica, sans-serif; }

/*sitemap style*/
#sitemap { float: left; width: 240px; margin: 0 7px 0 7px; padding: 0px; }
#sitemap p { font-weight: normal; text-decoration: none; margin: 0; padding: 2px 0 2px 18px; color: #373737; }
#sitemap h2 { background-color: #F3F5F7; margin: 0 10px 0 10px; border: 1px solid #E7E7E7; padding: 3px 5px 3px 5px; }
#sitemap a, sitemap a:visited { text-decoration: none; color: #BA484A; font-weight: bold; }
#sitemap a:hover { text-decoration: none; background-color: transparent; color: #373737; }
#sitemap a.green, sitemap a.green:visited { text-decoration: none; color: #373737; font-weight: normal; font-size: 85%; }
#sitemap a.green:hover { text-decoration: none; background-color: transparent; color: #BA484A; }

/* Scrolling Gallery Styles */
#imagebank { margin: 0 0 2px 0; padding: 0; width: 780px; height: 130px; background: url(../images/bgimagebank.jpg) no-repeat; }
#imgMain { margin: 0 0 2px 0; padding: 0; width: 780px; height: 223px; background: url(../images/bgMain.gif) repeat-x; }
#imgMain img { height: 223px; border-left: 2px solid #fff; border-right: 2px solid #fff; }
#imgThumbs { margin: 0 0 2px 0; padding: 0; width: 780px; height: 100px; background: url(../images/bgThumbs.gif) no-repeat; }

#motioncontainer { margin: 0 auto; width: 700px; height: 80px; }

#motioncontainer a img { margin: 16px 5px; border: 5px solid #373737; border-bottom: 16px solid #373737; text-decoration: none; }
#motioncontainer a:hover img { margin: 16px 5px; border: 5px solid #424660; border-bottom: 16px solid #424660; text-decoration: none; }

/*Portfolio Thumbs & Overlay*/

.listThumb { position: relative; width: 130px; height: 80px; }
.listThumbOverlay { position: absolute; bottom: 0; left: 0; height: 30px; width: 130px; background-image: url(../images/listings-overlay.png); }
.listThumbOverlay p { color: #FFF; font-size: 11px; text-align: center; margin: 2px; }




#portfolioContainer {margin:0; padding:12px; width:756px; text-align:left;}
#portfolioContent { float:left; width:580px; margin:0px 18px 0 0; padding:0;}
#portfolioContent h1 {color:#a83335; font-size:180%; font-weight:normal; margin:0; padding:0;}
#portfolioContent h2 {font-size:120%; font-weight:bold; margin:0; padding:0;}

#portfolioRelated { float:left; width:120px; margin:50px 0 0 0; padding:0;}
#portfolioRelated h2 {font-size:140%; font-weight:bold; margin:0; padding:0 0 6px 0; border-bottom:1px solid #b7b5b5;}
#portfolioRelated ul { margin:0; padding:0; list-style-type:none;}
#portfolioRelated li{ border-bottom:1px solid #b7b5b5; padding:5px 0 6px 0; background:url(../images/arrow.jpg) no-repeat; font-size:120%;}
#portfolioRelated li a{ text-decoration:none; color:#000; padding-left:15px;}
#portfolioRelated li a:hover{ color:#a83335;}


#portfolioImages {width:580px; margin:17px 0 17px 0; padding:0; overflow:hidden;}
#portfolioImages ul{ margin:0 0 20px 0; padding:5px 0; list-style-type:none;}
#portfolioImages li{ float:left; margin:0 5px 5px 0;   border:1px solid #b7b5b5;}

#portfolioImages li img { max-width:150px; max-height:8em; }
 .wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 150px;
    height: 8em;
}
.wraptocenter * {
    vertical-align: middle;

}




#zoom { clear: left; background: url(../images/zoom.jpg) no-repeat; position: relative; margin: 0; }
#zoom a { text-decoration: none; position: absolute; bottom: 4; left: 20; color: #000; }
#zoom a:hover { color: #a83335; }
.clearLeft { clear: left; }