body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #4C0F00;
	line-height:1.5em;
	margin:0px;
	height:100%;
	
	/* Use scalable background image 
	  background-image: url("stripBG3.png");
	  background-position: center center;
	  background-attachment: fixed;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  background-size: cover;*/
	  
	  /* Create a gradient background */
	  background-image: -webkit-linear-gradient( top, #F3F8FC, #2E3D4C);
	  background-image: -moz-linear-gradient( top, #F3F8FC, #2E3D4C);
	  background-image: -ms-linear-gradient( top, #F3F8FC, #2E3D4C);
	  background-image: -o-linear-gradient( top, #F3F8FC, #2E3D4C);
	  background-image: linear-gradient( top, #F3F8FC, #2E3D4C);
		
	 /* Transparent background. Note that using opacity affects all the body contents including all the divs tags  */
          opacity: 1.0;
	
	
}

table{
	position:relative;
	left:5px;
	
}


#headwrap{
	position:relative;
	width:1010px;
	margin:auto;

}

#bodywrap{
	position:relative;
	top:5px;
	width:1010px;
	margin:auto;
	
}


#topdiv{
		position:relative;
		width:1010px;
		height:150px;
		bottom:15px;
		background: url(./stripBG2.png);
		background-size: 100% 100%;
        	background-repeat: no-repeat;
        	/*border:1px solid #09c;*/
		min-width:1010px;
		padding-top:15px;
		padding-top:15px;
	}
	
	#logo{  position:absolute;
		display:block;
		float:left;
		padding-top:25px;
		left:10px;
		border-style: none;
		
	}
	
	#menu{
		display:none;
	}
	
	#menuXout{
		display:none;
	}
	
	
	#links{
		display:none;
	}
	
	#top_middle_image{
		position:relative;
		margin-left:auto; 
		margin-right:auto;
		height: 130px;
		border:0;
		top:10px;
		
		opacity:1;/* animate the top middle image using opacity and transition */
		-webkit-transition:opacity 4.0s linear 0s;
		-ms-transition:opacity 4.0s linear 0s;
		transition:opacity 4.0s linear 0s;

	}

	#wss{
		position:absolute;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 28px;
		color: #FFFFD6;
		text-shadow: 4px 4px 8px black;
		top:25%;
		left: 25%;
		z-index:2;
		
		opacity:0;
		-webkit-transition:opacity 4.0s linear 0s;
		-ms-transition:opacity 4.0s linear 0s;
		transition:opacity 4.0s linear 0s;
	}
	
	/*this css is for product, services, about us, support pages*/
	#top_middle_image2{
		position:absolute;
		float:left;
		left:205px;/*center it*/
		margin-left:auto; 
		margin-right:auto;
		height: 28px;
		border:0;
		top:61px;

	}
	
	
	#topdiv img#facebook_logo{
		position:absolute;
		float:left;
		top:100px;
		left:905px;
		border-style: none;
		
	}
	
	
	#topdiv img#twitter_logo{
		position:absolute;
		float:left;
		top:100px;
		left:952px;
		border-style: none;
		
	}
	
	
	#navbar{
		display:block;
		position:relative;
		left:0px;
		top:0px;		
		width:1010px;
		height:50px;		
		min-width:1010px;
	}
	
	#navbar ul{
		position:absolute;
		bottom:15px;		
		padding:0px;
		margin:auto;
		list-style:none;
		
		
		
	}
	#navbar ul >li{
		float:left; 
		padding-right:0px;/* just adjust padding to zero to avoid overlay of the links in desktop chrome browser*/
		position:relative;
		
		
	}
	#navbar ul >li >a{
		display: table-cell;
		vertical-align:middle;
		width:20%; 
		height:50px;
		text-align:center;
		background:#69c;
		color:#FFF;
		text-decoration:none;				
		-ms-transition: all 0.6s ease 0s;
		transition: all 0.6s ease 0s;
	}
	
	/*Not used in this webdesign*/
	#navbar ul li  ul{
		display:none;
		position:absolute;
		width:100px;
		padding-left:0px;
		left:0px;
		top:100%;/*the height of each main link is 50px, so if we use 100% means 100% below the parent element*/
	}
	
	/*Not used in this webdesign*/
	#navbar li:hover >ul{
		display:block;
		background:#FFF;/* this is just to shield  the ul block from body content */
		z-index:1;	/* this is just to make ul block on top of  body content during block display */
	}
	
	/*Not used in this webdesign*/
	#navbar li > ul li{
		padding:0px; padding-top:1px;
		
	}
	
	/*Not used in this webdesign*/
	#navbar ul li>ul > li>ul {
		position:absolute;
		left:100%; /*The same concept as line 259*/
		top:0px;
		padding-left:1px;
	}
	
	/*Note: you can say ul li>ul li>ul li */
	/*Not used in this webdesign*/
	#navbar li>ul li>ul li{
		width:100px;
		
	}
	#navbar li:hover > a{
		background:#00B88A;
		text-shadow:1px -1px #000000;
	}
	
	a:active, a:focus {outline:none; border:none;}	
	
	a {
	font-size: 12px;
	color: #4C0F00;
}
	a:link {
		text-decoration: none;
	}
	a:visited {
		text-decoration: none;
		/*color: #03F;*/
	}
	a:hover {
		text-decoration: none;
		color: #03F;
	}
	a:active {
		text-decoration: none;
		color: #4C0F00;
	}
	
	
	/* this css applies to pagination page */
	#paginationwrap > #paginationContent > div#pagination{
	
		position:relative;
		float:left;
		margin-bottom:5px;
		width:100%;
		background: url(./stripBG2.png);
		background-size: 100% 100%;
        	background-repeat: no-repeat;
		border:1px solid none;
		border-radius:.8em;
	}
	

	#pageContent{
		position:relative;
		left:0px;
		width:1010px;
		bottom:10px;
		margin-top:-5px;
		/*background-color:#F0F8FF;*/
		/*border:0px solid #a1a1a1;*/
		border-radius:.5em;
		min-width:1010px;
	}
	
	#pageContent > div#div1home{

		float:left; 
		width:100%;/* Note: this div width can be changed into 49.8% if you want to display div2  */
		background: url(./stripBG2.png);
		background-size: 100% 100%;
        	background-repeat: no-repeat;
		border:1px solid none;
		border-radius:.8em;
	}
	
	#pageContent > div#div1{

		float:left; 
		width:49.8%;
		background: url(./stripBG2.png);
		background-size: 100% 100%;
        	background-repeat: no-repeat;
		border:1px solid none;
		border-radius:.8em;
	}
	
	#imgGallaryTable{
		width:100%; 
		border-collapse:separate; 
		border-spacing:10px; 
		margin-left:-10px;
	
	}
	
	td.imgGallaryCell{
		
		border:1px solid none; 
		text-align:center; border-radius:0.0em; 
		box-shadow: 5px 5px 5px #000000; 
		background: url(http://yosiapp.com/YosiDroid_Apps/style/green1.png); 
		background-size: 100% 100%; 
		background-repeat: no-repeat;
	}
	
	
	h3 {
	    color:#FFFFD6;
	    text-shadow:1px 1px #000000;
	    margin-bottom:-30px;}

	#pageContent > div#div2{
		/* Note: when this div moved 50.2% from the left,
		it means 50% is its space , and the other 0.2% is being used to separate from div1  */
		display: block;
		margin-left:50.2%;
		background: url(./stripBG2.png);
		background-size: 100% 100%;
        	background-repeat: no-repeat;
		border:1px solid none;
		border-radius:.8em;
	}
	
	#pageContent > div#div3{
		/* Note: when this div moved 50.2% from the left,
		it means 50% is its space , and the other 0.2% is being used to separate from div1  */
		display: block;
		margin-left:50.2%;
		background: url(./stripBG2.png);
		background-size: 100% 100%;
        	background-repeat: no-repeat;
		border:1px solid none;
		border-radius:.8em;
		
	}
	
	#pageContent > div#div1 > img#img1{
		display: block;
    		margin-left: auto;
   		margin-right: auto;
		z-index: 10;
	}
	
	p{
		padding:10px;
	}
	
	
	.downloadButton{
		width:70%;
		height:40px;
		text-align:center; 
		border-radius:0.5em; 
		box-shadow: 5px 5px 5px #000000; 
		margin-bottom:20px;
		border: none;
		outline:none;
		background-color:#00B88A; 
		color: white;
		transition: all 0.3s ease 0s;
			
	}
	
	.downloadButton:hover {
  		background: #3071A9;
  		color: #FFFFC2;
  		
	}
	
	.downloadButton:focus{
    		outline: none;   
	}
	
	#pageFooter{
		position:relative;
		margin-right:auto;
		margin-left:auto;
		margin-top:30px;		
		width:1010px;
		height:50px;
		padding:10px 0px 10px 0px;
		background: url(./stripBG2.png);
		background-size: 100% 100%;
        	background-repeat: no-repeat;
		/*border:0px solid #ead7fc;*/
		/*border-radius:.5em;*/
		clear:both;
		min-width:1010px;
		color: #4C0F00;
		
	}