﻿html,body,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td, hr {
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
margin:0;
padding:0;
text-align: left;
}

body {
  background: #000 url("../images/bg.png") center 0 no-repeat;
  font-family: arial;
	color: #fff;
}

.clear {
	clear: both;
	visibility: hidden;
}

#wrapper {
  width: 940px;
  margin: 0 auto;
}


.header {
	border-bottom: 1px solid #fff;
	margin-bottom: 20px;
}
	.header h2 {
		font: normal bolder 18px arial; 
		text-transform: uppercase;
		float: left;
		margin-bottom: 20px;
	}

	.header a.more {
		font: normal 12px/18px arial; 
		float: right;
		color: #fff;
		text-decoration: none;
	}

		.header h2.about {
			text-indent: -5000px;
			display: block;
			height: 18px;
			width: 54px;
			background: url("../images/menu.gif") -243px 0 no-repeat;
		}

		.header h2.contact {
			text-indent: -5000px;
			display: block;
			height: 18px;
			width: 67px;
			background: url("../images/menu.gif") -302px 0 no-repeat;
		}

		.header h2.portfolio {
			text-indent: -5000px;
			display: block;
			height: 18px;
			width: 77px;
			background: url("../images/menu.gif") -55px 0 no-repeat;
		}

		.header h2.blogstream {
			text-indent: -5000px;
			display: block;
			height: 18px;
			width: 102px;
			background: url("../images/menu.gif") -138px 0 no-repeat;
		}


/* -------------------------------------------------------- */
/*	HEADER 																									*/
/* -------------------------------------------------------- */
#header {
	margin: 40px 0;
}
	#header h1 {
		float: left;
	}
		#header h1 a {
			font: normal bolder 36px arial; 
			text-transform: uppercase;
			color: #fff;
			text-decoration: none;
			text-indent: -5000px;
			background: url("../images/mubashariqbal.gif") no-repeat;
			display: block;
			width: 301px;
			height: 31px;
		}

	#header #main-menu {
		float: right;
	}

		#header #main-menu ul {
			list-style: none;
			margin: 0; padding: 0;
		}

			#header #main-menu ul li {
				margin-left: 1em;
				float: left;
			}

				#header #main-menu ul li a {
					display: block;
					margin-top: 8px;
					font: normal bold 18px/36px arial; 
					color: #fff;
					text-decoration: none;
					height: 18px;
					text-indent: -5000px;
				}

				#header #main-menu ul li a:hover {
					text-decoration: underline;
				}

				#header #main-menu ul li.home a {
					width: 50px;
					background: url("../images/menu.gif") 0 0 no-repeat;
				}

				#header #main-menu ul li.portfolio a {
					width: 77px;
					background: url("../images/menu.gif") -55px 0 no-repeat;
				}

				#header #main-menu ul li.blogstream a {
					width: 102px;
					background: url("../images/menu.gif") -138px 0 no-repeat;
				}

				#header #main-menu ul li.about a {
					width: 54px;
					background: url("../images/menu.gif") -243px 0 no-repeat;
				}

				#header #main-menu ul li.contact a {
					width: 67px;
					background: url("../images/menu.gif") -302px 0 no-repeat;
				}

/* -------------------------------------------------------- */
/*	FOOTER 																									*/
/* -------------------------------------------------------- */
#footer {
	margin: 20px 0;
	border: 1px solid #fff;
	
}

	#footer ul {
		list-style: none;
	}

		#footer ul li {
			font-size: 12px;
			padding: 10px;
			height: 20px;
			color: #fff;
		}

			#footer ul li.copyright {
				float: left;
				line-height: 20px;
			}

			#footer ul li.copyright p {
				padding: 0; margin: 0;
			}

			#footer ul li.logo {
				border-left: 1px solid #fff;
				float: right;
			}

			#footer ul li.logo a {
			}

			#footer ul li.logo a img {
			}





