/*-------------------------
Site: sunils.com.np
Updated: 05/08/2013
Updated by: Sunil
------------------------------ */

body {
  position: relative;
  background-color: #999;
  margin: auto 0;
  background: #5f5f5f  url(../images/bg.jpg) center right repeat;
}


/*--------------------------------------------------header --------------------------------------*/
#header{
	font-family:'trebuchet ms', Arial, sans-serif;
	font-size: 1em;
	text-align: right;
	color: #999;
	height: 21.7em;
	margin: auto 0;
	padding: 1%;
	background: #5f5f5f  url(../images/header.jpg) center right repeat-x; 
}
#header-left{
	font-family:'segoe script', 'lucida handwriting' ;
	font-size: 1em;
	text-align: left;
	color: #999;
	}
/*--------------------------------------------------Content --------------------------------------*/
#content{
  position:absolute;
  left:0px;
  top:9.8em;
  min-width: 60%;
  margin: 0 20%;
  padding: 1%;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 0.3em;
		-moz-border-radius: 0.3em;
		-khtml-border-radius: 0.3em;
		-webkit-border-radius: 0.3em;
}
#contenttop {
font-family:'trebuchet ms', Arial, sans-serif;
font-size: 1.5em;
background:  url(../images/me.png) 10% bottom no-repeat;
background-size: 7em;
background-color: rgba(0, 0, 0, 0.5);
text-align: right;
color : #999;
font-weight:lighter;
padding: 3em 2em;
text-indent: 5em;
border-top-left-radius: 0.3em;
		-moz-border-radius-topleft: 0.3em;
		-khtml-border-top-left-radius: 0.3em;
		-webkit-border-top-left-radius: 0.3em;
border-top-right-radius: 0.3em;
		-moz-border-radius-topright: 0.3em;
		-khtml-border-top-right-radius: 0.3em;
		-webkit-border-top-right-radius: 0.3em;

}
#contenttop b{
font-weight:bold;
color: #fcfcfc;
}
#contentbottom {
background-color: rgba(0, 0, 0, 0.5);
text-align: left;
font-family: 'trebuchet ms', Arial, sans-serif;
font-size: 0.8em;
color : #999;
padding: 1em;
text-shadow: 1px 0 0 #666;
border-bottom-left-radius: 0.3em;
		-moz-border-radius-bottomleft: 0.3em;
		-khtml-border-bottom-left-radius: 0.3em;
		-webkit-border-bottom-left-radius: 0.3em;
border-bottom-right-radius: 0.3em;
		-moz-border-radius-bottomright: 0.3em;
		-khtml-border-bottom-right-radius: 0.3em;
		-webkit-border-bottom-right-radius: 0.3em;
}
/*--------------------------------------------------Footer --------------------------------------*/
#contact{
  position:absolute;
  min-width: 60%;
  left:0px;
  bottom:-65%;
  margin: 0 20%;
  padding: 1% 1% 2% 1%;
  background-color: rgba(155, 155, 155, 0.7);
  text-align: left;
  font-family: 'trebuchet ms','comic sans ms' ;
  font-size: 0.9em;
  font-weight:lighter;
  color : #111;
  border-radius: 0.3em;
		-moz-border-radius: 0.3em;
		-khtml-border-radius: 0.3em;
		-webkit-border-radius: 0.3em;
}
#contact p{
font-family:verdana, times, helvetica;
font-size: 1em;
font-weight: bold;
padding-left:4em;
margin-top: -1%;
}
#contact > a:hover{
background-size: 5em;
}
#col1{
background:  url(../images/gmail.png) center center no-repeat;
background-size: 5.5em;
display: block;
text-indent: -99999em;
float: left;
width:19%;
margin: 2%;
padding:1%;
line-height: 3em;
}
#col1:hover, #col2:hover, #col3:hover, #col4:hover{
background-size:6em;
cursor:pointer;
}
#col2{
background: transparent  url(../images/telephone.png) center center no-repeat;
background-size: 5.5em;
display: block;
text-indent: -99999em;
float: left;
width:19%;
margin: 2%;
padding:1%;
line-height: 3em;
}
#col3 {
background: transparent  url(../images/fb.png) center center no-repeat;
background-size: 5.5em;
display: block;
text-indent: -99999em;
float: left;
width:19%;
margin: 2%;
padding:1%;
line-height: 3em;
}
#col4 {
background: transparent  url(../images/twitter.png) center center no-repeat;
background-size: 5.5em;
display: block;
text-indent: -99999em;
float: left;
width:19%;
margin: 2%;
padding:1%;
line-height: 3em;
}
#footer{
position:absolute;
min-width: 62%;
left:0px;
bottom:-69%;
margin: 0 20%;
background-color: rgba(0, 0, 0, 0.7);
clear: both;
color:#999;
font-size: 0.9em;
font-family: calibri, Arial, sans-serif;
text-align:center;
}
#clockDisplay {
display:inline;
font-family:calibri, Arial, sans-serif;
letter-spacing: 2px;
}

