body
{
 margin: 0px;
 width: 100%;
 height: 100%;
 
}

div#page_layout
{
 min-height:100%;
 position :relative;

}


div#header
{
    
    background-image: url('/images/back1.png');
    width:100%;
    height: 30px;
    text-align: center;
    top: 0;
    left: 0;
    position:fixed;
    z-index:2;
    margin:  0 0 30px 0;
}


div#header p
{
    margin: 0;
    font-family: Arial;
    font-size: large;
    color: #FF9900;
    font-weight: bold;
    float:left;
    margin: 0 0 0 30px;
}

div#header ul li
{
display: inline;
list-style-type:none;
}


div#header li a
{
    float: right;
    padding: 0 0 0 10px;
    text-decoration: none;
    color: #FFCC66;
    font-size: smaller;
    font-family: Arial;
    font-weight: normal;
}



div#content_all_pages
{
    padding-top:30px;     /*Tnis is equal to header height. this is needed as header is fixed. and if fixed header is used
                            then the content section starts from top of page and 30px of it hides under the header*/
    width : 100%; 		/*other format parameter are in respective form files contant-form-div element*/
	
}

div#content_form_page
{
    padding-top:30px;     /*Tnis is equal to header height. this is needed as header is fixed. and if fixed header is used
                            then the content section starts from top of page and 30px of it hides under the header*/
	width: 30%;		/*other format parameter are in respective form files contant-form-div element*/

}


div#empty_space0, div#empty_space1, div#empty_space2, div#empty_space3
{
 height: 50px;
 width: 100%;
 position: static;
 background-color: white;    
}



div#footer
{   margin:0px;
    background-size:100%;
    background: #666666;
    width: 100%;
    height: auto;
    position:relative;
    bottom: 0;
    left: 0;
    padding-bottom: 10px;       /*  makes footer stay away from copyright */
    padding-top:    5px;        /*makes top of footer away from content  */    
}

.products, .softwares
{
  width:90%;            /* this is less than 100% because 100% causes the links to cover the whole div width when browser resizes */
  padding:0 0 0 0%;
  position:relative;
  margin: 0 7% 0 7%;
}


.products li, .softwares li
{
display: inline;
list-style-type:none;
}

.products li a, .softwares li a
{
    padding:0 0 0 0%;
    text-decoration: none;
    color: #CCCCCC;
    font-size:smaller; 
 }


div#copyright
{
    background-color: #272709;
    font-family: 'Arial Narrow';
    font-size: small;
    font-weight: bold;
    text-align: center;
    width: 100%;
    height: auto;
    color: #FFFFFF;
    position:relative;
    float:left;
  
}



@media only screen and (max-width: 768px)   /* if the browser is resized below 768px then hide the menu  (we can add any element here)*/
{
  div#header p {margin: 0 0 0 5px;} 
  div#content_form_page {width: 70%;} 	/*this is only used in registration, contact and warrenty forms*/
}

@media only screen and (max-width: 480px)   /* if the browser is resized below 500px then hide the menu  (we can add any element here)*/
{
  div#header li a {font-size: x-small; padding: 0 0 0 10px;}
  div#header p {margin: 0 0 0 5px;} 
  div#content_form_page {width: 95%;} /*this is only used in registration, contact and warrenty forms*/
 
}

@media only screen and (max-width: 300px)   /* if the browser is resized below 500px then hide the menu  (we can add any element here)*/
{
  div#header ul  {display:none;}
}