/*
If you're going to declare anything like a {} or p {}  make sure to declare it 
within your promo's containing div like #wrap a {} or #wrap p {}. If you declare it globally, 
it can mess up the styles for other elements in the surrounding promo shell.

ALSO, if you are going to use background images please specify a complete URL. This is because
your css file may not be called as you expect.

i.e. background: url(/promo-name/img/image-file.ext);
*/

img { border: 0; }

/* No leaderboard ads for promos */
.headerad { visibility: hidden !important }

/* Main Layout Elements */
#promoWrap { background: url(img/bg-sessions.png) top left no-repeat #000; padding: 0; margin: 0; min-height: 620px;}

#left-side { width: 590px; float: left; position: relative; top: 0px; margin: 0; padding: 0; }

#right-side { width: 350px; float: right; position: relative; top: 0px; margin: 0; padding: 0; }

#left-jessie { background: url(img/index-jessiefarrell.png) top left no-repeat; width: 572px; height: 383px; margin: 223px 0 10px 10px; }

#left-justin { background: url(img/index-justinhines.png) top left no-repeat; width: 572px; height: 383px; margin: 223px 0 10px 10px; }

#left-deric { background: url(img/index-dericruttan.png) top left no-repeat; width: 572px; height: 383px; margin: 223px 0 10px 10px; }

#left-gloriana { background: url(img/index-gloriana.png) top left no-repeat; width: 572px; height: 383px; margin: 223px 0 10px 10px; }

#left-higgins { background: url(img/index-higgins.png) top left no-repeat; width: 572px; height: 383px; margin: 223px 0 10px 10px; }

.p1 { width: 350px; position: relative; top: 70px; left: 20px; }
.p2 { width: 525px; position: relative; top: 125px; left: 20px; }

a#button-watch {
	position: relative;
	left: 383px;
	top: -20px;
    background: url(img/button-watch.gif) 0 0 no-repeat;
    display: block;
    height: 28px;
    width: 182px;
}

a#button-watch:hover {
    background-position: 0 -28px;
}

a#button-watch span { display: none; }

#video { background: url(img/box-video.png) top left no-repeat; width: 544px; height: 401px; margin: 203px 0 10px 28px; text-align: center; }

#right-top { background: url(img/box-about.png) top left no-repeat; width: 342px; height: 433px; position: relative; top: 10px; }

#right-top p { color: #FFF; }

.p3 { line-height: 15px; font-size: 13px; width: 300px; height: 120px; position: relative; top: 50px; left: 20px; }

.right-img { position: relative; left: 18px;}

#right-bottom { background: url(img/box-trial.png) top left no-repeat; width: 342px; height: 153px; position: relative; top: 20px; }

#right-bottom p { color: #FFF; width: 300px; position: relative; top: 30px; left: 20px; }

#logo-xm { position: relative; top: 15px; left: 20px; }

a#button-trial {
	position: relative;
	top: 20px;
	left: 25px;
    background: url(img/button-trial.gif) 0 0 no-repeat;
    display: inline-block;
    height: 52px;
    width: 124px;
}

a#button-trial:hover {
    background-position: 0 -52px;
}

a#button-trial span { display: none; }

/* TAG definitions (overriding Main CMT website defs) */
h1 {
    font-size: 2em;
    padding: 4px 0;    
}

p {
	float: none;
	line-height: 13px;
	font-size: 12px;
}

code { display: block; background: #eee; color: #000 }

/* 
Some classes available globally:*/

.left { display: block; float: left; }
.right { display: block; float: right; }
.clear { clear: both; }
.center { text-align: center; }