/* ------ Section 1 - Global Body, Font and Link Settings ------ */


body {
background: url(../image-files/mosaico.gif) top left repeat;
margin: 0;
padding-top: 200px;
padding-bottom: 50px;
color: #4b0049;
font-family: 'Century Gothic', Ecofont, Calibri, Verdana, Arial, sans-serif;
font-size: 80%;
}

/* -- General Link Styling -- */

a:link {
color: #a101a6;
}

a:visited {
color: #510fad;
} 

a:focus {
color: #d7bcb8;
}

a:hover, a:active {
color: white;
background-color: #7375d8;
}


/* ------ Section 2 - Global Page Structure ------- */

#PageWrapper {
width: 926px;
position: relative;
}

#Header {
height: 356px;
position: relative;
top: -200px;
z-index: 1;
}

#ContentWrapper {
float: left;
width: 100%;
}

#ContentColumn {
margin: 0 0 0 480px;
width: 380px;
}

#NavColumn {
background: url(../image-files/vertical-line.gif) top right repeat-y;
float: left;
width: 170px;
margin-left: -855px;
}

#ExtraColumn {
float: left;
width: 180px;
margin-left: -670px;
}

#ContentWrapper, #NavColumn, #ExtraColumn {
position: relative;
z-index: 10;
margin-top: -320px;
}

#Footer {
clear: both;
width: 100%;
text-align: center;
padding: 8px 0;
position: relative;
z-index: 1;
bottom: -20px;
}

.Liner {
padding: 10px 10px;
}

#Footer .Liner {
margin: 0 0 50px 480px;
padding: 0;
width:380px;
}



/* ------ Section 3 - Page Structure Details ----*/

#PageWrapper {
margin: 0 auto;
background: url(../image-files/background.gif) top right repeat-y;
}

#Header {
background: url(../image-files/header-image.gif) top right no-repeat;
}

#Logo {
background: url(../image-files/alc-unlimited-logo.gif) no-repeat scroll 35px 30px;
height: 120px;
width: 360px; 
}

#Footer {
background:url(../image-files/footer-background.gif) bottom right no-repeat;
}



/* ------ Section 4 - Left Column Navigation ------ */

/* --- Nav List ---- */

#NavColumn .Liner {
padding-top:20px;
background: url(../image-files/contents-word.gif) top center no-repeat;
}

.Navigation ul {
list-style-type: none;
position:relative;
top:-30px;
margin:0;
padding:20px 0 0 0;
margin-bottom:-30px;
}

.Navigation li {
padding: 0;
margin: 0 0 3px 0;
background: url(../image-files/decoration-menu.gif) top left no-repeat;
}

.Navigation li,
.Navigation h3 {
padding-left: 13px;
}



/* ------ Section 5 - Additional Navigation ------ */

/* Thumbnail-with-Caption Navigation  */

.ThumbnailLink {
text-align: center;
}

.ThumbnailLink a {
text-decoration: none;
}

.ThumbnailLink .Caption {
text-decoration: underline;
color: #510fad;
}


/* --- Horizontal Text NavBar ---- */

.ExtraNav {
margin: 0px auto 0px auto;
font-family: Baskerville, times, serif;
width: 380px;           /* same width as the width of the center column */
text-align: center;
}

.ExtraNav ul {
list-style-type: none;
line-height:1.7em;
}
.ExtraNav a {
white-space:nowrap;
}

.ExtraNav ul li {
display: inline;
text-align: center;
}

.ExtraNav a {
padding: 0 4px;
}

#Footer .ExtraNav a {
text-align: center;  
}

#Footer .ExtraNav ul {
padding: 0 10px 0 0;
text-align: center;
}

#Header .ExtraNav ul {
position:absolute;
top:110px;
right:25px;
width:380px;
text-align:center;
font-size:13.6px; /* don't want this text to resize */
line-height:14px;
margin:0;
padding:0;
}

#Header .ExtraNav ul a {
white-space:nowrap;
}



/* ------ Section 6 - Specific Font Styles ------ */

#Footer {
font-size: 85%;
}

h1 {
font-size:200%;
}

h1, h2, h3, h4, h5, h6 {
font-family: Baskerville, times, serif;
clear: both;
font-weight: normal;
}

h1, h2 {
padding-bottom: 20px;
margin-bottom: -10px;
}

h2, h3, h4, h5, h6 {
margin-top: 24px;
}

.Caption {
font-size: 85%;
font-weight: bold;
display: block;
text-align: center;
}

