/********* STRUCTURE *********/
/****************************/

/*
1. GENERAL TYPOGRAPHY:
	1. Reset CSS
	2. Body & html
	3. Headings
	4. Lists styles
	5. Links
	6. Text (paragraphs and colors)
	7. Buttons
	8. Input form

2. GENERAL LAYOUT:
	1. General
	2. Header (including navigation, logo)
	3. Middle
	4. Footer

3. SPECIFIC PAGES OR ELEMENTS:
	1. Box search
	2. Home page
	3. Blog
	4. Portfolio
*/

/************************ 1. GENERAL TYPOGRAPHY ****************************/
/***************************************************************************/

	/* 1. Reset CSS
	------------------------------------------------------*/

	ul,ol,li,h1,h2,h3,h4,h5,h6,form,p,a,img{  padding: 0; border: 0; line-height:24px; }
	ul,li{ list-style-type: none; }
	
		
	/* 2. Body & html
	------------------------------------------------------*/
	
	html{ width: 100%; height: 100%; overflow: hidden; }
        
        @media (min-width:641px)  { html{ overflow: scroll; } }
	
	body{ margin: 0; padding: 0; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 18px; line-height: 20px; color: #000; background-color: #FFF; overflow-x: hidden; height: 100%; min-height: 100%;   overflow-y: hidden;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -ms-transition: all .3s;
        -o-transition: all .3s;}

	/* 3. Headings
	------------------------------------------------------*/

	h1,h2,h3,h4,h5,h6{ letter-spacing: 0; padding: 10px 10px 3px 0; font-weight: normal; line-height: 30px; color: #5e636d; }

	h1{ height: 15px; font-size: 20px; padding-left:7px;}

	h2{ height: 20px; font-size: 18px;  }

	h3{ height: 15px; font-size: 17px; }


	h4{ height: 9px; font-size: 14px; }
	h5{ height: 7px; font-size: 12px; } 
	h6{ height: 5px; font-size: 11px; }
	
	
	h3.ui-collapsible-heading {
		height: 48px;
		line-height: 1.6em;
	}

	/* 4. Lists styles
	------------------------------------------------------*/

	.categories-inside{ width: 100px; height: 163px; margin: 0 1px 0 0; float: right; line-height: 18px; background: url(../images/dropdown.png) top no-repeat; }
	.categories-inside ul{ width: 84px; padding: 0; margin: 8px 0 8px 8px; float: left; }
	.categories-inside ul li{ display: block; float: left; padding: 0; margin: 0; background:none; }
	.categories-inside ul li a:link, .categories-inside ul li a:visited{ display: block; float: left; padding:2px 0 4px 10px; margin: 0px; width: 66px; color:#f1f1f3; background:none; text-decoration:none; text-shadow: 0px -1px 0px #000;}
	.categories-inside ul li a:hover{ color: #fff; }

	.list-icon{ line-height: 14px; color: #565961; text-shadow: 0px 1px 0px #eeeef1; }
	.list-icon li{ padding: 7px; list-style-type: none; background:none; }
	.list-icon li img{ float: left; margin: 0 7px 0 0; }
	.list-icon li img, .list-icon li span{ vertical-align: middle; }

	/* 5. Links
	------------------------------------------------------*/

	a:link, a:visited, a:hover{ text-decoration: none; }

	/* 6. Text
	------------------------------------------------------*/

	.shadow{ text-shadow: 0px 1px 0px #e9e9ed;}
	.text_normal{ padding: 0px 0 15px 0; font-size: 11px; color: #565961; text-shadow: 0px 1px 0px #e9e9ed; }
	.text_center{ text-align: center; }
	.text_form{ width: 60px; float: left; padding: 0; font-size: 18px; line-height: 40px; color: #000000; text-shadow: 0px 1px 0px #e9e9ed; margin:auto; }
	.text_form_2{ width: 60%; float: left; padding: 0; font-size: 18px; line-height: 30px; color: #000000; text-shadow: 0px 1px 0px #e9e9ed; }
	.title_article{ height: 18px; font-size: 14px; letter-spacing: 0; font-weight: normal; line-height: 0.4em; color: #5e636d; }
	.text_article{ padding: 12px 0 2px 0; text-shadow: 0px 1px 0px #e9e9ed; }
	.title_item{ height: 18px; font-size: 14px; letter-spacing: 0; font-weight: normal; line-height: 0.2em; color: #5e636d; }
	.text_item{ padding: 4px 0 4px 0; text-shadow: 0px 1px 0px #e9e9ed; }

	/* 7. Buttons
	------------------------------------------------------*/

	.search{ margin: 9px 20px 0 0; float: right; }
	.butt_black{ margin: 8px 20px 0 20px; }
	.butt_black.right{ float: right; }
	.butt_black.left{ float: left; }
	.buttons{ width: 208px; margin: 0 auto; position: relative; }
	.prev_next{ width: 100%; position: relative; }
	.butt_right{ float: right; position: relative; }
	.button{ font-size: 12px; font-weight: bold; line-height: 34px; display: block; position: ; padding: 0; height: 34px; color: #9f9eac; text-shadow: 0 1px 0 #e0e0e3; background-image: url(../images/button_gray.png); padding-left:10px; }
	a.button{ cursor: pointer; padding-left:0%; }
	a.button:hover{ color: #4D4D4D; }
	.before, .after{ background-image: url(../images/button_black.png); display: block; position: absolute; top: 0; width: 21px; height: 34px; }
	.button .before{ background: url(../images/before_gray.png) no-repeat; left: -21px; }
	.button .after{ background: url(../images/after_gray.png) no-repeat; right: -21px; }
	.button.search_button{ float: right; margin: 10px 22px 10px 32px; }
	.button.right_top{ float: right; margin: -3px 21px 20px 0; }
	.button.left{ float: left; margin: 12px 0 20px 21px;  }
	.button.right{ float: right; margin: 12px 21px 20px 0;  }
	.button.submit{ float: left; margin: 10px 0 22px 91px; }

	/* 8. Input form
	------------------------------------------------------*/

	.input{ width: 100%; margin: 0 0 5px 8px; line-height:px;margin-top:-5px; margin-left:5px;margin-bottom:-20px; }
	.input_text, .contact_form, .text_area{ width: 194px; font-size: 11px; font-family: Arial, Verdana, Helvetica, sans-serif; }
	.input_text, .contact_form{ height: 30px; padding: 0 8px; border: 0; line-height: 30px; color: #9999a4; background: url(../images/input_text.png) center no-repeat; }
	.input_text{ margin: 6px; }
	.contact_form, .text_area{ margin: 3px 0% 6px 0; float: right; }
	.text_area{ height: 96px; padding: 8px; border: 0; color: #9999a4; background: url(../images/text_area.png) center no-repeat; }

/************************** 2. GENERAL LAYOUT ******************************/
/***************************************************************************/

	/* 1. General
	------------------------------------------------------*/

	#content_header, #content_navigation, #content_footer{ width: 320px; margin: 0 auto; }
	
	#wrapper{
	   margin:0px;
	   background-color: #FFF;	   
	}

	/* 2. Header
	------------------------------------------------------*/

	#top{ width: 100%; height: 54px; background-color:#333333;  }
	#navigation{ width: 100%; height: 49px; border-bottom: 1px solid #f1f1f3; background: url(../images/bg_navigation.png) repeat-x; }
	#header{ width: 100%; min-height: 54px;background-color:#6FAA10;}
	#categories-dropdown{ z-index: 100; width: 300px; height: 163px; position: absolute; margin: 0 auto; top: 96px; display: none; }
	.home{ border-bottom: 1px solid #f6f6f7; }
	.page_x{ border-bottom: 1px solid #5e5d63; }

	/* 3. Middle
	------------------------------------------------------*/

	.box_center{ margin: 0 auto; }
	#page_x{ width: 280px; padding: 0px 0 0 0; }
	
	#page_x h2 {
		padding-top:0px;		
	}

	/* 4. Footer
	------------------------------------------------------*/

	#footer{ clear: left; width: 100%; height: 40px; margin: 10px 0 0 0; font-size: 14px; font-weight:bold; color: #000; /* background-color:#333333; margin-top: -50px; */}
	#footer a{ color: #dcdce1; }
	#footer a:hover{ color: #ffffff; }
	#copyright{ float: left; margin: 12px 0 0  20%;  }
	#back_to_top{ float: right; margin: 11px 10px; }
	#back_to_top img, #back_to_top span{ vertical-align: middle; }

/************************** 3. SPECIFIC PAGES ******************************/
/***************************************************************************/

	/* 1. Box search
	------------------------------------------------------*/

	#box{ width: 100%; height: 145px; position: absolute; top: -400px; margin: 0 auto; padding: 20px 0 0 0; z-index:999999; text-align: center; background: url(../images/search_box.png) center no-repeat; }

	/* 2. Home
	------------------------------------------------------*/

	#menu_index{ width: 100%; padding: 27px 0; text-align: center; }
	#menu_index ul{ padding: 0px; margin: 0px; list-style: none; display: inline-block; }
	#menu_index ul li{ padding: 0px; margin: 10px 2px 0 4px; display: inline-block; }
	#menu_index img{ float: left; }

	/* 3. Blog
	------------------------------------------------------*/

	.article{ padding: 6px 0; }
	.articles li{ clear: left; padding: 14px 0 4px 0; }
	.articles li img{ float: left; }
	.articles a:link, .articles a:visited{ color:#565961; font-weight: bold }
	.articles a:hover{ color: #6b6e76; }
	.img_left{ float: left; margin: 0 16px 12px 0; }
	.separator{ width: 100%; height: 2px; clear: left; margin: 8px 0 0 0; background: url(../images/separator.png) left repeat-x; }

	/* 4. Portfolio
	------------------------------------------------------*/

	.item{ margin: 10px 0; }
	.items li{ clear: left; padding: 6px 0 6px 0; }
	.items li img{ float: left; margin: 6px 16px 16px 6px; }
	.items a:link, .items a:visited{ color:#565961; font-weight: bold }
	.items a:hover{ color: #6b6e76; }
	.more{ margin: 4px 0 4px 0; float: right; }
	.separator_port{ width: 100%; height: 2px; clear: left; margin: 8px 0 4px 0; background: url(../images/separator.png) left repeat-x; }
	
/*.ui-loader {
    display: none;
    left: 50%;
    margin-left: -150px;
    margin-top: -35px;
    opacity: 0.85;
    padding: 10px 30px;
    position: absolute;
    width: 260px;
    height:60px;
    z-index: 10;
}*/
.ui-overlay-shadow{
 -moz-box-shadow:0 0 12px rgba(0,0,0,.6);
 -webkit-box-shadow:0 0 12px rgba(0,0,0,.6);
 box-shadow:0 0 12px rgba(0,0,0,.6)
 }
 .ui-shadow{
 -moz-box-shadow:0 1px 4px rgba(0,0,0,.3);
 -webkit-box-shadow:0 1px 4px rgba(0,0,0,.3);
 box-shadow:0 1px 4px rgba(0,0,0,.3)
 }
.ui-body-e{border:1px solid #f7c942;color:#333;text-shadow:0 1px 0 #fff;
 background:#faeb9e;background-image:-moz-linear-gradient(top,#fff,#faeb9e);
 background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(1,#faeb9e));
 -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#faeb9e')"
 }
 
 .ui-corner-all{
 -moz-border-radius:.6em;-webkit-border-radius:.6em;border-radius:.6em
 }	
 .ui-collapsible-set {
    margin: 0.5em 0 0 1.5em;
    width: 88%;
}
.ui-body-c {
    /*background: -moz-linear-gradient(center top , #FFFFFF, #FFFFFF) repeat scroll 0 0 #FFFFFF;*/
	background: #FFFFFF;
	
    }	

ul.navbar{
	
}
.navbar li {
    list-style: none;
     width:125px;
	 line-height:0px;
	 
	
	 }
.navbar li a {
     display: -moz-deck;
   	text-align:center;
	color: #000000;
  /* text-decoration: none;*/ }
.navbar li ul {
    display: none;
  }
.navbar li:hover ul, .navbar li.hover ul {
    display: block;
    position: absolute;
  }
.navbar li:hover li, .navbar li.hover li {
    float: none;
}
.navbar li:hover li a, .navbar li.hover li a {
    background-color: #302F37;
	padding:8px 0px 7px 0px;
    color: #FFFFFF;
    vertical-align:middle; 
	display:block;
}
.navbar li li a:hover {
    background-color: #999999; }

.tbgrid{
	width:95%;
	border:solid 1px #9D9D97;
	margin:auto;
	border-spacing:0;
    border-collapse:collapse;
	
}
.tbgrid td,th{
	padding:9px 5px 9px 5px;
	width:100%;
	
}
.tbgrid tr.alternate td{
	background-color:#EDEDE7;	
}

.tbgrid thead th {
	background:#EDEDE7;
	text-align:left;
} 
.tbgrid tfoot td{
  
}

.displaygrid
{
  border-spacing:0;
  border-collapse:collapse;
}

.displaygrid tr.alternate td {
	   background:#EDEDE7;
   }
   .displaygrid thead th {
	   background:#EDEDE7;
	   padding-right:5px;	   
}	

li.alternate{
	background-color:#EDEDE7;	
}

.menu {
	width:95%;
	margin:auto;
	border:solid 1px black;
	padding:3px 0px 0px 0px;
}
.menu li{
	line-height:38px;
}

.tapbuttons {
	   clear:both;
	   display:block;
   }
.tapbuttons div{
	   float:left;
	   width:50%;
	   display:block;
}

.infoclass {
	padding:0px 5px 0px 5px;
	margin:auto;
	border:solid 1px black;
	width:90%;
}
.infoclass h2{
	margin:0px;
	padding:0px 0px 0px 10px;
	height:30px;	
}
.infoclass div {
	padding:0px 5px 5px 20px;
	margin:auto;
	width:90%;
}
#main_content {
	padding:0px 10px 0px 10px;
}
/*   Override All jquey moile design issues */

.ui-content {
    padding: 0px;
}
.navlist-ui{
	margin-top:10px;
}

.my-dialog-style{
  text-align:center;
  width:250px;
  height:90px;
  padding:0px;
  margin-left: -130px;
  margin-top: -35px;
  z-index: 10;  
}
#mainPage {
   position: absolute;
   top: 1px;
   left: 0;
   right: 0;
   bottom: 0px;
   overflow: scroll;
   -webkit-overflow-scrolling: touch;
}