/* CSS Document */

body, p, h1, h2, h3, h4, img, ul, li, ol, img{margin:0; border:0; padding:0;}
body{font-family:Georgia, "Times New Roman", Times, serif; font-size:14px; color:#777777; background:url(../images/bg2color.gif) no-repeat top right;}
h3{font-size:18px; color:#FF9600; font-weight:bold; margin-bottom:6px;}
h4{font-size:16px; color:#000000; font-weight:bold; margin-bottom:6px;}
p{line-height:20px; margin-bottom:8px;}
#wrapper{width:100%; text-align:center;}
#page{width:950px; margin:0 auto;}
#head{height:33px; text-align:left; padding:20px 0px 3px 0px; }
#head a{text-decoration:none; color:#777777;}
@fonthead {font-family: 'Berlin Sans FB Demi';  src: url('BRLNSDB.TTF');  }  
.fonthead {font-family: Berlin Sans FB Demi;  font-size: 28px; letter-spacing:-1px; text-shadow: 0 3px 2px #C1C0C0;} 

#ctline{background:url(../images/bgcnt.gif) no-repeat left top; height:26px;}
#ctline .headline{width:230px; float:left; text-align:left; font-size:11px; font-family:Arial, Helvetica, sans-serif; padding:6px 0px 0px 0px;}
#ctline .contactdet{width:710px; float:left; text-align:left; font-size:16px; color:#999999; font-weight:bold; padding:2px 0px 0px 10px;}
#ctline .skypeme{width:80px; float:left; text-align:right;}

#nav{height:45px; text-align:left; padding-left:225px;}
#nav .navarea{width:533px; float:left;} #nav .like{width:192px; float:left; padding-top:10px;}
#nav .like .facebook{width:137px; float:left;} #nav .like .tweet{width:55px; float:left;}

ul#menu {width: 100%; height: 30px;  font-size: 18px;;  list-style-type: none; margin: 0; padding: 0;}
ul#menu li {display: block; float: left; margin: 0 0 0 0px;  border-right:0px solid #EBEBEB;}
ul#menu li a {height: 24px; color: #0197E4; display: block;   text-decoration: none; float: left; font-weight:bold; padding: 10px 0px 0px 0px; margin:0px 15px 0px 15px;}
ul#menu li a:hover {color: #000; border-bottom:3px solid #FF9600; }
ul#menu li a.current{color: #000;  padding: 10px 15px 0px 15px;}

#content{text-align:left; padding:40px 0px;}
#content .contarea{width:675px; float:left; padding:0px 25px 0px 0px; text-align:left;}
#content .contr{width:250px; float:left; padding:0; margin:0; }
.conth{padding:0px 0px 20px 30px;}
.bigtxt{font-size:56px; margin-bottom:26px;}
.medtxt{font-size:24px; margin-bottom:12px; font-weight:bold;}
.boldn{font-weight:bold; font-size:14px;}
#content .contarea p{line-height:20px;}
.txtorange{color:#FF9600;}
.txtblue{color: #0197E4;}
.txtgrey{color:#999999; font-size:11px;}
#content .contr a{color:#777777; text-decoration:none;}
#content .contr a:hover{color:#000000;   text-shadow: 0px 2px 2px #999; }

#about { margin: 20px 0 0 0; }
#about div {
		   -webkit-transition: all 0.12s ease-out;
           -moz-transition: all 0.12s ease-out;
           -o-transition: all 0.12s ease-out;
       }
           #about div:nth-child(1) {  }
           #about div:nth-child(2) {  }
           #about div:nth-child(3) { }
           #about div:nth-child(4) {  }
#about div:hover { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); text-shadow: 0px 3px 2px #999; }
           #about a { text-decoration: none;  }

.dotline{background:url(../images/bgcnt.gif) no-repeat -234px -22px; height:6px;}

.webdesignportfolio{padding:10px 0px 0px 0px; height:200px;  overflow:hidden;}
.thumbb{padding-bottom:10px; float:left; width:160px; height:100px;}
.thumbrb{padding:0px 10px 10px 0px; float:left; width:160px; height:100px;}

.serviceshb{text-align:left; padding:20px 0px 10px 0px; }
.servhbr{width:215px; padding-right:15px; float:left;}
.servhb{width:215px; float:left;}

.rh{background:url(../images/liner02.gif) no-repeat bottom left; font-size:16px; font-weight:bold; color:#666666; text-align:right; height:24px;}
.rb{padding:10px 0px 10px 0px; text-align:right; line-height:22px; font-weight:500; font-size:12px; }

.border{width:215px; padding-right:15px; float:left;

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
  background-color: #555555;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#555555), to(#999999)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #555555, #999999); /* Chrome 10+, Saf5.1+ */
  background-image:    -moz-linear-gradient(top, #777777, #999999); /* FF3.6 */
  background-image:     -ms-linear-gradient(top, #555555, #999999); /* IE10 */
  background-image:      -o-linear-gradient(top, #555555, #999999); /* Opera 11.10+ */
  background-image:         linear-gradient(top, #555555, #999999);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#555555', EndColorStr='#999999');
			
			   -moz-box-shadow: 0px 0px 4px #666666; /* FF3.5+ */
  -webkit-box-shadow: 0px 0px 4px #666666; /* Saf3.0+, Chrome */
          box-shadow: 0px 0px 4px #666666; 
			
			}
			
.work_rotate1 {  height:60px; background-color:#FF9600; color:#FFFFFF; font-size:42px; float:left; padding-top:10px; text-align:center; z-index:5;
     -moz-transform: rotate(7.5deg);  /* FF3.5+ */
       -o-transform: rotate(7.5deg);  /* Opera 10.5 */
  -webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome */
      -ms-transform: rotate(7.5deg);  /* IE9 */
          transform: rotate(7.5deg);  
             filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9  */
                     M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand');
               zoom: 1;
			   -moz-box-shadow: 3px 3px 4px #999999; /* FF3.5+ */
  -webkit-box-shadow: 3px 3px 4px #999999; /* Saf3.0+, Chrome */
          box-shadow: 3px 3px 4px #999999; 
}
.work_rotate2 {  height:60px; background-color:#999999; color:#FFFFFF; font-size:42px; float:left; padding-top:10px; text-align:center; z-index:6;
     -moz-transform: rotate(-7.5deg);  /* FF3.5+ */
       -o-transform: rotate(-7.5deg);  /* Opera 10.5 */
  -webkit-transform: rotate(-7.5deg);  /* Saf3.1+, Chrome */
      -ms-transform: rotate(-7.5deg);  /* IE9 */
          transform: rotate(-7.5deg);  
             filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9  */
                     M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand');
               zoom: 1;
			   -moz-box-shadow: 3px 3px 4px #999999; /* FF3.5+ */
  -webkit-box-shadow: 3px 3px 4px #999999; /* Saf3.0+, Chrome */
          box-shadow: 3px 3px 4px #999999; 
}
.work_rotate3 {  height:60px; background-color:#0197E4; color:#FFFFFF; font-size:42px; float:left; padding-top:10px; text-align:center; z-index:4;
     -moz-transform: rotate(5.5deg);  /* FF3.5+ */
       -o-transform: rotate(5.5deg);  /* Opera 10.5 */
  -webkit-transform: rotate(5.5deg);  /* Saf3.1+, Chrome */
      -ms-transform: rotate(5.5deg);  /* IE9 */
          transform: rotate(5.5deg);  
             filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9  */
                     M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand');
               zoom: 1;
			   -moz-box-shadow: 3px 3px 4px #999999; /* FF3.5+ */
  -webkit-box-shadow: 3px 3px 4px #999999; /* Saf3.0+, Chrome */
          box-shadow: 3px 3px 4px #999999; 
}

#updates{-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background:#fff; text-align:left; padding:10px; clear:both; font-size:12px; 			
			   -moz-box-shadow: 0px 0px 6px #999999; /* FF3.5+ */
  -webkit-box-shadow: 0px 0px 6px #999999; /* Saf3.0+, Chrome */
          box-shadow: 0px 0px 6px #999999; 
		  border-top:3px solid #cccccc;}
#updates .myupdates{width:950px; margin:0 auto; text-align:left;} /*not using*/
#updates .updr{width:215px; padding:0px 20px 0px 0px; float:left;}
#updates .upd{width:225px; padding:0px 0px 0px 0px; float:left;} /*total width 930 | 215+20x3+225*/
#updates .updr ul{margin-left:20px;} #updates .updr ul li{line-height:20px;}
#updates .updr ul li a{color:#333333;}
#aboutme{ text-align:center; padding:20px 0px; clear:both; font-size:12px;  }
#aboutme .webdesignerdetails{width:950px; margin:0 auto; text-align:left;}
#aboutme .iamsudheer{width:250px; float:left; padding:0px 20px 0px 0px;}
#aboutme .webdesignskills{width:180px; float:left;  padding:0px 20px 0px 0px;}
#aboutme .whyfreelancewebdesigner{ width:480px; float:left;}

#aboutme .webdesignskills ul{margin-left:20px;} 
#aboutme .webdesignskills ul li{list-style-type:circle; line-height:18px;}

#main-panel{text-align:left; padding:0px 0px 10px 0px; z-index:100; visibility:visible;	min-height:450px; }
.galleryraw{position:relative; display:block; width:650px; height:222px; margin-top:15px; padding:0px 0px; z-index:1; visibility:visible; }
.webgallery{width:180px; float:left; padding:8px; border:1px solid #CCCCCC; height:200px;}
.webgallery div {	position:absolute; width:180px;	height:200px;}

.transpf{width:180px; height:200px; background:#0197E4;}
.transimg{opacity:0.8;filter:alpha(opacity=80);}

.row-spacer {position:relative; display:inline;	float:left;	width:28px;	height:222px; z-index:2; visibility:visible;}

#pf01a, #pf02a, #pf03a, #pf04a, #pf05a, #pf06a, #pf07a, #pf08a, #pf09a, #pf10a, #pf11a, #pf12a, #pf13a, #pf14a {
	visibility:visible;
}

#pf01b, #pf02b, #pf03b, #pf04b, #pf05b, #pf06b, #pf07b, #pf08b, #pf09b, #pf10b, #pf11b, #pf12b, #pf13b, #pf14b {
	visibility:hidden;
}

#workarea{width:650px; text-align:left; margin-top:20px;}
#workarea .works{width:350px; float:left;}
#workarea .workdet{width:280px; float:left; text-align:left; padding-left:20px;}
#workarea .workdet h2{font-size:18px; margin-bottom:10px; color:#FF9600;}
#workarea .workdet p{line-height:20px; margin-bottom:10px;}
#workarea .workdet p .loc{color: #0197E4;}
#workarea .workdet a.site{color:#FF0000; text-decoration:underline;}
#workarea .workdet .nxt{text-align:right; font-size:12px; font-family:Arial, Helvetica, sans-serif; margin-bottom:20px;}


.buttonb {
   border-top: 1px solid #96d1f8; background: #0197E4; background: -webkit-gradient(linear, left top, left bottom, from(#0074B0), to(#0197E4)); background: -moz-linear-gradient(top, #0074B0, #0197E4); padding: 5px 10px; -webkit-border-radius: 10px;  -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;    box-shadow: rgba(0,0,0,1) 0 1px 0; text-shadow: rgba(0,0,0,.4) 0 1px 0; color: #ffffff; font-size: 12px; font-family: Georgia, serif; text-decoration: none; vertical-align: middle;  }
   
.buttonb:hover { border-top-color: #01679B; background: #01679B; color: #ffffff; }
.buttonb:active {border-top-color: #1b435e; background: #1b435e;}

.buttonc {
   border-top: 1px solid #CECDCD; background: #C2C0C0; background: -webkit-gradient(linear, left top, left bottom, from(#DADADA), to(#ffffff)); background: -moz-linear-gradient(top, #DADADA, #ffffff); padding: 5px 10px; -webkit-border-radius: 6px;  -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: rgba(220,220,220,1) 0 1px 0; -moz-box-shadow: rgba(220,220,220,1) 0 1px 0;    box-shadow: rgba(220,220,220 ,1) 0 1px 0; text-shadow: rgba(0,0,0,.4) 0 1px 0; color: #666666; font-size: 12px; font-family: Georgia, serif; text-decoration: none; vertical-align: middle;  }
   
.buttonc:hover { border-top-color: #FF9600; background: #FF9600; color: #ffffff; }
.buttonc:active {border-top-color: #1b435e; background: #1b435e;}

#footer{background-color:#777777; padding:30px 0px 100px 0px;; text-align:center; color:#FFFFFF; margin-top:20px;}
#footer a{color:#FFFFFF; text-decoration:none;}
#footer a:hover{color:#CCCCCC;}

#footer .footarea{width:950px; margin:0 auto; text-align:left;}
#footer .footarea .footzudhire{width:400px; float:left;}
#footer .footarea .footlinks{width:550px; float:left; text-align:right;}



.clear{clear:both; margin:0;)