/* -------------------------------------------------------- */
/*	COMMON  																								*/
/* -------------------------------------------------------- */


#content {
  background: #fff;
  color: #000;
  padding: 20px;
}

  #content p {
    margin-bottom: 1em;
    font-size: 12px;
  }

  blockquote {
    padding: 10px 15px;
    border-left: 5px solid #ccc;
    margin-bottom: 1em;
    font-size: 12px;
  }
  
.full_pagination {
  border-top: 1px dotted #aaa;
}

.full_pagination .pagination {
  width: 100%;
}

.prev_next {
  width: 700px;
}

  .prev_next a {
    color: #fff;
    font-size: 12px;
    padding: 0 10px;
    margin-bottom: 10px;
    text-decoration: none;
  }

  .prev_next a.previous {
    float: left;
  }

  .prev_next a.next {
    float: right;
  }

.pagination {
  width: 700px;
  font-size: 12px;
  padding: 1em 0;
  border-bottom: 1px dotted #aaa;
}

.pagination a:last-child {
  border-right: none !important;
}

.pagination span:last-child {
  border-right: none !important;
}

  .pagination a, .pagination strong, .pagination span {
    text-decoration: none;
    color: #fff;
    border-right: 1px dotted #aaa;
    padding: 1em;
    margin: 0;
  }

  .pagination strong, .pagination span  {
    color: #555;
  }


  .pagination a:hover { 
    background: #333;
  }

span.required {
  color: #900;
}

form {
  margin: 0 0 20px 0;
  width: 600px;
  display: block;
}

  form fieldset {}
    form fieldset ul {
      list-style: none;
    }
      form fieldset ul li {
        margin: 0 0 20px 0;
        font-size: 12px;
      }
      
        form fieldset ul li label {
          margin: 5px 0;
          display: block;
        }

        form fieldset ul input {
          display: block;
          border: 1px solid #aaa;
          width: 350px;
        }
        form fieldset ul textarea {
          width: 350px;
          border: 1px solid #aaa;
          display: block;
          height: 200px;
        }


ol.errors { 
  margin-top: 20px;
  list-style: none;
}
  ol.errors li {
    margin: 0;
  }
    ol.errors li p {
      color:#900;
      
    }

/* -------------------------------------------------------- */
/*	ABOUT ME 																								*/
/* -------------------------------------------------------- */

#about-me {
	padding: 0;
	margin: 0 0 40px 0;
}
	#about-me ul {
		list-style: none;
		display: block;
		height: 125px;
		width: 940px;
		overflow: hidden;
	}
		#about-me ul li {
			float: left;
			padding: 0;
			margin: 0;
		}
			#about-me ul li.intro {
				display: block;
				height: 125px;
				width: 659px;
				overflow: hidden;
				background: #f1ed34;
				padding: 20px;
				color: #000;
				font: normal 18px/24px georgia; 
				border-right: 1px dotted #000;
			}
  			#about-me ul li.intro p {
  			  margin: 0.3em 0 1em 0 ;
			  }
			#about-me ul li.picture {
				display: block;
				height: 125px;
				width: 240px;
				overflow: hidden;
			}

