﻿/* Main Buffalypso CSS Document */

/************************************************************
PAGE DEFAULTS AND CONTAINERS
************************************************************/
html { /* General settings */
overflow: -moz-scrollbars-vertical; /* Make vertical scroll bar always display regardless of content - needed for FF */  
overflow: -moz-scrollbars-horizontal; /* Make horizontal scroll bar always display regardless of content - needed for FF */  
overflow-x: auto;
overflow-y: auto;
}
body { /* General settings for page content */
behavior:url("csshover.htc"); margin:0px; background-color:#FFFFFF; background-image: url('../images/main-background.gif'); background-repeat: repeat-x; background-position:top; font-size: 11px; font-family:Tahoma, Verdana, "Gill Sans MT", Arial; padding: 0px 0px 0px 0px; color:#636363; list-style-image: url('../images/orange-bullet.gif');
}
body a { /* set the default standard link style */
color:#fc9d22; font-weight:bold;
}
body a:active { /* set the default active link style */
color:#fc9d22; font-weight:bold;
}
body a:visited { /* set the default visited link style */
color:#fc9d22; font-weight:bold;
}
input.buffalypsoButton { /* Standard button style for site */
width: 100px; height: 17px; outline: none; border:1px solid #636363; background-image: url('../images/nav-background-bottom.gif');  background-repeat: repeat-x; background-position:bottom; color:#FFFFFF; font-weight:bold; font-size:11px; padding:0px; margin:0px;
}
input.buffalypsoButton:hover { /* Standard button hover style for site */
background-image: url('../images/nav-background.gif'); background-repeat: repeat-x; background-position:top;
}

/************************************************************
END OF PAGE DEFAULTS AND CONTAINERS
************************************************************/





/************************************************************
HEADER AND BANNERS
************************************************************/
#topdiv {
width: auto; min-width:902px; margin:0px; padding: 0px; background-color: #FFFFFF; background-image: url('../images/gradient-top.gif'); background-repeat: repeat-x; background-position:top;
}
#banner { /*Page Banner */
width:902px; margin:0 auto; padding:10px 0px 0px 0px;
}
#logo { /*Logo and tagline images */
color:#0066CC; font-size:20px; float:left;
}

/************************************************************
END OF HEADER AND BANNERS
************************************************************/





/************************************************************
MAIN HORIZONTAL NAVIGATION
************************************************************/

#topnav { /*Container div for the menu */
background-image: url('../images/nav-background.gif'); background-repeat:repeat-x; height:20px; width:inherit;  font-size:12px; font-weight:bold; clear:both; margin: 0;
}
#topnav-menu { /*Menu Div */
margin: 0 auto; width:902px; list-style-type: none;
}
#topnav-menu ul { /*Unordered list object */
list-style: none; margin: 0; padding: 0;
}
#topnav-menu li { /*Menu li block item */
float: left; width: 100px; height:20px; border:0px; background-image: url('../images/nav-background.gif'); background-repeat:repeat-x; color:#FFFFFF; text-decoration:none; text-align:center; display:block;
}
#topnav-menu li a { /*Menu links */
color:#FFFFFF; text-decoration:none; text-align:center;
}
#topnav-menu li:hover { /*Hover properties for list item */
color:#FFFFFF; text-decoration:none; text-align:center; width: 98px; border-bottom:3px solid #26d3f2; background:#949494; border-right: 1px solid #ffffff; border-left: 1px solid #ffffff; cursor: pointer; cursor: hand;
}
#topnav-menu li a:hover { /*Hover properties for list link */
color:#FFFFFF; text-decoration:none; text-align:center; width: 98px; border-bottom:3px solid #26d3f2; background:#949494; border-right: 1px solid #ffffff; border-left: 1px solid #ffffff; cursor: pointer; cursor: hand;
}
#topnav-menu li.active { /* The current page */
float: left; width: 98px; background-image: url('../images/nav-active.gif'); background-repeat:repeat-x; border-right: 1px solid #ffffff; border-left: 1px solid #ffffff; color:#FFFFFF; text-decoration:none; text-align:center; display:block;
}
/** fix ie bug with display:block; **/
* html #topnav-menu li a { height: 1%; } 
* html #topnav-menu li hr { height: 1%; }
/** end fix **/


