/* CSS Document */


/* ////////////////////////////////////// RESET /////////////////////////////////////// */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
html, body {
	height:100%;
}

body {
	line-height: 1;
	color: #333333;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

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



/* /////////////////////////////////////// GLOBAL //////////////////////////////////////// */
 
.clear         { clear:both; }
div.clear	   { clear:both; line-height:0; height:0; border:none; margin:0 !important; padding:0 !important; }
div.clear img  { margin:0 !important; padding:0 !important; border:none !important; }
 
.float-left    { float:left; }
.float-right   { float:right; }
 
.text-left     { text-align:left; }
.text-right    { text-align:right; }
.text-center   { text-align:center; }
.text-justify  { text-align:justify; }
 
.bold          { font-weight:bold; }
.italic        { font-style:italic; }
.underline     { border-bottom:1px solid; }
.highlight     { background:#ffc; }
.caps		   { text-transform:uppercase; }
.light		   { color:#999999; }
 
.img-left      { float:left; margin:4px 18px 6px 0; }
.img-right     { float:right; margin:4px 0 6px 18px; }
 
.nopadding     { padding:0; }
.nomargin	   { margin:0; 	}
.nospace	   { margin:0; padding:0; }
.noindent      { margin-left:0;padding-left:0; }
.nobullet      { list-style:none;list-style-image:none; }
.nounderline   { text-decoration:none !important; }

.width100 	   { width: 100%; }
.width75 	   { width: 75%; }
.width50 	   { width: 50%; }

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



/* ///////////////////////////////////// Typography ////////////////////////////////////// */

body, p, td, li, div, input, textbox {
	font:12px/16px Helvetica, Arial, sans-serif;
	color:#333333;
}

p, li {
	margin:0 0 6px 0; padding: 0;
}

a, a:link, a:visited, a:active {
	color: #268fad; text-decoration: none;
}

a:hover {
	color: #3dc6ed; text-decoration: none;
}

h1, h2, h3, h4, h5 {
	color: #50108c;
}

h1 { font:22px/28px Helvetica, Arial, sans-serif; margin:8px 0 4px 0; }

h2 {  font:18px/22px Helvetica, Arial, sans-serif;  margin:6px 0 3px 0; } 

h3 { font:15px/18px Helvetica, Arial, sans-serif;  margin:4px 0 2px 0; }

h4, h5 { font:13px/16px Helvetica, Arial, sans-serif;   margin:4px 0 2px 0; }

strong { font-weight:  bold; }
em, i { font-style: italic; }

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



/* /////////////////////////////////// Primary Structure /////////////////////////////////// */

body {
	background: #FFFFFF url(/img-new/background_main.png) repeat-x left top;
}

#wrapper {
	margin: 0; padding: 0; width: 100%; min-width:1010px;  min-height: 100%;
	background: transparent url(/img-new/background_squares.png) no-repeat center top;
}

#content {
	margin: 5px auto 0; padding: 0 25px; width: 960px;
}

#header {
	margin: 0; padding: 0; width: 960px; height: 85px;
	background: transparent url(/img-new/header_background.png) no-repeat right top;
}

#feature {
	position: relative; margin: 0; padding: 0; width: 960px; height: 450px;
	background: transparent url(/img-new/feature_shadow.png) no-repeat left 360px;
}

#magmic101 {
	margin: 0 0 20px 0; padding: 0; width: 960px;
}

#toplists {
	margin: 0 0 20px 0; padding: 0; width: 960px;
}

#updates {
	margin: 0 0 20px 0; padding: 0; width: 958px;
	border: 1px solid #c3c3c3;
	-moz-border-radius: 0 0 8px 8px; /* FF1+ */
	-webkit-border-radius: 0 0 8px 8px; /* Saf3+, Chrome */
	border-radius: 0 0 8px 8px; /* Opera 10.5, IE 9 */
}

#footer {
	margin: 50px 0 0 0; padding: 20px 0; width: 100%;
	border-top: 3px solid #5a1c93;
	background-color: #460e7e; /* fallback color */
    background-image: -moz-linear-gradient(100% 100% 90deg, #5b149d, #350a62);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#350a62), to(#5b149d));
}

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



