*
{
margin: 0;
padding: 0;
}
#clear {
clear:both;
}
.transparent_class {
filter:alpha(opacity=10);
-moz-opacity:0.1;
-khtml-opacity: 0.1;
opacity: 0.1;
}
#preloader {
position: absolute;
left: -9999px;
top: -9999px;
}
body {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:normal;
color:#fff;
background-color: #000;
}
h1
{
margin-bottom:5px;
text-align:left;
color:#fff;
font-size: 15px;
}
p {
margin-bottom:8px;
text-align:left;
color:#f29d35;
}
a
{
color: #c69c6c;
}
#wrapper { /* this acts as a main wrapper, or 'container' for all inner divs except the footer on this design, provides a centred container for other divs to fit in*/
margin: 0 auto; /*step 1: set margins to auto*/
width: 1150px; /*step 2: define a width of container which will be centred*/
}
#header { /* this acts as the first element within the wrapper*/
width: 1150px;
height: 200px; /*need a height, as this div has no content, just a pretty background*/
background-image: url(graphics/fwheader.jpg);
background-repeat: no-repeat;
}
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
MAIN NAVIGATION
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
#nav { /* this acts as the second element within the wrapper*/
width: 1150px;
height: 50px; /*need a height, as this div has a little bit of content, but a pretty background 50px high*/
background-image: url(graphics/fwnav.png);
background-repeat: no-repeat;
position:relative; /*might need this later, if we position the menu absolutely within this div*/
}
#mainnav { /* removes the silly buller point from every list item within this list*/
list-style-type:none;
width:850px;
margin:auto;
overflow:hidden;
}
.mainnavitem{ /* every list item with this class gets turned from a block into an inline element, and stop requiring a new line...but with a height of 50px, this
will be useful, as there will be an tag within the li element, which will be turned into a block, which will then expand to fill this 50px*/
display:inline;
height: 50px;
float:left;
}
#mainnav a { /* displays the a tag as a block, to make sure that the tag fully takes up the 50px height of the link image...and removes the silly
underline from the link*/
display:block;
text-decoration:none;
}
#mainnav a span{ /* turns invisible any text within the span tag within an a tag within the mainnav element - which hides the text, allowing it to be
replaced with the background images below.*/
visibility:hidden;
}
#mainnavlink1{
background-image:url(graphics/comp1.png);
width: 217px;
height: 53px;
}
#mainnavlink1:hover, #mainnavlink1.selected{
background-image:url(graphics/comp2.png);
}
#mainnavlink2{
background-image:url(graphics/adv1.png);
width: 217px;
height: 53px;
}
#mainnavlink2:hover, #mainnavlink2.selected{
background-image:url(graphics/adv2.png);
}
#mainnavlink3{
background-image:url(graphics/con1.png);
width: 190px;
height: 53px;
}
#mainnavlink3:hover, #mainnavlink3.selected{
background-image:url(graphics/con2.png);
}
#mainnavlink4{
background-image:url(graphics/links1.png);
width: 180px;
height: 53px;
}
#mainnavlink4:hover, #mainnavlink4.selected{
background-image:url(graphics/links2.png);
}
#maincontent { /* this acts as the third element within the wrapper. needs to be quite wide because of the big background image*/
width: 1150px;
min-height: 200px; /*min-height means the div has to be at least this high, even if empty, but allows for more if it happens*/
background-image: url(graphics/fwmaincontent.png);
background-repeat: no-repeat;
}
#mainpage { /* this is the content area on the index page. Only 900px wide, but centred within it's container, using margin:auto;.*/
width:900px;
margin:auto;
overflow:hidden; /* added this in case you use this as a container for floated children, like in a 2-column layout*/
padding: 20px 0px 20px 0px; /* adds a bit of space between the nav and anything that comes after*/
}
#intro { /* this has no width, so takes up the whole 900px of it's containers, you could float this though and add somehting else like another column*/
background-color:#38130d;
padding:15px;
border: 2px solid #f29d35;
overflow:hidden;
}
.featuredbox {
float:left;
width:140px;
background-color:#38130d;
padding:15px;
border: 2px solid #f29d35;
margin-right:15px;
margin-bottom:15px;
}
.featuredpic {
border: 2px solid #f29d35;
height: 400px;
width: 137px;
margin-bottom:7px;
overflow:hidden;
}
.featuredtext a {
color:white;
text-decoration:none;
}
.dressentrybox {
float:left;
width:170px;
background-color:#38130d;
padding:15px;
border: 2px solid #f29d35;
margin-right:15px;
margin-bottom:15px;
}
.dressentrypic {
border: 2px solid #f29d35;
height: 200px;
width: 160px;
overflow:hidden;
}
.dressentrytext {
margin-top: 10px;
height: 100px;
overflow:hidden;
}
.dressentrytext a {
color:white;
text-decoration:none;
}
.floatsidebar {
float:right;
width:180px;
padding:20px;
background-color: #2b1a12;
border: 2px solid #f29d35;
margin-left:20px;
}
#escortprofileheader {
background-color: #38130d;
border: 2px solid #f29d35;
padding:10px;
}
#escortprofilecol1 {
background-color: #38130d;
border: 2px solid #f29d35;
padding:10px;
float:left;
width:230px;
margin:10px 10px 10px 0px;
height:400px;
}
#escortprofilecol3 {
background-color: #38130d;
border: 2px solid #f29d35;
padding:10px;
float:left;
width:235px;
margin:10px 10px 10px 0px;
height:400px;
}
#escortprofilecol2 {
background-color: #38130d;
border: 2px solid #f29d35;
padding:10px;
float:right;
width:340px;
margin:10px 0px 10px 0px;
height:400px;
}
#escortprofilepics {
background-color: #38130d;
border: 2px solid #f29d35;
padding:10px;
clear:both;
margin: 0px 0px 10px 0px;
}
#escortprofilepics img {
border: 2px solid #f29d35;
margin: 10px 0px 0px 100px;
}
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
FOOTER
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
#footerfullwrap { /* we want a full-width footer on this site with a different color to rest of site....this div is outside the wrapper, and acts like
the body with a full width of 100%, but with a different background which covers the width of the page*/
width:100%; /*so the div stretches the full page*/
min-height: 160px; /*min-height means the div has to be at least this high, even if empty, but allows for more if it happens*/
background-color: #2b1a12;
border-top:2px solid #3a2f2b; /*sets a nice little border on top*/
}
#footercentredwrap { /* this acts like the main wrapper, provides a centred container on the footer for everything that goes inside. Use same color as footer
fullwrap to give the illusion of one full length footer*/
margin:auto;
width:1160px;
background-color: #2b1a12;
}
#footer { /* this acts like header, nav, main content etc....it stays centered within it's wrapper*/
width:900px;
margin:auto;
background-color: #2b1a12;
}
#creditswrap { /* this div acts as a wrapper for the copyright notice which will be floated left, and the designed by which will be floated right,
uses overflow:hidden to make sure floats behave.*/
overflow:hidden;
}
#copyright { /* float the copyright notice as far left as possible within the containing div*/
float:left;
}
#design { /* float the 'designed by' as far right as possible within the containing div*/
float:right;
}
#footercontent { /* sets the margin above and below, creates a bit of space*/
margin-top: 17px;
margin-bottom:25px;
width: 900px;
}
#footernav { /* removes the silly buller point from every list item within this list*/
list-style-type:none;
}
#footernav li{ /* every list item on this div gets turned from a block into an inline element, and stop requiring a new line*/
display:inline;
}
#footer a { /* every a tag within the footer containing div plus it's children divs gets this color*/
}