#portfolio {
	padding: 0;
	margin: 0 0 20px 0;
}
	#portfolio ul {
		list-style: none;
		display: block;
		width: 940px;
	}

		#portfolio ul li {
			float: left;
			margin-bottom: 20px;
		}
			#portfolio ul li.date {
				display: block;
				float: left;
				width: 119px;
				height: 125px;
				background: #ee1c24;
				border-right: 1px dotted #000;
			}
			#portfolio ul li.date p {
				color: #fff;
			}

			#portfolio ul li.date p.month {
				margin: 30px auto 0px auto;
				display:block;
				background: url("../images/months.gif")  0 0 no-repeat;
				text-indent: -5000px;
				width: 101px;
				height: 16px;
			}

			#portfolio ul li.date p.month-01 { background: url("../images/months.gif")  0px   -0px no-repeat !important; }
			#portfolio ul li.date p.month-02 { background: url("../images/months.gif")  0px  -22px no-repeat !important; }
			#portfolio ul li.date p.month-03 { background: url("../images/months.gif")  0px  -44px no-repeat !important; }
			#portfolio ul li.date p.month-04 { background: url("../images/months.gif")  0px  -66px no-repeat !important; }
			#portfolio ul li.date p.month-05 { background: url("../images/months.gif")  0px  -87px no-repeat !important; }
			#portfolio ul li.date p.month-06 { background: url("../images/months.gif")  0px  -109px no-repeat !important; }
			#portfolio ul li.date p.month-07 { background: url("../images/months.gif")  0px  -131px no-repeat !important; }
			#portfolio ul li.date p.month-08 { background: url("../images/months.gif")  0px  -151px no-repeat !important; }
			#portfolio ul li.date p.month-09 { background: url("../images/months.gif")  0px  -173px no-repeat !important; }
			#portfolio ul li.date p.month-10 { background: url("../images/months.gif")  0px  -194px no-repeat !important; }
			#portfolio ul li.date p.month-11 { background: url("../images/months.gif")  0px  -216px no-repeat !important; }
			#portfolio ul li.date p.month-12 { background: url("../images/months.gif")  0px  -238px no-repeat !important; }


			#portfolio ul li.date p.year {
				margin: 10px 0 0 39px ;
				display:block;
				background: url("../images/years.gif")  0 0 no-repeat;
				text-indent: -5000px;
				width: 41px;
				height: 16px;
			}

			#portfolio ul li.date p.year-2000 { background: url("../images/years.gif")  0px  -86px no-repeat !important; }
			#portfolio ul li.date p.year-2001 { background: url("../images/years.gif")  0px -108px no-repeat !important; }
			#portfolio ul li.date p.year-2002 { background: url("../images/years.gif")  0px -130px no-repeat !important; }
			#portfolio ul li.date p.year-2003 { background: url("../images/years.gif")  0px -151px no-repeat !important; }
			#portfolio ul li.date p.year-2004 { background: url("../images/years.gif")  0px -173px no-repeat !important; }
			#portfolio ul li.date p.year-2005 { background: url("../images/years.gif")  0px -194px no-repeat !important; }
			#portfolio ul li.date p.year-2006 { background: url("../images/years.gif")  0px -216px no-repeat !important; }
			#portfolio ul li.date p.year-2007 { background: url("../images/years.gif")  0px -238px no-repeat !important; }
			#portfolio ul li.date p.year-2008 { background: url("../images/years.gif")  0px -259px no-repeat !important; }
			#portfolio ul li.date p.year-2009 { background: url("../images/years.gif")  0px -281px no-repeat !important; }
			#portfolio ul li.date p.year-2010 { background: url("../images/years.gif")  0px -302px no-repeat !important; }

			#portfolio ul li.type {
				display: block;
				float: left;
				width: 119px;
				height: 125px;
				background: #ee1c24;
				border-right: 1px dotted #000;
			}

			#portfolio ul li.type p {
			}

			#portfolio ul li.type.created p {
				margin: 56px auto;
				padding: 0;
				display:block;
				background: url("../images/portfolio-types.gif")  0 0 no-repeat;
				text-indent: -5000px;
				width: 98px;
				height: 16px;
			}
			#portfolio ul li.type.developed p {
				margin: 56px auto;
				padding: 0;
				display:block;
				background: url("../images/portfolio-types.gif")  0 -20px no-repeat;
				text-indent: -5000px;
				width: 98px;
				height: 16px;
			}
			#portfolio ul li.type.designed p {
				margin: 56px auto;
				padding: 0;
				display:block;
				background: url("../images/portfolio-types.gif")  0 -44px no-repeat;
				text-indent: -5000px;
				width: 98px;
				height: 16px;
			}
			#portfolio ul li.type.advised p {
				margin: 56px auto;
				padding: 0;
				display:block;
				background: url("../images/portfolio-types.gif")  0 -64px no-repeat;
				text-indent: -5000px;
				width: 98px;
				height: 16px;
			}
			#portfolio ul li.picture {
			}