/* Control Panel Menu Div */

#topnav-cp { /*Control Panel Div */
float:right; list-style-type: none;
}
#topnav-cp ul { /*Unordered list object */
list-style: none; margin: 0; padding: 0;
}
#topnav-cp li { /*Menu li block item */
float: left; width: 100px; height:17px; border:0px; background-image: url('../images/nav-background.gif'); background-repeat:repeat-x; color:#FFFFFF; text-decoration:none; width: 100px; text-align:center; display:block;
}
#topnav-cp li a { /*Menu links */
color:#FFFFFF; text-decoration:none; text-align:center;
}
#topnav-cp li:hover { /*Hover properties for list item */
color:#FFFFFF; text-decoration:none; text-align:center; width: 98px; border-bottom:3px solid #26d3f2; background:#949494; border-right: 1px solid #ffffff; border-left: 1px solid #ffffff; cursor: pointer; cursor: hand;
}
#topnav-cp li a:hover { /*Hover properties for list link */
color:#FFFFFF; text-decoration:none; text-align:center; width: 98px; border-bottom:3px solid #26d3f2; background:#949494; border-right: 1px solid #ffffff; border-left: 1px solid #ffffff; cursor: pointer; cursor: hand;
}
#topnav-cp li.active { /* The current page */
float: left; width: 98px; border-bottom:3px solid #26d3f2; background:#636363; border-right: 1px solid #ffffff; border-left: 1px solid #ffffff; color:#FFFFFF; text-decoration:none; text-align:center; display:block;
}
/** fix ie bug with display:block; **/
* html #topnav-cp li a { height: 1%; } 
* html #topnav-cp li hr { height: 1%; }
/** end fix **/


/************************************************************
END OF MAIN HORIZONTAL NAVIGATION
************************************************************/





/************************************************************
CENTRAL PAGE CONTENT
************************************************************/

#masterPageContent { /*Main div displays all .aspx content */
margin: 0 auto; clear:left; margin-bottom:0px; width:892px; background-color:#FFFFFF; padding: 5px; padding-top:10px; color:#636363; font-size:12px; overflow:visible;
}


/************************************************************
HOME PAGE */

#home-header { /*The header text image on the home page */
width:auto; text-align:right;
}
p.homep { /*Home paragraphs */
margin:10px;
}


/************************************************************
PORTFOLIO PAGE */