.Discount {
color: red;
}

hr {
border: 1px dashed #4b0049;
}


/* ----- Section 7 - Boxes ----- */

.CalloutBox {
background-color: #765E42;
width: 85%;
margin: 18px auto 24px auto;
padding: 4px;
color:#fff;
letter-spacing:0.07em;
}

div.CalloutBox p {
margin: 13px;
}

p.CalloutBox {
padding: 13px;
}

div.CalloutBox h1 {
margin: 0;
}

.ReminderBox {           /* the container box */
color: #4D4D4D;
width: 50%;
border: 4px solid #765E42;
margin: 0 20px 12px 18px;
float: right;            /* adding float enables text to flow around it */
}

.ReminderBox h4 {
margin: 0;
padding: 2px;
text-align: center;
}

.ReminderBox p {
padding:0;
margin:10px;
}

.AdSenseBoxLeft, .AdSenseBoxRight, .AdSenseBoxCenter468, .AdSenseBoxExtraColumn {
padding: 5px;
}

.AdSenseBoxLeft {
margin: 0 18px 12px 0;
float: left;
}

.AdSenseBoxRight {
margin: 0 0 12px 18px;
float: right;
}

.AdSenseBoxCenter468 {
width: 468px;
margin: 0 auto 12px auto;
clear: both;
}

.AdSenseBoxExtraColumn {
padding: 0;
margin: 0 auto 12px auto;
clear: both;
}

.SocialBox {
border-top: 1px dashed #4b0049;
border-bottom: 1px dashed #4b0049;
margin: 40px auto 12px;
padding: 15px 100px 2px 0;
}


/* --- RSS Box ---- */

#RSSbox {
width: 145px;
margin: 8px auto 10px 3px;
padding: 2px 2px 10px 2px;
font-weight: bold;
text-align: center;
}

/* --- Pattern Table --- */
#patterns  {
width: 100%;
border: 1px solid #510fad;
border-spacing: 0;
border-collapse: collapse;
}

#patterns th {
width: 100%;
text-align: center;
border: 1px solid #510fad;
border-spacing: 0;
border-collapse: collapse;
padding: 2px 5px;
background-color: #87cefa; 
font-size: 1.5em;
}

#patterns td {
text-align: left;
border: 1px solid #510fad;
border-spacing: 0;
border-collapse: collapse;
padding: 2px 5px;
}

#patterns .discountpack {
background-color: #bce4fc; 
font-size: 1em;
}


/* ----- Section 8 - Frequently Used Styles ----- */


.Clear {
clear: both;
}

img {
border: 0 solid #DDD;
}

/* -- lists -- */

#ContentColumn ul {
list-style-type: none;
margin: 0 0 8px 10px;
}

#ContentColumn ol {
list-style-type: decimal;
margin: 0 0 8px 0;
}

#ContentColumn li {
margin: 0 0 8px 5px;
}

/* -- floats -- */

.ItemRight {
float: right;
margin: 2px 0 12px 18px;
text-align: center;
}

.ItemCenter {
margin: 2px auto 12px auto;
text-align: center;
clear: both;
}

.ItemLeft {
float: left;
margin: 2px 18px 12px 0;
text-align: center;
}

.Center { 
text-align: center;
}


/* -- website list external links -- */
.websitelist li {
padding: 0 0 5px 0;
}

a.sitelist:link {
color: #3c5eff; 
text-decoration: underline;
background: url(../image-files/check-empty.gif) -1px 0 no-repeat;
padding: 0 0 5px 15px;
} 

a.sitelist:visited  {
color: #3c5eff; 
text-decoration: underline;
background: url(../image-files/check-visited.gif) -1px 0 no-repeat;
padding: 0 0 5px 15px;
}

a.sitelist:focus {
color: #510fad; 
background-color: #ffef85; 
text-decoration: underline;
background: url(../image-files/check-empty.gif) -1px 0 no-repeat;
padding: 0 0 5px 15px;
}

a.sitelist:hover, a.external:active {
color: #510fad; 
text-decoration: underline;
background: url(../image-files/check-visited.gif) -1px 0 no-repeat;
padding: 0 0 5px 15px;
}

#NavColumn, .Navigation, .ExtraNav, .SocialBox {
display: none;
}

/* -- Print Special -- */
a:after {
content: "(" attr(href) ")"; /*prints URL*/
}

abbr:after {
   content: "(" attr(title) ")"; /*prints abbr*/
}