#blogstream {
	padding: 0;
	margin: 0 0 20px 0;
}
	#blogstream ul {
		list-style: none;
		display: block;
		width: 700px;
		margin-top: -20px;
		float: left;
		overflow: hidden;
	}
		#blogstream ul li {
			padding: 20px;
			border-right: 1px dotted #aaa;
			border-bottom: 1px dotted #aaa;
			display: block;
			float: left;
			width: 199px;
			height: 200px;
		}

		#blogstream ul li.first {
		  padding-left: 0;
		}

		#blogstream ul li h3 { 
			font: bold 12px/20px arial; 
		}

			#blogstream ul li h3 a { 
				color: #0b6ba1;
				text-decoration: none;
			}

		#blogstream ul li h2 { 
			font: normal bold 14px/20px arial; 
			height: 40px;
		}

			#blogstream ul li h2 a { 
				color: #ee1c24;
				text-decoration: none;
			}

		#blogstream ul li .body { 
			margin-top: 10px;
			height: 120px; 
		}
			#blogstream ul li .body p { 
				font: normal 12px/15px arial; 
			}
		#blogstream ul li h4 { 
			font: normal 12px/20px arial; 
			color: #999;
		}

  #blogstream #sources {
    float: left;
    margin-top: -20px;
    padding-right: 0;
		width: 240px;
		color: #aaa;
  }

    #blogstream #sources h2 {
      padding: 20px;
      border-bottom: 1px dotted #aaa;
    }

  #blogstream #sources ol {
    margin: 0; 
    display: block;
    padding: 20px;
  }
    #blogstream #sources ol li {
      margin: 0;
      display: block;
			width: 199px;
			padding: 0 0 10px 0;
    }

      #blogstream #sources ol li a  {
        color: #aaa;
        text-decoration: none;
        font-weight: bold;;
      }
        #blogstream #sources ol li a:hover {
          text-decoration: underline;
        }

.blogstream_latest { font-size: 12px;  }
  .blogstream_latest h4 {
    font-weight: bold;
    padding-bottom: 10px;
    border-bottom: 1px solid #aaa;;
  }
    .blogstream_latest ol { list-style: none; }
      .blogstream_latest ol li {
        border-bottom: 1px dotted #aaa;;
      }
        .blogstream_latest ol li a {
          display: block;
          padding: 10px 0;
          text-decoration: none;
        }

        .blogstream_latest ol li a:hover {
          background: #fff; 
        }

p.subscribe {font-size: 12px; color: #aaa; padding: 6px 0 0 0;}
  p.subscribe a {font-size: 12px; color: #aaa; text-decoration: none;}
    p.subscribe a:hover {text-decoration: underline;}

.detail p.subscribe, .detail p.subscribe a { color: #555; }
  
.detail {
  background: #eee;
  color: #000;
  width: 940px;
  display: block;
  overflow: hidden;
}

  .detail h3 {
    margin-bottom: 1em;
  }

  .detail a {
    color: #000;
  }
  
  .detail p {
    margin-bottom: 1em;
    font-size: 12px;
  }

  .detail .meta {
    background: #eee;
    border: 1px solid #d5d5d5;
    padding: 10px;
  }

  .detail p.date {
    margin: 0;
    font-size: 11px;
    color: #555;
  }

.single {
  padding: 20px;
  background: #fff;
  display: block; 
  float: left;
  width: 659px;
  border-right: 1px dotted #aaa;
  padding-bottom: 200px;
}

.sidebar {  
  float: left;
  width: 200px;
  padding: 20px;
}
