/* Main stylesheet for Mallary Creative website */

* {margin: 0; padding: 0;} /* Remove default margin and padding settings from all elements */

html {overflow-y: scroll;}

body {text-align: center /* Center the wrapper DIV in earlier versions of IE */ ; background: url(../Graphics/MC-Center-Background.jpg) center top no-repeat #000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.8em; color: #FFF;}

.clear {clear: both; height: 0;} /* Clear floated elements */

/* Headings */
h1, h2, h3, h4 {clear: both; padding-bottom: 1.0em; font-weight: normal; letter-spacing: -0.05em;} /* Headings clear all floated elements */
h1 {text-transform: uppercase; font-size: 1.6em; color: #009EFF;}
h2 {text-transform: uppercase; font-size: 1.4em; color: #FFF;}
h3 {font-size: 1.2em; color: #FFF;}
h4 {font-size: 1.1em; color: #DAA520;}

/* Paragraphs */
p {padding-bottom: 1.6em;}
p.gold {color: #DAA520;}
p.caption {padding: 10px 0 0 0; color: #DAA520;}
p.copyright {padding: 30px 0; text-align: center; font-size: 0.8em; color: #009EFF;}

/* Hyperlinks */
a {color: #DAA520;}

/* Images */
img {border: none;}

/* Lists */
ul {padding-bottom: 1.6em; list-style-type: none;} /* Remove default bullets from all unordered lists */
ul.blueBoxes {padding-bottom: 0.8em;}
ul.blueBoxes li {background: url(../Graphics/Bullet.gif) no-repeat; padding: 0 0 1.0em 26px;}
ul.blueBoxes li a {display: block; color: #FFF;}

/* Wrapper */
div.wrapper {text-align: left /* Align all page content back to the left in IE */ ; margin: 0 auto; width: 960px;}

/* Banner elements */
div.banner {position: relative; padding: 0 10px; height: 100px; font-size: 0.8em;}
div.banner a.logoLink {position: absolute; left: 360px; width: 220px; height: 100px;}
div.banner div.left {float: left; width: 50%;}
div.banner div.right {float: left; width: 50%; text-align: right;}
div.banner p {padding-top: 20px;}
div.banner p a {color: #FFF;}

/* Navigation menu */
ul.navigation {padding: 10px 10px 0 10px;}
ul.navigation li {position: relative; float: left; text-align: center;} /* Position set to relative so any sublinks can be placed below */
ul.navigation li a {display: block; line-height: 60px; width: 188px; text-decoration: none; font-size: 16px; color: #FFF;}
ul.navigation li a:hover {text-decoration: underline; color: #009EFF;}
ul.navigation li a.active {text-decoration: underline; color: #009EFF;}

/* Content panel */
div.content {padding: 20px 40px 30px 40px;}
div.content div.leftColSmall {float: left; padding-right: 40px; width: 240px;}
div.content div.leftColLarge {float: left; padding-right: 40px; width: 480px;}
div.content div.rightColSmall {float: left; width: 360px;}
div.content div.rightColLarge {float: left; width: 600px;}
div.content div.projects {position: relative; height: 280px; background-color: #000;} /* Height can be adjusted in the HTML markup contained in the database table */
div.content div.projects ul.controls {position: absolute; bottom: 0; right: 0; z-index: 100 /* make sure the controls are above the images */ ; padding: 1.0em 0.8em;}
div.content div.projects ul.controls a {text-decoration: none;}
div.content div.projects ul.controls li {float: left; padding: 0 4px; width: 14px; height: 14px; cursor: pointer; background: url(../Graphics/Slideshow-Button-Inactive.gif) top no-repeat;}
div.content div.projects ul.controls li.activeLI {background-image: url(../Graphics/Slideshow-Button-Active.gif);}

/* Forms */
label.required {color: #DAA520;}
input, textarea {padding: 8px; width: 300px; background: url(../Graphics/Form-Gradient.gif) repeat-x; border: 1px solid #004665; font-size: 1.2em; color: #004665;}
input {height: 20px;}
textarea {height: 100px; font-family: Arial, Helvetica, sans-serif;}
button {padding: 5px; background: url(../Graphics/Form-Button.gif) #009EFF repeat-x; border: 1px solid #004665; font-size: 1.2em; font-weight: bold; text-transform: uppercase; color: #FFF;}