@media only screen and (max-width: 1024px) and (min-width: 681px) {
#header{
    color: #fff;
	text-align: left;
	font-weight: bold;
	height: 12em;
	}
#header-left{
	border-top: double 1px #fff;
	font-weight: normal;
	padding: 1.5em 0 1em 23em ;
	color: #999;
	}
#content{
  position:absolute;
  top: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  margin: auto 0;
  min-width:98%;
  }
#contenttop {
font-family: Verdana, tahoma, sans-serif;
background:  url(../images/me.png) 5% top no-repeat;
background-size: 9em;
background-color: rgba(0, 0, 0, 0.5);
}
#contact{
  position:absolute;
  bottom: -199%;
  min-width: 98%;
  margin:0;
  background-color: rgba(200, 200, 200, 0.5);
  clear:both;
  }
#col1, #col2, #col3, #col4{
background-size:6.5em;
}
#col1:hover, #col2:hover, #col3:hover, #col4:hover{
background-size:6.5em;
cursor:pointer;
}
#footer{
position:absolute;
bottom: -214%;
min-width: 97%;
margin: 3em 0 0 0;
background-color: rgba(0, 0, 0, 0.5);
padding: 0.5em 2em 0.5em 0;
color:#999;
text-align:right;
}
}

@media only screen and (max-width : 680px) {
#header{
    color: #fff;
	font-size:0.8em;
	text-shadow: 1px 1px 2px #000, 0 0 1em #ff0, 0 0 0.2em #ff0;
	text-align: left;
	font-weight: bold;
	height: 9em;
	}
#header-left{
	border-top: dashed 1px #fff;
	font-weight: normal;
	padding: 1em 1em 6em 1em;
	color:#ccc;
	}
#content{
  position:absolute;
  top: 100%;
  text-shadow: 1px 1px 2px #000, 0 0 1em #fff, 0 0 0.2em #fff;
  background-color: rgba(5, 25, 75, 0.3);
  margin: auto 0;
  min-width:98%;
  }
#contenttop {
font-size: 1em;
font-family: 'oficina sans ms', tahoma, sans-serif;
background:  url(../images/me.png) 5% bottom no-repeat;
padding-left: 8em;
background-size: 10em;
background-color: rgba(0, 0, 0, 0.5);
}

#contentbottom {
background-color: rgba(0, 0, 0, 0);
text-align: center;
font-family: calibri, sans-serif;
font-size: 0.7em;
color : #fff;
padding: 0;
}
#contact{
  position:absolute;
  bottom: -236%;
  border-top: dotted 1px #000;
  border-bottom: dotted 1px #000;
  padding:0;
  min-width: 100%;
  margin: 0;
  }
#col1, #col2, #col3{
background-size:4em;
border-right: dotted 1px #000;
width: 24.8%;
padding: 0;
margin: 0;
}
#col4{
background-size:4em;
cursor:pointer;
width: 24.8%;
padding: 0;
margin: 0;
}
#col1:hover, #col2:hover, #col3:hover, #col4:hover{
background-size:4em;
cursor:pointer;
}
#contact p{
text-indent:-9999em;
margin: 0;
margin-top:-1em;
}

#footer{
position:absolute;
bottom: -195%;
min-width: 100%;
margin: 1em 0 0 0;
background-color: rgba(0, 0, 0, 0.5);
padding: 0;
color:#999;
text-align:center;
}
}