/* common */
*{padding:0;margin:0;}
img{border:0; margin:0;}
p{padding:0 0 15px 0; }
.clear{clear:both;}
.push{clear:both;}


/* GLOBAL CSS STYLES */
html{ font-family: Arial, Helvetica, sans-serif; font-size: 62.5%; height: 100%;}
body { background: #fff url(images/bg-top-default.gif) repeat-x; color: #585858; font-size: 1.2em; height: 100%;}
body.noback{ background: #fff url(images/bg-top-white.gif) repeat-x; }
#insidebody{ background: #fff url(images/bg-top-inside.gif) repeat-x;  height: 100%;}
#insidebody .push{background: #fff;}
a { color: #E20879; text-decoration: none; }
a:hover { text-decoration: underline; }

h4{font-size: 1.4em; padding: 0 0 5px 0;}

#mainwrap-home { width: 950px; margin: 0 auto -108px; background: url(images/bg-top-header.gif) no-repeat; min-height: 100%; height: auto !important; height: 100%;}
#mainwrap { width: 950px; margin: 0 auto -108px; min-height: 100%; height: auto !important; height: 100%;}

#logo { width: 200px; height: 50px; padding: 33px 0 0 0; float: left; }
#mainmenu_phone { width: 700px; height: 98px; color: #fff; float: right; }
  #mainmenu_phone ul { float: right; position: relative; top: 55px; list-style: none none; width: 685px; height: 21px;}
  #mainmenu_phone li { margin: 0; float: left; list-style: none none; margin: 0 0 0 12px; }
  #mainmenu_phone li a { height: 21px; display: block; text-decoration: none; }
  #mainmenu_phone li a span{visibility: hidden;}
  #mainmenu_phone #phone {position: relative; left: 30px;}
  
  #mainmenu_phone #home, #mainmenu_phone #home a{background: url(images/mainmenu-home.gif) no-repeat; width: 53px;}
  #mainmenu_phone #services, #mainmenu_phone #services a{background: url(images/mainmenu-services.gif) no-repeat; width: 62px;}
  #mainmenu_phone #top-offer, #mainmenu_phone #top-offer a{background: url(images/mainmenu-top-offer.gif) no-repeat; width: 65px;}
  #mainmenu_phone #testimonials, #mainmenu_phone #testimonials a{background: url(images/mainmenu-client-testimonials.gif) no-repeat; width: 123px;}
  #mainmenu_phone #clean-website-design, #mainmenu_phone #clean-website-design a{background: url(images/mainmenu-clean-website-design.gif) no-repeat; width: 63px;}
  #mainmenu_phone #contact, #mainmenu_phone #contact a{background: url(images/mainmenu-contact.gif) no-repeat; width: 61px;}
  
  #mainmenu_phone #home a:hover, #mainmenu_phone #home a.active {background: url(images/mainmenu-home2.gif) no-repeat; width: 53px;}
  #mainmenu_phone #services a:hover, #mainmenu_phone #services a.active {background: url(images/mainmenu-services2.gif) no-repeat; width: 62px;}
  #mainmenu_phone #top-offer a:hover, #mainmenu_phone #top-offer a.active {background: url(images/mainmenu-top-offer2.gif) no-repeat; width: 65px;}
  #mainmenu_phone #testimonials a:hover, #mainmenu_phone #testimonials a.active {background: url(images/mainmenu-client-testimonials2.gif) no-repeat; width: 123px;}
  #mainmenu_phone #clean-website-design a:hover, #mainmenu_phone #clean-website-design a.active {background: url(images/mainmenu-clean-website-design2.gif) no-repeat; width: 63px;}
  #mainmenu_phone #contact a:hover, #mainmenu_phone #contact a.active {background: url(images/mainmenu-contact2.gif) no-repeat; width: 61px;}
  

#quickbuttons { padding: 30px 0 70px 0; }
  #quickbuttons ul { padding: 0 0 0 105px; }
  #quickbuttons li { float: left; margin: 0 56px 0 0; list-style: none none; font-size: 100%;}
  #quickbuttons li a { font-weight: bold; }
  #quickbuttons .last { margin: 0; padding: 0; }
  
#footer { width: 100%; margin: 30px 0 0 0; background: url(images/bg-footer.gif) #E40474 no-repeat center center;}
#footer, .push {height: 78px;}
.push{z-index: -10;}
#top-offer-flash{z-index: 10; position: relative;}
  #footer-content { width: 950px; padding: 20px 0 0 0; margin: 0 auto; color: #A8A8A8; text-align: center; font-size: 11px; height: 50px;}
  #footer-content p { }
  .foolink1 { color: #fff; }
  .foolink2 { color: #000; }

/* THIS STUFF IS FOR DIVs and SPANs which will be STRING REPLACED */  
.title1 { padding: 30px 0 10px 5px; background: url(images/hrline.gif) no-repeat; font-size: 1.3em; color: #989898; font-family: "Trebuchet MS", Arial, sans-serif; }
.title2 { padding: 60px 0 22px 5px; background: url(images/hrlinehosting.gif) no-repeat; font-size: 1.3em; color: #989898; font-family: "Trebuchet MS", Arial, sans-serif;}  
.testimonial { font-size: 0.9em; color: #000; }
.bigger { font-size: 1.2em; padding: 0 0 5px 0;}
.blacktext { color: #000; font-size: 1.2em; } 
.silverlink { color: #585858; }
.extrabig{line-height: 1.5;}

/**************** TESTIMONIALS, PODCASTS - STRING REPLACED *****************/
.tleft { width: 680px; float: left; display: block; margin: 0 0 20px 0; }
.tright { width: 675px; float: left; display: block; margin: 0 5px 20px 0; }
.tleft p{width: 490px; float: right; text-align: left;}
.tright p{width: 485px; float: left; text-align: left;}
.tleft img{ float: left;  border: 1px solid #ECECEC; padding: 3px; margin: 0 25px 0 0; width: 150px; height: 150px;}
.tright img{ float: right; border: 1px solid #ECECEC; padding: 3px;margin: 0 0 0 25px; width: 150px; height: 150px;}
.tleft .casepad, .tright .casepad { margin: -15px 0 0 0; color: #a1a1a1; font-size: 1.3em; font-weight: normal; font-family: "Trebuchet MS", Arial, sans-serif; color: #A1A1A1; }
  
/********************** HOME PAGE ************************/
#home-flash { width: 950px; height: 516px; margin: 0 auto; }

#flash{width: 950px; height: 515px;}

#homebox1 { width: 289px; height: 200px; float: left; background: url(images/box-home1.gif) no-repeat; padding: 10px 0 0 0; }
 #homebox1 h1 { font-size: 1.3em; color: #989898; font-weight: normal; padding: 0 0 20px 0; font-family: "Trebuchet MS", Arial, sans-serif;  }
 #homebox1 h2 { font-size: 1.3em; color: #000; font-weight: bold; padding: 0 0 20px 0; font-family: "Trebuchet MS", Arial, sans-serif; }
 #homebox1 p { padding: 0 0 20px 0; }
#homebox2 { width: 325px; height: 200px; float: left; background: url(images/box-home2.gif) no-repeat; padding: 10px 0 0 0; }
#homebox3 { width: 312px; height: 200px; float: left; background: url(images/box-home3.gif) no-repeat; padding: 10px 0 0 0; }
 #homebox2 p, #homebox3 p { padding: 0 0 20px 45px; }
 #homebox2 .btitle1, #homebox3 .btitle1 { font-size: 1.3em; color: #989898; font-weight: normal; font-family: "Trebuchet MS", Arial, sans-serif; }
 #homebox2 .btitle2, #homebox3 .btitle2 { font-size: 1.3em; color: #000; font-weight: bold; font-family: "Trebuchet MS", Arial, sans-serif; }

#home-mainsection {  }

/****************** INSIDE PAGE **********************/
#banner{width: 950px; height: 290px; background: url(images/banner-back.gif); position: relative;}
#maincontent{width: 950px; background: #fff;}

#resources{width: 200px; float: right; padding: 40px 0 0 0;}
#resources img{float: right;}

#sidemenu{float: left; width: 140px;}
#sidemenu ul{list-style: none;}
#sidemenu ul li{padding: 4px 20px 6px 0; text-align: right; background: url(images/arrow.gif) no-repeat right center;}
#sidemenu ul li a{ font-family: "Tahoma", Arial, sans-serif; color: #696969; font-size: 0.9em; font-weight: bold;}
#sidemenu ul li a span{color: #E40474; font-weight: bold; padding: 0 0 0 5px;}
#content{float: right; width: 700px; padding: 0 50px 40px 0; }
#content h1{font-size: 1.5em; color: #222; font-weight: normal; font-family: Arial, sans-serif; width: 700px; border-bottom: 1px solid #e9e9e9; height: 35px; margin: 0 0 15px 0;}
#content p, #content ul {line-height: 1.5;}
#content ul{list-style: disc outside; margin: 0 0 15px 20px;}
#content p a img{float: left;}

/**************** TOP OFFER *********************/
#demo{width: 950px; height: 365px;}
#demochoices{padding: 40px 0 50px 0;}
#demochoices a{display: inline; padding: 0 0 0 90px;}

/**************** PODCASTS *********************/
.podcastteaser { width: 680px; float: left;  padding: 0 0 50px 0;}
.podcastteaser .teaser{ float: right; text-align: left; width: 480px; padding: 10px 0 0 0;}
.teaser .listen a{ font-family: "Tahoma", Arial, sans-serif; color: #696969; font-size: 0.9em; font-weight: bold; padding: 0 0 0 20px;  background: url(images/arrow.gif) no-repeat left center; }
.podcastteaser img{float: left;}
.teaser h2{ position: relative; bottom: 5px; font-family: "Trebuchet MS", Arial, sans-serif; font-size: 1.3em;}
#player{float: left; width: 360px; position: relative; left: 350px; top: 85px;}

/*********************** BOOKMARKS *********************/
#sbookmarks { width: 600px; }
  #sbookmarks ul { margin: 0; padding: 0; }
  #sbookmarks li { width: 100px; height: 100px; margin: 0; list-style: none none; font-size: 100%; float: left; }
  #sbookmarks li a { font-weight: bold; text-decoration: none; display: block; color: #333;  }
  #sbookmarks li a:hover { text-decoration: underline; }

/****************** NEW PORTFOLIO ********************/
#portfolio-web-n { height: 420px; position: relative; top: 30px; background: url(images/banner-back.gif) no-repeat 0 42px; float: left; width: 950px; margin: 0 0 30px 0; }

#portfolio-web-n a { color: #e4137c; background: none; text-decoration: none;}
#portfolio-web-n a:hover { text-decoration: underline; }

#portfolio-web-n #pdescription { width: 240px; height: 300px; padding: 50px 10px 0 0; float: left;  }
  #pdescription h1 { font-size: 1.8em; font-weight: normal; color: #E40474; }
  #pdescription p { font-size: 1.0em; margin: 30px 0 0 2px; line-height: 1.4;}

#portfolio-web-n #pshow { width: 625px; height: 300px; padding: 20px 0 0 20px; float: left; }
  #pshow #phrline { width: 8px; height: 310px; background: url(images/portfolio-web-hline.gif) no-repeat 0 72px; float: left;  }
  #pshow #pbox { float: left; }
    #ptopmenu { width: 614px; margin: 0; height: 30px; background: url(images/portfolio-menu-bg.gif) no-repeat; }
      #ptopmenu img { float: left; clear: left; }
      #ptopmenu ul { margin: 0; padding: 0 0 0 1px; }
      #ptopmenu li { float: left; margin: 0; list-style: none none; font-size: 12px; }
      #ptopmenu #last { margin: 0; }
      #ptopmenubutton1 { width: 147px; height: 30px;}
      #ptopmenubutton2 { width: 147px; height: 30px;}
      #ptopmenubutton3 { width: 153px; height: 30px;}
    #pshowbox { width: 614px; height: 280px; background: url(images/portfolio-showbox.gif) no-repeat; }
      #pshowinbox { width: 600px; height: 266px; margin: 0 0 0 7px; padding: 6px 0 0 0; }
    #pshowproject { width: 100%; height: 884px; background: url(images/portfolio-background.gif) repeat-x; position: absolute; visibility: hidden; z-index: 98; float: left; }
    #pshowprojectalign { width: 964px; margin: 0 auto; }
    #pshowgoback { width: 100%; height: 64px; text-align: right; position: absolute; visibility: hidden; z-index: 99; cursor: pointer; float: left; }

/* slideViewer 1.0 default styles */
.svw {width: 600px; height: 266px; margin: 0 0 0 7px; padding: 6px 0 0 0; background: #fff;}
.svw ul{position: relative; left: -999em;}

.stripViewer { /* this is the DIV container for your UL of images */
position: relative;
overflow: hidden; 
border: 0px solid #ff0000; /* this is the border. should have the same value for the links */
margin: 0 0 1px 0;
}
.stripViewer ul { /* this is your UL of images */
position: relative;
left: 0;
top: 0;
width: 1%;
list-style-type: none;
}
.stripViewer ul li { /* each image is arranged horizontally */
float:left;
}
.stripTransmitter { /* this is the DIV for your transmitter (the UL generated at run time that commands the list)*/
margin: 30px 0 0 0;
width: 1%;
overflow: hidden;

}
.stripTransmitter ul { /* the auto-generated set of links */
position: relative;
float: right;
}
.stripTransmitter li { float: left; margin: 0 0 0 5px; list-style: none none; font-size: 12px; }
.stripTransmitter .pbuttonsbg a:hover { color: #fff; background-image: url(images/portfolio-button2.gif); background-repeat: no-repeat; text-decoration: none; }
.stripTransmitter li a.current, .stripTransmitter li a.current:hover { color: #fff; background-image: url(images/portfolio-button2.gif); background-repeat: no-repeat; text-decoration: none; }
/* end slideViewer default styles */
.pbuttonsbg { background-image: url(images/portfolio-button.gif); background-repeat: no-repeat; }
.pbuttonsbg a { width: 29px; height: 24px; padding: 4px 0 0 0; font-size: 12px; font-weight: bold; text-decoration: none; text-align: center;  display: block; }
.pbuttonsbg a:hover { color: #fff; text-decoration: none; background-image: url(images/portfolio-button2.gif); }
.pbuttonsbg a.current { background-image: url(images/portfolio-button2.gif);  }


/********************** CONTACT FORM *********************/

#contactwrap{
	width: 660px;
	float: left;
	margin: 0 0 20px 0;
}

#contactwrap form{
	width: 660px;
	margin: 15px 0 40px 0;
	clear: left;
}

#form-left{
	width: 200px;
	float: left;
}

#recommendwrap form{
  width: 890px;
  margin: -20px 0 40px 0;
}

.recform-left{
  width: 210px;
	float: left;
}

.recform-message, .recform-message #messagediv, .recform-message textarea{
  width: 480px;
  float: left;
}

.rec-message{
  width: 500px;
  float: right;
  position: relative; left: 10px;
}

#form-right{
	width: 200px;
	float: right;
}

.formfield, #messagediv label{
	padding: 0 0 10px 0;
}

input, select,option{
  height: 18px;
}

input, select, textarea{
	border: solid 1px #ddd;
	background: transparent url(images/contact-input-back.gif) repeat-x;
	width: 190px;
}

option{background: white;}


#messagediv{
  width: 380px;
  float: left;
}

#contactwrap textarea{
	width: 400px;
	background: transparent url(images/contact-textarea-back.gif) repeat-x left bottom;
}

#submitdiv input, #kcsubmitdiv input{
	float: right;
	background: url(images/contact-send-button.gif) no-repeat;
	width: 78px;
	height: 29px;
	border: 0;
	color: white;
	font-size: 1px;
}

#kcsubmitdiv input{
  float: left;
}

#contactwrap #submitdiv input{
  position: relative; top: 20px; right: 50px;
}

#recommendwrap #submitdiv input{
	float: left;
	background: url(images/contact-send-button.gif) no-repeat;
	width: 78px;
	height: 29px;
	border: 0;
	color: white;
	font-size: 1px;
	position: relative; bottom: 30px;
	padding: 0; margin: 0;
}

#errorwrap{
	width: 350px;
	padding: 10px 10px 10px 70px;
	min-height: 78px;
	margin: 0 0 20px 0;
	background: url(images/problem.jpg) no-repeat 10px 10px;
	color: red;
	border: solid 1px red;
	clear: left;
}

/****************** TEMPLATES ******************/
#confirmright{
  float: right;
  width: 425px; 
  position: relative; right: 80px;
}

#confirmright img{
  border: solid 1px #ddd;
  padding: 0 0 0 0;
  float: left;
}

#confirmleft{
  float: left;
  width: 410px;
}

#confirmleft #contactwrap{
  width: 400px;
}

#confirmleft #contactwrap form{
  width: 400px;
}

#confirmleft #contactwrap #submitdiv input{
  position: static; margin: 10px 10px 0 0;
}

#confirmleft #contactwrap textarea{
  width: 390px;
}
#bookmarkform { float: left; width: 500px }
#bookmarkform input { margin: 0 0 6px 0; }
#bookmarkform h2 {font-size: 1.5em; color: #222; font-weight: normal; font-family: Arial, sans-serif; width: 500px; border-bottom: 1px solid #e9e9e9; height: 35px; margin: 25px 0 8px 0;}
#bookmarkfilter { border: 1px solid #ddd; }
#bookmarkerror { width: 260px; position: absolute; top: 40px; right: 10px; }
#bookmarkerror #errorwrap2{
	width: 240px;
	padding: 10px 10px 10px 10px;
	min-height: 150px;
	font-size: 12px;
	background-color: #fff;
	color: red;
	border: solid 1px red;
	clear: left;
}