/* ///////////////////////////////// Secondary Structure /////////////////////////////////// */

/* Navigation */

.navigation  {
	margin:0; padding: 0;
}

.navigation li {
	position: relative; float: left; margin: 0 0 0 20px; padding: 0 0 0 20px;
	background: transparent url(/img-new/button_background-left.png) no-repeat left top;
	font-size: 11px; line-height: 11px; font-weight: normal; text-transform: uppercase;
}

.navigation li:first-child {
	margin: 0 0 0 0;
}

.navigation li a {
	display: block; margin: 0; padding: 8px 20px 8px 0;
	background: transparent url(/img-new/button_background-right.png) no-repeat right top;
	font-size: 11px; line-height: 11px; font-weight: normal; text-transform: uppercase; text-decoration: none;  text-align: center;
}

.navigation li:hover {
	opacity: 0.65; /* CSS3 standard */
	-moz-opacity:0.65; /* for older gecko browsers */
	-khtml-opacity: 0.65; /* for older webkit browsers */
}

.navigation li:active {
	opacity: 0.5; /* CSS3 standard */
	-moz-opacity:0.5; /* for older gecko browsers */
	-khtml-opacity: 0.5; /* for older webkit browsers */
}

.navigation li.activeSlide, .navigation li:hover {
	background: transparent url(/img-new/button_background-left-selected.png) no-repeat left top;
}

.navigation li.activeSlide a, .navigation li:hover a {
	background: transparent url(/img-new/button_background-right-selected.png) no-repeat right top;
	color: #FFFFFF !important;
}


/* Sub Nav Drop Down */

.navigation li.drop:hover {
	/* set no background graphic */
	background: #40a8c3 none;
	
	/* reset opacity */
	opacity: 1 !important; /* CSS3 standard */	
	-moz-opacity:1 !important; /* for older gecko browsers */
	-khtml-opacity: 1 !important; /* for older webkit browsers */	
	
	/* round the box */
	-moz-border-radius: 13px 13px 0 0; /* FF1+ */
	-webkit-border-radius: 13px 13px 0 0; /* Saf3+, Chrome */
	border-radius: 13px 13px 0 0; /* Opera 10.5, IE 9 */
	
	/* Add Drop Shadow */
	-moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
	box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
}

.navigation li.drop:hover a {
	background: transparent none;
}

.navigation li.drop a:before {
	content: url(/img-new/drop-arrow.png);
	margin: -1px 4px 0 -6px;
	float: left;
}

.navigation li.drop:hover a:before {
	content: url(/img-new/drop-arrow-white.png);
}

.navigation li.drop .sub *:before {
	content: "" !important;
}


/* Top Nav / Drop */

ul#topnav {
	z-index: 1000;
}

ul#topnav li .sub {
	display: none;  /*--Important--*/
	position: absolute; top: 27px; right: 0; z-index: 9999;
	padding: 0; margin: 0;
	
	/* Add border */
	border: 1px solid #40a8c3;
	border-top-width: 2px;
	background: rgba(255, 255, 255, 0.9) none;
	
	float: left;
	
	/* round the box */
	-moz-border-radius: 0 0 7px 7px; /* FF1+ */
	-webkit-border-radius: 0 0 7px 7px; /* Saf3+, Chrome */
	border-radius: 0 0 7px 7px; /* Opera 10.5, IE 9 */
	
	/* Add Drop Shadow */
	-moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
	box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
}

ul#topnav .sub h2 { /*--Sub nav heading style--*/
	padding: 0 !important;  margin: 15px 20px 5px !important;
	font-size: 15px !important;
	font-weight: normal !important;
	color: #666666 !important;
	text-transform:none;
}

ul#topnav li .sub ul {
	list-style: none;
	margin: 0; padding: 0 0 15px 0;
	width: 175px;
	float: left;
	
}

ul#topnav .sub ul li {
	width: 100%; /*--Override parent list item--*/
	background: transparent none;
	color: #fff;
	text-align: left;
	margin: 0 !important; padding: 0 !important;
}

ul#topnav .sub ul:first-child {
	border-right: 1px solid #d1d1d1; margin-right: -1px;
}

ul#topnav .sub ul li:hover {
	background: transparent none;
}

