/***********************************************************************************************************
@author: Parris Khachi, Parris Studios
@version: 1.0 Final
Description: The class handles colors, layout, and fonts for Mirage Custom Framing,
This page is divided into a few sections.

TABLE OF CONTENTS:
Basic Tags and Borders: -wrapping
Header Styles: -header
Logo Styles: -branding
Menu Styles: -menu
Scroll Bar Styles: -scroll bar
Content Styles: -content
Form Styles: -form

LEGAL RIGHTS:
It is unauthorized to copy all or part of this code. It is required that this documentation
be kept. You are free to modify the following lines; however, credit must be retained by 
Parris Khachi and Parris Studios. You may also place yourself as an author if you modify
the code below substaintially. If you wish to use some of this code on another website 
permission must first be gained from Parris Studios. These lines are owned by
Parris Studios and may not be reproduced or distributed. These lines are hereby licensed to
Mirage Custom Framing. Please keep this code well documented
*************************************************************************************************************/

/* Basic Tags and Borders, the following styles govern the borders of the content and basic tags: -wrapping */
body {
background:url('../Webdesign/background_gradient.jpg');
background-repeat:repeat-x;
background-color:#5E362C; /* the brownish background color */
margin: 0 0 0 0;
padding: 0;
text-align: center; /* for IE5.x/Win */
vertical-align:middle;
}

#wrapper {
padding: 50px 0;
width: 828px; /* width and height of the page based on the design */
height: 558px;
position:relative; /* required for the borders to stay aligned */
margin: auto auto;
text-align: left; /* for IE5.x/Win */
}

#border-top {
background-image: url('../Webdesign/MIRAGE services1_r2_c2.jpg'); 
/* top border image */
background-position:top left;
background-repeat:no-repeat; /* required for the borders to stay aligned */
position:relative;
width: 828px;
height: 20px;
}

#border-left {
background-image: url('../Webdesign/MIRAGE services1_r3_c2.jpg');
/* left border image */
background-position:top left;
background-repeat:repeat-y; 
position:relative; /* required for the borders to stay aligned */
width: 828px;
height: 538px; /* width minus the size of the top border which ends before the
rest of the borders are called */
}

#border-right {
background-image: url('../Webdesign/MIRAGE services1_r3_c18.jpg');
/* right border image */
background-position:top right;
background-repeat:repeat-y;
position:relative; /* required for the borders to stay aligned */
width: 828px;
height: 538px;
}

#border-bottom {
background-image: url('../Webdesign/MIRAGE services1_r10_c3.jpg');
/* bottom border image */
background-position:bottom right;
background-repeat:no-repeat;
position:relative; /* required for the borders to stay aligned */
width: 828px;
height: 20px;
}

/**********************************************************************/


/* Header Styles, the following govern some basic header styles: -header */
#header {
background-color: #CDB29F; /* creamy beigish color behind the header */
background-image: url('../Webdesign/header_bottom_border.jpg');
background-repeat:no-repeat;
background-position:bottom;
width: 788px;
height: 116px;
margin-left:20px;
margin-right:20px; /* margin because of borders */
text-align:center; /* horizontal centering IE */
position:relative;
}

#inner-header {
background-image:url('../Webdesign/inner_header_back.jpg');
/* this is a color with a faded bottom into a different color */
background-repeat:repeat-x;
background-position:top;
background-color:#FFFFFF;
text-align:left;
width: 758px;
height: 63px;
position:relative;
margin: 0 auto; /* horizontal centering firefox */
}

/**********************************************************************/



/* Logo Styles: -branding ********************************************/
#logo{
background: url(../Webdesign/logo.jpg) no-repeat; /* used as a background to maintain
perfect height in IE */
width:245px;
height:63px;
margin:0 0 0 0;
padding:0 0 0 0;
line-height:63px; /* other things to keep specficity, probably not needed*/
position:relative;
float:left;
}
/********************************************************************/


/* Menu Styles: -menu **********************************************/
#menu-container{
width: 365px;
height: 20px;
position:relative;
float:right;
padding-top:41px;
}

ul{
margin: 0;
padding: 0;
list-style:none;
}

ul li{
float: left;
background-color:#ffffff;
position:relative;
line-height:20px;
}

li a:link, li a:visited{
text-decoration:none;
color: #A88E7B;
background-color:#ffffff;
padding: 0 12px;
float:left;
position:relative;
line-height:20px;

font-family:Georgia, "Times New Roman", Times, serif;
font-variant:small-caps;
text-transform:capitalize;
font-size:14px;
font-weight:200;
}