#portfolio-header { /*The header text image on the portfolio page */
width:auto; text-align:left;
}
table.portfolio { /*Portfolio table */
border-collapse:collapse; margin:10px; width:856px;
}
table.portfolio th { /*Portfolio table header */
text-align:center; font-weight:bold;
}
table.portfolio td { /*Portfolio table cells */
text-align:center; border:0px;
}
img.screenshot-small { /*Site screenshot images */
border:2px solid #c9c9c9;
}
p.portfolio { /*Portfolio paragraphs */
margin:10px;
}
a.portfoliositeLink { /*Portfolio site links */
color:#636363; text-decoration:none; font-weight:normal;
}
a.portfoliositeLink:hover { /*Portfolio site links hover */
text-decoration:underline;
}
a.portfoliositeLink:active { /*Portfolio site links */
color:#636363; text-decoration:none; font-weight:normal;
}
a.portfoliositeLink:visited { /*Portfolio site links */
color:#636363; text-decoration:none; font-weight:normal;
}
.portfolioModalBackground { /*Portfolio Popup background page settings */
position:absolute; left:0; top:0; background-color:Gray; filter:alpha(opacity=70); opacity:0.7; z-index:10;
}
.portfolioModalPopup { /*Portfolio Popup style and colours */
background-color:#FFFFFF; border-width:3px; border-style:solid; border-color:Gray; padding:3px; width:500px; height:351px;
}
table.portfoliopopup { /*Portfolio popup content table */
width:500px;
}
table.portfoliopopup th{ /*Portfolio popup table headers */
border-bottom:1px solid #636363; color:#fc9d22; font-size:14px;
}
table.portfoliopopup td.footer{ /*Portfolio popup table footers */
border-bottom:1px solid #636363; border-top:1px solid #636363; color:#fc9d22; height:12px; text-align:center;
}
table.portfoliopopup td.closebutton{ /*Portfolio popup close button cell */
padding:5px;
}
table.portfoliopopup td.details{ /*Portfolio popup details cell */
vertical-align:top; margin:0px; padding:0px;
}
table.portfoliopopup ul{ /*Portfolio popup details list */
margin:0px; padding-left:23px; padding-top:3px;
}
table.portfoliopopup a.techs{ /*Portfolio popup technology links */
color:#fc9d22; font-weight:normal; text-decoration:none;
}
table.portfoliopopup a.techs:hover{ /*Portfolio popup technology links hover*/
color:#636363;
}
#dhtmlfloatie{ /*Portfolio popup technology links javascript hover details */
position: absolute; left: 0; left: -900px; filter:alpha(opacity=0); -moz-opacity:0; border: 2px solid black; padding: 3px; z-index: 12000; opacity:0;
}
#dhtmlfloatiecontainer{ /*Portfolio popup technology links javascript hover container to fix IE6 z-index */
z-index: 11000;
}
#dhtmlfloatie h1{ /*Portfolio popup technology links header style */
color:#fc9d22; font-size:14px; padding: 0px; margin:0px; margin-bottom:2px; border-bottom:1px solid #636363;
}
#dhtmlfloatie p{ /*Portfolio popup technology links p style */
color:#636363; font-size:12px; padding: 0px; margin:0px;
}
table.portfolioimageswap td { /*Portfolio popup image swap cells */
color: #FFFFFF; font-weight: bold; font-size: 25px; text-align:center;
}
table.portfolioimageswap div.portfolio { /*Portfolio popup swap image cell style 1 */
padding:0px; margin:0px; height:100%;
}
table.portfolioimageswap div.portfolio1over { /*Portfolio popup swap image cell style 1 */
background-color:#26d3f2; height:50px; width:100%; padding-top:15px; filter:alpha(opacity=70); opacity:0.7;
}
table.portfolioimageswap div.portfolio2over { /*Portfolio popup swap image cell style 2 */
background-color:#b611f3; height:50px; width:100%; padding-top:15px; filter:alpha(opacity=70); opacity:0.7;
}
table.portfolioimageswap div.portfolio3over { /*Portfolio popup swap image cell style 3 */
background-color:#22fc46; height:50px; width:100%; padding-top:15px; filter:alpha(opacity=70); opacity:0.7;
}
table.portfolioimageswap div.portfolio4over { /*Portfolio popup swap image cell style 4 */
background-color:#fc9d22; height:50px; width:100%; padding-top:15px; filter:alpha(opacity=70); opacity:0.7;
}


/************************************************************
THE TEAM PAGE */

#theteamtable { /*The Team table */
border:0px; width:880px; margin-left:6px; padding:0px;
}
#theteamtable th { /*The Team table header */
text-align:center; font-weight:bold; color:#FFFFFF; margin: 0px; padding:0px; border-right:3px solid #ffffff; border-bottom:3px solid #ffffff; border-top:3px solid #ffffff;
}
#theteamtable th a { /*The Team table header links */
color:#FFFFFF; font-weight:bold; text-decoration:none;
}
#theteamtable th a:active { /*The Team table header active link style */
color:#FFFFFF; font-weight:bold; text-decoration:none;
}
#theteamtable th a:visited { /*The Team table header visited link style */
color:#FFFFFF; font-weight:bold; text-decoration:none;
}
#theteamtable th.ric { /*The Team table header for Ric */
background-color: #26d3f2; width:25%; margin:0px; padding:0px;
}
#theteamtable th.chris { /*The Team table header for Chris */
background-color: #b611f3; width:25%; margin:0px; padding:0px;
}
#theteamtable th.dave { /*The Team table header for Dave */
background-color: #22fc46; width:25%; margin:0px; padding:0px;
}
#theteamtable th.alex { /*The Team table header for Alex */
background-color: #fc9d22; width:25%; margin:0px; padding:0px;
}
#theteamtable td { /*The Team table cells */
text-align:left; vertical-align:top; padding:0px; margin:0px;
}
#theteamtable td.spacer { /*The Team table spacer cells */
border:0px; height:15px; margin:0px; padding:0px;
}
#theteamtable td.vspacer { /*The Team table vertical spacer cells */
border:0px; width:15px;
}
#theteamtable td.contact-overview { /*The Team table overview text */
color:#603912;
}
div.picture-contacts img { /*The Team portrait images */
border:0px; width: 217px; height: 282px; padding:0px; margin:0px;
}
div.picture-contacts { /*The Team portrait image divs */
text-align:left; width: 220px; background-color:#ffffff; margin:0px;  padding:0px;
}
#theteamtext { /*The Team text for individual descriptions  */
height:282px; overflow:scroll;
}
p.theteamp { /*The Team paragraphs */
margin:10px;
}