ul#topnav .sub ul li a {
	float: none;
	height: auto !important;
	background: transparent none;
	padding: 0 !important;
	margin: 5px 20px 5px !important;
	display: block;
	text-decoration: none;
	color: #40a8c3 !important;
	text-align: left;
	text-transform:none;
	font-size: 13px
}

ul#topnav .sub ul li a:hover {
	color: #3dc6ed !important;
	background:transparent none;
}

/*

ul#topnav li .sub ul li a:before {
	content: none !important;
}

ul#topnav li .sub ul li:hover a:before {
	content: none !important;
}
*/


/* Header */

#branding {
	float:left; margin: 0; padding: 0; width: 390px; height: 85px;
}

#branding .logo {
	float: left; margin: 0; padding: 0; width: 180px; height: 85px;  
}

#branding .logo a {
	text-decoration: none; border: none;  
}

#branding .tagline {
	float: left; margin: 0; padding: 33px 0 37px; width: 210px; height: 15px; text-align: center;
}

#header .navigation {
	float:left; margin: 0 30px 0 0; padding: 30px 0 0 0; width: 540px; height: 55px;
}

#header .navigation li {
	float:right; margin: 0 0 0 30px;
}


/* Feature */

#feature #features {
	display:block; margin: 0; padding: 0; width: 960px; height: 360px; overflow: hidden;
}

#feature #features li {
	display:hidden; float: left; margin: 0; padding: 0; width: 960px; height: 360px;
}

#feature #features li:first-child {
	display: block;	
}

#feature #features li a {
	display: block;	margin: 0; padding: 0; width: 960px; height: 360px;
	-moz-border-radius: 0 0 8px 8px; /* FF1+ */
	-webkit-border-radius: 0 0 8px 8px; /* Saf3+, Chrome */
	border-radius: 0 0 8px 8px; /* Opera 10.5, IE 9 */
}


/* Feature Navigation */

#feature .navigation {
	float:left; margin: 0 0 24px; padding: 20px 0; width: 860px; height: 26px;
}

#feature .navigation li a {
	color: #51108d; width: 160px;
}

#feature .navigation li a:hover {
	color: #7a17d6;
}

#feature a.left, #feature a.right {
	margin:20px 12px; padding:0; width: 26px; height: 26px; float: left; text-indent: -9999em;
}


#feature a.left:hover, #feature a.right:hover {
	opacity: 0.65; /* CSS3 standard */
	-moz-opacity:0.65; /* for older gecko browsers */
	-khtml-opacity: 0.65; /* for older webkit browsers */
}

#feature a.left {
	background: transparent url(/img-new/button_left.png) no-repeat;
}

#feature a.right {
	background: transparent url(/img-new/button_right.png) no-repeat;
}


/* Social Widget */

#feature #social {
	position: absolute; top:0; right: 15px; z-index: 100; margin: 0; padding: 20px 35px 35px; height: 290px; width: 170px;
	background: transparent url(/img-new/background_social.png) no-repeat left top;
}

#feature #social h3 {
	margin: 0 0 10px 0; padding: 0;
	font-size: 22px; line-height: 22px;
	color: #FFFFFF;
}

#feature #social li {
	margin:0 0 10px -5px; padding:0; color: #FFFFFF; font-size: 12px; line-height: 18px;
}

#feature #social li a {
	display: block; margin: 0; padding: 15px 0 15px 50px;	color: #FFFFFF; font-size: 13px; line-height: 18px;
}

#feature #social li a:hover {

	opacity: 0.65; /* CSS3 standard */
	-moz-opacity:0.65; /* for older gecko browsers */
	-khtml-opacity: 0.65; /* for older webkit browsers */
}

#feature #social li a.twitter {	background: transparent url(/img-new/social_Twitter.png) no-repeat; }
#feature #social li a.facebook {	background: transparent url(/img-new/social_Facebook.png) no-repeat; }
#feature #social li a.youtube {	background: transparent url(/img-new/social_YouTube.png) no-repeat; }
#feature #social li a.email {	background: transparent url(/img-new/social_Email.png) no-repeat; }


/* Magmic 101 */

#magmic101 h2 {
	display: block; margin: 0 0 5px 0; padding: 0; width: 958px; text-align: center;
}

