html {
background-color:#999999;
height:100%;
}
#bg{
position:absolute;
z-index:1;
top:0;
left:50%;
margin-left:-505px;
width:1010px;
height:900px;}
body {
font-family: "Gill Sans", "Lucida Grande", Helvetica, sans-serif;
font-weight: normal;
line-height: 1.5em;
color: #000000;
height:100%;
width:100%;
margin:0;
}
/*Using it for My Orange Titles on pages*/
h1{
text-align:center;
text-indent:0px;
font-weight: normal;
font-size: 20px;
color: #ffa500;
}
h2 {
text-align:justify;
text-indent:20px;
font-weight: normal;
font-size: 18px;
}
/*this CSS style is for my info on the Contact US page. I don't use it anywhere else */
h3{
text-align:center;
font-size: 16px;
color: #000000;
font-weight: bold;
}
p {
text-indent:20px;
text-align:justify;
font-size: 16px;
padding-top:0px;
}
hr { display: none; }
/** LOGO Part goe here*/
#logo {
position:relative;
width:900px;
border:1px orange;
background-image:url('../images/logopng.png');
background-repeat:repeat-x;
margin-left:auto;
margin-right:auto;
margin-top:8px;
height: 230px;
}
#wrapper {
position:relative;
z-index:10;
width:910px;
height:auto;
margin-left:auto;
margin-right:auto;
margin-top:10px;
margin-bottom:40px;
padding:5px;
border: 1px solid;
}
/*Menu. Menu goes here*/
/*Menu 1. that's just a frst level menu*/
#menu{/*PLZ. do not modify. Completely done.*/
z-index:11;
white-space:nowrap;/*doesn't allow to use multiline text in menus*/
width:900px;/*100% if you want it to take the entire space.*/
position:relative;/*so we can center div horizontally*/
height:auto;/*automatically adjusts height to fit ul.*/
margin:0 auto 0 auto;/*removing margins and centering menu in containing div*/
padding:0;/*removing paddings from all sides of menu*/
background-color:orange;
}
#menu ul{
height:auto;
list-style-type:none;/*removing bullets*/
margin:0;/*removing margins from all sides of ul*/
padding:0;/*removing paddings from all sides of ul*/
height:auto;/*so it would automatically fit into containing div*/
width:100%;/*stretching ul to the entire containing div's width*/
}
#menu ul li {
position:relative;/*lines up[ all the menu icons horizontlly*/
float:left;/*lines up[ all the menu icons horizontlly*/
background-color:black;
color:orange;
width:150px;/*cuz we have 6 li elemts. */
cursor:pointer;/*shows different pointer when li is hovered over*/
}
#menu a{
padding:0px 5px 0px 15px;
display: block;/*this way we can click anyway in the div instead of just */
font-size:small;/*duh. self explanatory*/
text-transform:uppercase;/*self explanatory*/
}
#menu a:hover {
background-color:orange;/*changing backgrouynd color*/
color:black;/*changing font color*/
}
#menu a.clicked{
background-color:orange;/*changing backgrouynd color*/
color:black;/*changing font color*/
}
/*Menu 2. that's a second level menu. ie drop down menu.*/
#menu ul ul {
position: absolute;/*this way second level menu is taken out of context and placed below*/
width:250px;/*we make ul's width 100%. can set it to whatever u wnat.*/
left:0px;/*left border is the same as conteining div's*/
top: 100%;/*menu start's just below it's conteiner*/
display: none;/*second level is hidden by default*/
}
#menu ul ul li{
width:100%;
}
#menu ul li:hover ul{
display:block;
}
/*End Menu navigation*/
/* Page Div. Includes sidebar and content */
#page {
position:relative;
width: 900px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
}
/* Content*/
#content {
float: right;
width: 600px;
height:600px;
border: 1px solid;
margin-top:5px;
padding: 5px 10px 5px 10px;
overflow:hidden;
background:transparent url('../images/transparent.png');
background-repeat:repeat;
}
/*End content*/
/*Sidebar.*/
#sidebar {
float: left;
border: 1px solid;
width: 250px;
margin-top:5px;
padding: 5px 10px 5px 10px;
height: 230px;
overflow:hidden;
background:transparent url('../images/transparent.png');
background-repeat:repeat;
}
#sidebar img{
cursor:pointer;
}
/*End Sidebar*/
/*testimonialsbar.*/
#testimonialsbar {
float: left;
width: 250px;
height: 353px;
border: 1px solid;
overflow:hidden;
margin-top:5px;
padding: 5px 10px 5px 10px;
background:transparent url('../images/transparent.png');
background-repeat:repeat;
}
/*End testimonialsbar*/
/* Footer Div START */
#footer{
margin-left:auto;
margin-right:auto;
color:orange;
font-size:12px;
font-weight:bold;
word-spacing:5px;
width:900px;
height:25px;
}
#footerleft{
float:left;
width:500px;
text-align:left;
color:white;
}
#footerright{
float:right;
width:300px;
text-align:right;
color:white;
}
/*End Footer Div.*/
/*===================Transparency===================*/
#transparent {
background:#fff none;
filter:alpha(opacity=50);
height:1%;
}
#transparent * {
filter:alpha(opacity=100);
position:relative;
}
/*===================Center div===================*/
#cntr {
text-align:center;
margin:5px;
}
/*===============mail contact form=========*/
#mailcontactbox
{
position:absolute;
z-index:5000;
top:300px;
left: 50%;
width: 350px;
height:auto;
margin-left: 110px;
}
#mailcontactform
{
display:none;
height:auto;
width:100%;
background-color:black;
}
#mailcontactform fieldset
{
padding:10px;
border-style:none;
}
#mailcontactform label
{
display:block;
color:orange;
}
#mailcontactform input[type=text]
{
display:block;
border:solid 1px black;
width:100%;
margin-bottom:10px;
height:24px;
}
#mailcontactform textarea
{
display:block;
border:solid 1px black;
width:100%;
margin-bottom:10px;
}
#mailcontactform input[type=submit]
{
background-color:orange;
border:solid 1px black;
color:black;
padding:5px;
}
#mailcontactlink
{
top:240px;
left: 50%;
margin-left: 410px;
height:124px;
width:100px;
z-index:5000;
position:absolute;
display:block;
float:right;
vertical-align: middle;
cursor:pointer;
}
#mailcontactlink p{
padding:0;
margin:0;
padding-left:40px;
}
#mailcontactlink img{
position:relative;
float:left;
padding:2px 0px 0px 10px;
padding-left:10px;
}
/*===============Changing testimonials=========*/
#singletestimonial{
cursor:pointer;
}
#testimonialslist
{
width:100%;
height:auto;
margin:0;
padding:0;
display:none;
}
#testimonialslist ul{
padding:0;
margin:0;
list-style-type:none;
list-style:none;
}