/************************************************************
CONTACT US PAGE */

#contactus-header { /*The header image on the home page */
width:auto; text-align:left;
}
table.contactustable { /*Contact Us table */
margin:5px;
}
table.contactustable th { /*Contact Us table header */
text-align:right; font-weight:bold; color:#fc9d22; padding-right:10px; height:20px; width:45%;
}
table.contactustable td { /*Contact Us table cells */
text-align:left;
}
table.contactusformtable { /*Contact Us Form table */
margin:5px; width:540px;
}
table.contactusformtable th { /*Contact Us Form table header */
vertical-align:text-top; text-align:right; font-weight:bold; color:#fc9d22; padding-right:10px; height:20px; width:220px;
}
table.contactusformtable td.field { /*Contact Us Form table cells */
text-align:left; width:140px; padding:1px;
}
table.contactusformtable td.validation { /*Contact Us Form validation cells */
text-align:left; width:180px; padding-left:5px; padding-top:0px;
}
table.contactusformtable td.fullwidth { /*Contact Us Form table full width cell */
vertical-align:middle; text-align:left; font-weight:bold; color:#fc9d22; padding-left:10px; height:25px;
}
table.contactusformtable td.buttons { /*Contact Us Form button cells */
text-align:center; padding-bottom: 5px;
}
p.contactusp { /*Contact Us paragraphs */
margin:10px;
}
input.contactusform { /*Contact Us form field styling */
font-size: 11px; text-align: left; padding: 2px; color: #636363; width:138px; font-family: Tahoma, Verdana, "Gill Sans MT", Arial;
}
select.contactusform { /*Contact Us form field styling */
font-size: 11px; text-align: left; padding: 2px; color: #636363; font-family: Tahoma, Verdana, "Gill Sans MT", Arial;
}
textarea.contactusform { /*Contact Us message box styling */
font-size: 11px; text-align: left; padding: 2px; color: #636363; font-family: Tahoma, Verdana, "Gill Sans MT", Arial;
}
span.contactusvalidation { /*Contact Us form validation text */
font-size:10px; font-weight:bold; color:black;
}


/************************************************************
END OF CENTRAL PAGE CONTENT
************************************************************/





/************************************************************
PAGE FOOTER AND EXTRAS
************************************************************/

#footer { /*Horizontal line and text above the bottom nav */
width: auto; border-top: 1px solid #636363; background-color:#FFFFFF; text-align:center;
}

#bottomnav { /*Links container at bottom of page */
margin: 0 auto; margin-top:0px; background-image:url("../images/nav-background-bottom.gif"); background-repeat: repeat-x; height:20px; width:902px; font-size:10px; margin-bottom:10px;
}
#bottomnav p { /*P tags to hold the links */
text-align: center; color: #FFFFFF; padding: 4px;
}

/************************************************************
END OF PAGE FOOTER AND EXTRAS
************************************************************/



/************************************************************
MODAL POPUP
************************************************************/

.watermark { /* Standard Modal Popup watermark */
background: #FFAAFF;
}
.popupControl { /* Standard Modal Popup control style */
background-color:#FFFFFF; position:absolute; visibility:hidden; border-style:solid; border-color: Black; border-width: 2px;
}
.modalBackground { /* Standard Modal Popup page background */
background-color:Gray; filter:alpha(opacity=70); opacity:0.7;
}
.modalPopup { /* Standard Modal Popup style */
background-color:#FFFFFF; border-width:3px;border-style:solid;border-color:Gray;padding:3px;width:250px;
}