#magmic101 #sections {
	margin: 0; padding: 0; width: 958px; border: 1px solid #c3c3c3;
	background: transparent url(/img-new/divider-arrow.png) no-repeat center top;
	-moz-border-radius: 8px 8px 0 0; /* FF1+ */
	-webkit-border-radius: 8px 8px 0 0; /* Saf3+, Chrome */
	border-radius: 8px 8px 0 0; /* Opera 10.5, IE 9 */
}

#magmic101 #sections .section {
	float:left; margin: 0; padding: 25px 20px 12px; width: 279px;
}

#magmic101 #sections h3 {
	margin: 0; padding: 0; color: #268fad;
}



/* Top X Lists */

#toplists div.list {
	float: left; margin: 0 0 0 20px; padding: 0; width: 223px; border: 1px solid #c3c3c3; 
}

#toplists div.list:first-child {
	margin: 0 0 0 0; 
}

div.list h4 {
	margin: 0; padding: 7px 15px; 
	font-size: 13px; line-height: 13px;
	background-color: #51108d;
	color: #FFFFFF;
}

div.list ol {
	margin: 10px 15px; padding: 0;
	list-style-type: decimal;
	list-style-position: inside;
}

div.list ul {
	margin: 10px 15px; padding: 0;
	list-style-type: none;
}


/* News & Updates */

#updates #newsfeed {
	float: left; margin: 0; padding: 0; width: 240px;
}

#updates #socialfeed {
	float: left; margin: 0; padding: 0; width: 718px;
}

#updates h4 {
	margin: 0; padding: 12px 15px; 
}



/* News */

li.newsitem {
	border-bottom: 1px solid #C3C3C3;
}

.newsitem, .newsitem a {
	font-size: 11px; line-height: 15px;
	padding:4px 0 8px;
}

.newsitem .date {
	color:#999999;
}

a.morelink {
	font-size: 12px; font-weight: bold; display: block; margin: 15px 0;
}


/* Social */

#socialfeed ul.tweets {
	margin-right:-5px;
	margin-top: 15px;
	margin-bottom: 0;
}

#socialfeed li.tweet {
	float: left; margin: 0 15px 25px 0; padding: 0; width: 220px;
}

#socialfeed li.tweet div.txt {
	position:relative; margin: 0; padding:11px 15px 20px; width: 190px; height: 83px;
	background: #268fad;
	-moz-border-radius: 8px; /* FF1+ */
	-webkit-border-radius: 8px; /* Saf3+, Chrome */
	border-radius: 8px; /* Opera 10.5, IE 9 */
	-moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
	box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);	
}

#socialfeed li.tweet div.txt:after {
	content:"\00a0";
	display:block; /* reduce the damage in FF3.0 */
	position:absolute;
	bottom:-40px; /* value = - border-top-width - border-bottom-width */
	right:25px; /* controls horizontal position */
	width:0;
	height:0;
	border-width:20px 20px 20px 0; /* vary these values to change the angle of the vertex */
	border-style:solid;
	border-color:#268fad transparent transparent; 
}

li.tweet div.txt, li.tweet div.txt a {
	font-size: 13px; line-height: 18px; color: #FFFFFF;
	word-wrap:break-word;
}

li.tweet div.txt a {
	text-decoration: underline;
}

li.tweet div.txt a:hover {
	color: #a8d2de;
}

li.tweet div.by {
	font-size:11px;
	line-height:13px;
	padding:6px 15px;
}

li.tweet div.by {
	padding:6px 15px 0; font-size:11px;	line-height:13px; color:#999999;
}


/* Footer */

#footer .links {
	margin: 10px auto 30px auto; padding: 0; width: 100%; text-align: center;
	color: #ebc1ff;
}

#footer .links a {
	color: #FFFFFF;
}

#footer .links a:hover {

	opacity: 0.65; /* CSS3 standard */
	-moz-opacity:0.65; /* for older gecko browsers */
	-khtml-opacity: 0.65; /* for older webkit browsers */
}

#footer .copyright {
	margin: 0 auto 20px auto; padding: 0; width: 100%; text-align: center;
	color: #ebc1ff;
}