/**************************************************\
 *               SWITCHBOX INC.                   *
 *                                                *
 *  File:         Master CSS                      *
 *                                                *
 *  Project:      Switchbox, Inc's Main Site      *
 *  Project Lead: Mike Prescott                   *
 *  CSS Author:   Mike Prescott                   *
 *  Date:         06.09.2010 : June 9th, 2010     *
 *                                                *
\**************************************************/


/**************************************************\
 * COMMONS                                        *
\**************************************************/
body { margin: 0; padding: 0; background: url('../images/page_bg_new.gif') #232428 repeat-x; font-family: 'Helvetica','Verdana','Lucida Grande',arial,sans-serif;  font-size: 12px; color: #333;}
p { margin: 0; padding: 0 0 20px 0;}
h1 { margin: 0 0 20px 0; padding: 0; font-family: 'Helvetica','Verdana','Lucida Grande',arial,sans-serif; font-weight: normal; font-size: 28px; width: 100%; border-bottom: 1px solid #CCC;}
h2 { font-family: 'Helvetica','Verdana','Lucida Grande',arial,sans-serif; font-weight: normal; font-size: 18px; margin: 0; padding:0;}
td{ vertical-align: top;}
img {border:0;}

a {color: #0645AD; text-decoration: none;}
a:visited {color: #0645AD;}
a:hover {text-decoration: underline;}	
/**************************************************\
 * COMMONS (Tippy Top)                            *
\**************************************************/
#tippyTop {  height: 22px;}
/**************************************************\
 * COMMONS (Tippy Top Nav)                        *
\**************************************************/
#tippyTopNav {width:350px; float:left; margin: 12px 0px 0px 30px}
	#tippyTopNav ul {list-style: none; padding: 0px; margin: 0px;}
		#tippyTopNav ul li {list-style: none; display: inline; padding: 0px; margin: 0px 10px;}
			#tippyTopNav ul li a { color: #cccccc; text-decoration: none;}
			#tippyTopNav ul li a:hover { color: #cccccc; text-decoration: underline;}
			#tippyTopNav ul li a:visited { color: #cccccc;}

/**************************************************\
 * COMMONS (LOGIN)                                 *
\**************************************************/
#login {width:450px; float: right; height: 22px; text-align: right; color: #aaaaaa; position: relative; top: 8px;}
	#login input {border-collapse: collapse; border: 0; background: #aaaaaa !important; color:white; outline: none; padding:1px 3px;}
#loginSpan {margin: 0px;}
#loginForm {padding-right: 30px; margin-top: 0px;}
#login .loginBtn {display: inline-block; width: 33px; height:18px; background-image: url('../images/loginBtn.jpg') !important;}
/**************************************************\
 * HEADER                                         *
\**************************************************/
#container {width: 930px; margin: 0 auto;} 
#top_cap {height: 25px;  width: 930px; margin: 0 auto; overflow: hidden; background-image: url('../images/header_top.png');}
#header {background: url('../images/container_bg.png') repeat-y; height: 110px;}
	#header .padding {padding: 5px 25px;}
#header .topNav {float: right; text-align: right; padding: 12px 5px 0 0;}
	.t2nav {margin: 0; padding: 0; list-style-type: none;  position: relative;  height: 25px; margin: 0 0 11px 0; text-align: right; display:block;} 
		.t2nav li {float: right; margin-left: 20px; border-top: 3px solid white;  padding-top: 3px;}

		.t2nav li:hover { border-top: 3px solid #0645AD;}
		.t2nav li.active { border-top: 3px solid #222222;}
		.t2nav li a {color: #666666/* #8b8b8d */; font-family: 'Helvetica','Verdana','Lucida Grande',arial,sans-serif; font-weight: normal; font-size: 14px; text-decoration: none;}

	.t3nav {margin: 0; padding: 0; list-style-type: none;  position: relative; height: 25px; text-align: right; display:block;} 
		.t3nav li {float: right; margin-left: 20px; border-top: 3px solid white;  padding-top: 3px;}

		.t3nav li:hover { border-top: 3px solid #0645AD;}
		.t3nav li.active { border-top: 3px solid #222222;}
		.t3nav li a {color: #666666/* #8b8b8d */; font-family: 'Helvetica','Verdana','Lucida Grande',arial,sans-serif; font-weight: normal; font-size: 12px; text-decoration: none;}

/**************************************************\
 * FOOTER                                         *
\**************************************************/
#footer { overflow:hidden; background: url('../images/footer.png') no-repeat top center; margin-bottom: 30px; text-align: center;}
.client_list { float: left; margin: 0; padding: 0; width: 250px; list-style-type: none; } 
	.client_list li { padding: 5px 0 5px 20px; background: url('../images/check.png') no-repeat; background-position: 0 3px;}

.footLinks {color: #a0a0a0; line-height: 350%;}
	.footLinks a{color: #a0a0a0; text-decoration: none;}
	.footLinks a:hover{color: #a0a0a0; text-decoration: underline;}
	.footLinks a:visited{color: #a0a0a0; }
.footMark { color: #707070;}
.tagLine{position: relative; left: 68px; bottom: 16px;}

#footer_badge{ float: right; text-align: right; padding: 5px 20px 0 0 ;}
#footer_badge_balance{ float: left; height: 65px; width: 67px;}
/**************************************************\
 * HOMEPAGE                                       *
\**************************************************/

#slider2 ul {margin: 0px; padding: 0px;}
#slider2 ul li {margin: 0px; height: 281px;  width: 880px; overflow:hidden; background: url('../images/container_bg.png') repeat-y;}

.homeSlideLink{ margin: 0px; height: 281px;  width: 880px; overflow:hidden; display: block; position: relative; text-decoration: none; }
.homeSlideLink:hover{ text-decoration: none; }
.cornerText{ position: absolute;  bottom: 1px; right: 35px; color: white; padding: 5px 20px 5px 30px; width: 122px;  background:  url('../images/sliderLinkFade.png') repeat-y;}

#slider3 { position: relative; right: 25px; padding:0px 51px 0px 25px; margin: 0px 153px 0px 25px; width: 982px; height: 281px; background: url('../images/container_bg.png') repeat-y;} 
#slider3 .padding{ padding: 0 25px;}


.slideShow {position: relative; border:1px solid #cccccc; border-top:0px; border-bottom:0px; width:981px; height:281px; margin:0 auto; padding: 0; background:#e0e0e0;}
.padding2{position: relative; padding-left: 0px; width: 880px; margin: 0px 0px 0px 0px;}
#slideScreen {  padding:0; margin:0 auto; }
	#slideScreen ul { margin:0 auto; padding:0;}
	#slideScreen li { float:left; list-style:none; display:block; border:0;border-top:0px; margin: 0px; padding: 0px; border:0px; width:981px; height:281px;}
	#slideScreen .jq-ss-crop { margin:0; border:0; float:left; }
 #prevBtn, #nextBtn {position: absolute; z-index: 5; display:block; text-decoration:none; margin: 0px; padding:0px; height:91px; width: 40px;}
	#prevBtn{bottom: 100px; right: 890px; background: url('../images/leftArrow.png')}
	#nextBtn{bottom: 100px;  left: 890px; background: url('../images/rightArrow.png')}
 #a_prevBtn, #a_nextBtn {display:block; height:91px; width: 40px; text-decoration:none;}
	#a_prevBtn{background: url('../images/leftArrow.png')}
	#a_nextBtn{background: url('../images/rightArrow.png')}
		#a_prevBtn span, #a_nextBtn span {visibility:hidden;}
#view { margin:0; padding:0; border:0; height:281px; overflow:hidden; }
#slideImages { width:1350px; padding:0; border:0; margin:0 auto;}
	#slideImages li a { border:0; margin:0 auto; padding:0; width:200px;}
	#slideImages li span { display:block; font:normal 11px Tahoma, Geneva, sans-serif; color:#0385bb; text-decoration:underline; padding:0px 0px; margin:0;}
	#slideImages li img { display:block; border:0; margin:0; padding:0; text-align:center;}
	
#home_boxes { min-height: 250px; overflow: auto; background: url('../images/container_bg.png') repeat-y;}
	#home_boxes .padding { padding: 10px 0 0 25px;}  
#sub_content { background: url('../images/container_bg.png') repeat-y; padding-top: 10px; padding-bottom: 10px; }
	#sub_content p { line-height: 19px;}
.boxes{min-height: 250px;}
.box { overflow: auto;}
	.boxRight {}
		.first             { float:right; width: 550px; margin-right: 40px;}
		.first:hover {}
			.blogBox {}
				.blogBox .blogBoxLeft{ float: left; background: url('../images/lilwordpress.png') no-repeat; height: 66px; width: 53px; display: block;}
				.blogBox .blogBoxLeft span{ display: none;}
				.blogBox .blogBoxRight{ float: right; min-height: 66px; padding: 10px;  width: 477px; border-bottom: 1px solid #CCC;}
					.blogBoxRight a {font-size: 14px;}
				.twitterBox .twitterBoxLeft{ float: left; background: url('../images/liltweet.png') no-repeat; height: 66px; width: 53px; display: block;}
				.twitterBox .twitterBoxLeft span{ display: none;}
				.twitterBox .twitterBoxRight{ float: right; min-height: 66px; padding: 10px; width: 477px; }
					.blogBoxRight a {font-size: 14px;}
	.boxesLeft {  float:left; width: 270px; margin: 0 0 0 18px; }
		.middle { float:left; width: 270px; }
		.last {   float:left; width: 270px; min-height:300px; }
		.last:hover   {}
	.box h3 { color: black; margin: 0 0 6px 0; height: 26px;  border-bottom: 1px solid #CCC; padding: 11px 0 0 0; font-family: 'Helvetica','Verdana','Lucida Grande',arial,sans-serif; font-weight: normal; font-size: 18px;}
	.box div {color: black;}
	.box div a {color: #0645AD; text-decoration: none;}
	.box div a:visited {color: #0645AD;}
	.box div a:hover {text-decoration: underline;}	
	
	.box div ul {color: black; margin: 0; padding: 0;}
	.box div ul li{margin: 0 0 3px 0; padding: 0;}
	
	.box p {margin: 0; padding: 0 0 10px 0; line-height: 18px; font-size: 14px; overflow: auto;}
	
	.box div {overflow: auto;}
	.box div p {overflow: auto; overflow-x: hidden;}
	
	.box li {margin-bottom: 10px; margin-left: 20px; font-size: 14px; list-style: none;}
	.box ul {padding: 0; margin: 0;}
	
.icon   {margin: 15px 20px; padding-left:7px; float: left; margin-left:10px;}
/**************************************************\
 * HOMEPAGE  (SLIDER)                             *
\**************************************************/
#slider,#slider_sub, #slider_sub2{ margin: 0px; height: 281px; overflow:hidden; background: url('../images/container_bg.png') repeat-y;} 
#slider .padding, #slider_sub .padding, #sub_content .padding, #portfolioPage .padding, #slider_sub2  .padding { padding: 0 25px;}
#slider_sub {height: 171px; }
#slider_sub2 {height: 210px;}

	/**************************************************\
	 * SERVICES                                       *
	\**************************************************/
	.hideMe {display: none;}

	.bigLeft {float: left; width: 570px;}
	.smallRight { float: right; width: 270px;}

		/**************************************************\
		 * WEB APPLICATIONS                               *
		\**************************************************/
		/**************************************************\
		 * E-COMMERCE                                     *
		\**************************************************/
		/**************************************************\
		 * ENTERPRISE SOFTWARE                            *
		\**************************************************/
		/**************************************************\
		 * IT CONSULTING                                  *
		\**************************************************/
	/**************************************************\
	 * CLIENTS                                        *
	\**************************************************/
		/**************************************************\
		 * PORTFOLIO                                      *
		\**************************************************/			
		#portfolioPage { background: url('../images/container_bg.png') repeat-y; padding-bottom: 10px; }
			#portfolioBanner { padding: 0 0 0 0; margin: 0 0 0 25px; border: 1px solid #CCC; }
				#portfolioBanner ul { padding: 0 0 0 0; margin: 0 0 0 0; list-style: none; }
					#portfolioBanner ul li { height: 297px; width: 880px; list-style: none;}
			
			.image_box #controls { list-style: none; float: right; margin: 10px 30px 0 0;}
				.image_box #controls li { text-align: center; float: left; display: block; margin: 0 10px 0 0;}
					.image_box #controls li a { width: 20px; height: 20px; padding: 5px 3px 1px; display: block; color: #555555; background: #dfdfdf; border: 1px solid #999999; }
					.image_box #controls li a:hover { background: #333333; color: white; text-decoration: none;}
					.image_box #controls .current a{ background: #333333; color: white; text-decoration: none;}
			
			#featuredSites { width: 560px; float: left;}
				#featuredSites  .sitePanel { width: 540px; border: 1px solid #CCC; overflow: auto; margin: 0 0 20px 0;}
					#featuredSites  .sitePanel .siteBrand { width: 180px; float: left;}
					#featuredSites  .sitePanel .siteBrand .siteImg { text-align: center; margin: 10px 0 0 0; }
					#featuredSites  .sitePanel .siteBrand .siteImg img { border: 0; padding: 0; margin: 0 auto;}
					#featuredSites  .sitePanel .siteBrand .siteName { margin: 0 0 0 10px; }
					#featuredSites  .sitePanel .siteBrand .siteSubName {font-size: 7pt; }
					#featuredSites  .sitePanel .siteInfo { width: 360px; float: right;}
						#featuredSites  .sitePanel .siteInfo .siteBio {margin: 10px 0 10px 0;}
						#featuredSites  .sitePanel .siteInfo .Category {}
						#featuredSites  .sitePanel .siteInfo .Category span { color: #0645AD; }
						#featuredSites  .sitePanel .siteInfo .Technology {}
						#featuredSites  .sitePanel .siteInfo .Technology span { color: #0645AD; }
						#featuredSites  .sitePanel .siteInfo .siteLink {}
			#listOfSites { width: 300px; float: right;}
				#listOfSites ul{ margin: 10px 0 0 10px; padding: 0; list-style: none;}
					#listOfSites ul li{  }
						#listOfSites ul li a{  }
						
		/**************************************************\
		 * CASE STUDIES                                   *
		\**************************************************/
		/**************************************************\
		 * TESTIMONIALS                                   *
		\**************************************************/
		#testimonials{ border: 0px solid #CCC; border-top: 1px;}
			#testimonials .testimonial {  margin-top: 20px; width: 500px; border: 1px solid #CCC; padding: 15px;}
				#testimonials .testimonial .speaker{ font-size: 14pt; font-weight: normal; color: #333; display: block; margin-bottom: 10px 25px; }
				#testimonials .testimonial .statement{ font-size: 12pt; font-weight: normal; }
				#testimonials .testimonial .testimonial_link{ font-size: 10pt; font-weight: normal;  display: block;}
	/**************************************************\
	 * COMPANY                                        *
	\**************************************************/
		/**************************************************\
		 * OUR TEAM                                       *
		\**************************************************/
		#staff {}
			#staff .employee { width: 760px; border: 1px solid #ccc; border-top: 0px; border-left: 0px; border-right: 0px; overflow: auto; margin: 0 auto; padding: 10px; }
				#staff .employee .employee_info {width: 500px; float: right; padding: 0 20px;}
					#staff .employee .employee_info .name_of_employee { font-weight: bold;}
					#staff .employee .employee_info .role_of_employee { font-weight: bold;}
					#staff .employee .employee_info .bio_of_employee { display: block;}
				#staff .employee .employee_pic_box {width: 216px; height: 216px; float: left; overflow: hidden; background: #CCC; display: table-cell; vertical-align: middle; text-align: center;}
					#staff .employee .employee_pic_box .employee_pic {width: 216px; height: 216px;}
		
		/**************************************************\
		 * OUR CULTURE                                    *
		\**************************************************/
		/**************************************************\
		 * OUR THOUGHTS                                   *
		\**************************************************/
		#bounding{ overflow: auto;}
			.blog{ width: 550px; float: left;}
				.blog .blogBoxLeft{ float: left; background: url('../images/lilwordpress.png') no-repeat; height: 66px; width: 53px; display: block;}
				.blog .blogBoxLeft span{ display: none;}
				.blog .blogBoxRight{ float: right; min-height: 66px; padding: 10px;  width: 477px; }
					.blogPost { overflow: auto;}
					.blogPost *{ overflow: auto;}
						.blogPost .postTitle {}
						.blogPost .postTitle a{color: black; font-size: 14pt;}
						.blogPost .article {overflow: auto; border: 1px solid #666666; border-top: 0px; border-left: 0px; border-right: 0px; margin-bottom: 20px;}
							.blogPost .article img {float: right; margin-left: 5px;}
			.twitter{ width: 300px; float: right;}
				.twitter .twitterBoxRight{ float: right; background: url('../images/liltweet.png') no-repeat; height: 66px; width: 53px; display: block;}
				.twitter .twitterBoxRight span{ display: none;}
				.twitter .twitterBoxLeft{ float: left; min-height: 66px; padding: 10px 0; width: 240px; }
				.twitter .twitterBoxLeft .twitterHeader{ color: black; font-size: 14pt;}
	/**************************************************\
	 * CONTACT                                        *
	\**************************************************/
	.left_side{width: 600px;}
	.right_side{width: 270px;}
	
	.Notice { border: 2px solid #AD1022; border-left: 0px; border-right: 0px; padding: 5px 10px; margin-bottom: 20px; background: #D6A5AB;}
	.error_star{ color: #AD1022;}
	
	.text{ width: 336px; margin-top:0px; line-height: 10%; margin-bottom: 10px;}
	#contactFormDiv{margin: 0px auto; width: 360px;}
	#contactFormDiv input{margin-left:2px; width: 350px;}
	#contactFormDiv textarea{width: 350px; height: 70px; }
	#contactFormDiv .submitBtn{ background: url('../images/submitBtn.jpg');  width: 86px; height: 20px; padding: 0; border: 0;}
	/**************************************************\
	 * REQUEST A QUOTE                                *
	\**************************************************/
	.text{ width: 336px; margin-top:0px; line-height: 10%; margin-bottom: 10px;}
	#quoteFormDiv{margin: 0px auto; width: 360px;}
		#quoteFormDiv input{margin-left:22px;}
		#quoteFormDiv textarea{width: 350px; height: 70px; }
		#quoteFormDiv .submitBtn{ background: url('../images/submitBtn.jpg');  width: 86px; height: 20px; padding: 0; border: 0;}
	/**************************************************\
	 * EQUITY                                         *
	\**************************************************/
	.up{vertical-align: top;}
	.radio { margin: 0px !important;}
	.textRange{margin-top: 4px;}
	
	.equityFormTop{width: 380px; margin: 0 auto;}
	.equityFormBottom{width: 410px; margin: 0 auto;}
		.equityFormBottom label{margin-left: 20px;}
		.equityFormBottom .submitBtn{ background: url('../images/submitBtn.jpg');  width: 86px; height: 20px; padding: 0; border: 0; margin-left: 15px;}
		
	textarea {margin-bottom: 10px;}
	.red{color:red;}
	
	.p{margin-bottom:20px;}
	.normal{font: inherit; border: inherit; display: inline; color: inherit; width: inherit; margin: inherit}