li a:hover, li a:active{
text-decoration:none;
color: #C0AEA0;
background-color:#EADED2;
padding: 0 12px;
float:left;
position:relative;
line-height:20px;

font-family:Georgia, "Times New Roman", Times, serif;
font-variant:small-caps;
text-transform:capitalize;
font-size:14px;
font-weight:200;
}

#sub-menu {
font-family:Georgia, "Times New Roman", Times, serif;
font-variant:small-caps;
text-transform:capitalize;
font-size:11px;
font-weight:200;
float:right;
padding-right: 20px;
padding-top:5px;
padding-bottom:5px;
text-align:left;
width:auto;
line-height:12px;
height:12px;
}

h4{
float:left;
text-align:left;
display:block;
text-decoration:none;
font-family:Georgia, "Times New Roman", Times, serif;
font-variant:small-caps;
text-transform:capitalize;
font-size:11px;
font-weight:200;
color:#333333;
padding:0 3px;
margin:0;
}

h4 a:link, h4 a:visited{
display:block;
text-decoration:none;
font-family:Georgia, "Times New Roman", Times, serif;
font-variant:small-caps;
text-transform:capitalize;
font-size:11px;
font-weight:200;
color:#ffffff;
}

h4 a:hover, h4 a:active{
display:block;
text-decoration:none;
font-family:Georgia, "Times New Roman", Times, serif;
font-variant:small-caps;
text-transform:capitalize;
font-size:11px;
font-weight:200;
color:#333333;
}


/********************************************************************/





/* Scroll Bar Styles -scrollbar **********************************

Deprecated**

.scroll-track{
height:10px;
width:10px;
background:black;
}

.scroll-handle{
border: 1px solid black;
height:10px;
width:10px;
background:#5B207B;
cursor:pointer;
}

*******************************************************************/




/* Content Styles: -content *****************************************/
#content{
margin-left:20px;
width:788px;
height:411px;
background:#32231E;
}

#image-column{
width:389px;
height:411px;
}

#full-column{
width:788px;
height:411px;
}

#text-column{
width:399px;
height:411px;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
color:#65524B;
background-color:#DFCFC0;
font-weight:lighter;
}

#inner-text{
padding-left:25px;
padding-right:20px;
padding-top:20px;
padding-bottom:15px;
}

#scrollable-text{
border-spacing:5px;
border-width:thin;
border-style:solid;
border-color:#C4A98E;
overflow:hidden; 
height:300px; 
width:330px;
float:left;
padding-left:10px;
padding-right:10px;
padding-top:0px;
padding-bottom:5px;
line-height:22px;
}

a:link, a:visited{
text-decoration:underline;
font-weight:lighter;
color:#65524B;
}

a:hover, a:active{
text-decoration:underline;
font-weight:500;
color:#CDB29F;
}

h3 {
font-size:16px;
text-transform:uppercase;
font-weight:lighter;
font-family:Georgia, "Times New Roman", Times, serif;
float:left;
}

h5 {
float:left;
font-size:12px;
line-height:16px;
text-transform:uppercase;
font-weight:lighter;
font-family:Georgia, "Times New Roman", Times, serif;
}
/********************************************************************/


/* Form Styles -form */
input {
border-spacing:5px;
border-width:thin;
border-style:solid;
border-color:#C4A98E;
font-family:Georgia, "Times New Roman", Times, serif;
}

textarea {
border-spacing:5px;
border-width:thin;
border-style:solid;
border-color:#C4A98E;
font-family:Georgia, "Times New Roman", Times, serif;
}

.altButtonFormat {
border-spacing:5px;
border-width:thin;
border-style:solid;
border-color:#C4A98E;
font-family:Georgia, "Times New Roman", Times, serif;
color: #65524B;
}

.altTextField {
border-spacing:5px;
border-width:thin;
border-style:solid;
border-color:#C4A98E;
font-family:Georgia, "Times New Roman", Times, serif;
} 

/**************/

/* Footer -footer */
#footer{
padding-top:10px;
padding-right:5px;
padding-left:5px;
width:828px;
height:15px;
font-family:Verdana,Arial;
font-size:8px;
color:#CDB29F;
font-weight:lighter;
}
#footer_left{
float:left;
}
#footer_right{
float:right;
}

/**************/

/* end css styles */