/* ------ NOTES ---------------------------------------------------------------

CSS for "The Audio Quran by StrapMedia".

--------- UPDATE INFO ---------------------------------------------------------

Last updated: 23 Janvier 2009
Last update made by: Micka

--------- CONTENTS ------------------------------------------------------------

1: BODY
2: NAVIGATION
3: PAGE
	a) Contianers
	b) Header
	c) Main content
	d) Footer
4: STYLES
5: LIST
6: TEXT
	a) Links
	b) Typography
7: MISC
	
---------------------------------------------------------------------------- */




/* 1: BODY
============================================================================ */

body {
	margin: 0px;
	padding: 0px;
	background: #FAFAFA;
	color: #555;
	font: 12px/160% Verdana, Arial, 'Bitstream Vera Sans', sans-serif;
/*	text-align: center; */
	}

/* Reset margin and padding for all elements */

* {margin: 0; padding: 0;}


/* 2: NAVIGATION
============================================================================ */

#topnav {
	list-style: none;
	float: right;
	margin: 6px -6px 0 0;
	text-align: right;
	}
#topnav li {padding: 0 16px 1px;}
#topnav li.active {
	background: url(/img/menuindicator.png) right 70% no-repeat;
	font-weight: bold;
	}
#topnav a:link, #topnav a:visited {
	margin-top: 11px;
	padding: 1px 0;
	border-bottom: 1px solid #666;
	color: #fff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	}
#topnav li.active a:link, #topnav li.active a:visited {
	color: #fff;
	border: none;
	}
#topnav a:hover {
	border-bottom: 1px solid #fff;
	background: none;
	color: #fff;
	}

ul#loggedout-nav {
	list-style: none;
	float: right;
	margin: 37px 0 34px;
	padding: 3px 0;
	text-align: right;
	}
ul#loggedout-nav li {
	display: inline;
	margin: 0 5px;
	color: #697987;
	font-size: 17px;
	font-weight: bold;
	text-shadow: 0 -1px 0 #12171a;
	}
ul#loggedout-nav li a {
	margin: 0;
	padding: 0;
	color: #fff;
	border: none;
	background: none;
	text-decoration: none;
	}
ul#loggedout-nav li a:hover {color: #bde562}

ul#logos {
	list-style: none;
	float: none;
	margin: 20px 0 15px 0;
	text-align: center;
	}
ul#logos li {
	display: inline;
	margin: 0 10px 0 10px;
	}
ul#logos li a {
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	text-decoration: none;
	}


/* 3: PAGE
============================================================================ */

/* a) Containers */

#container {float: left; width: 100%; background: #fff;}

.wrapper, #main-wrapper {width: 730px; margin: 0 auto; text-align: justify;}
#main-wrapper {width: 716px;}

#content {float: left; width: 100%; padding: 0 0 20px; background: #fff;}

/* b) Header */

#logo {
	float: left;
	width: 200px;
	height: 60px;
	margin: 20px 0 0;
	color: #fff;
	}
#logo a {
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	text-decoration: none;
	}

#header {
	float: left;
	width: 100%;
	background: #262f35 url(/img/bg-header.gif) top left repeat-x;
	}
#header h1 a {
	position: absolute;
	width: 200px;
	height: 60px;
	margin-top: 30px;
	border: none;
	text-decoration: none;
	text-indent: -9999px;
	}
#header h2 {display: none;}

#pagebar {
	float: left;
	width: 100%;
	background: #bde562;
  border-top: 5px solid #93bb3a;
	border-bottom: 1px solid #a4cf43;
	}
#pagebar h1 {
	padding: 10px 0 10px 10px;
	float: left;
	color: #fff;
	font-size: 20px;
	font-family: 'Trebuchet MS', Trebuchet, Arial, sans-serif;
	text-shadow: 0 -1px 0 #8aae32;
	}
#pagebar h2 {
	padding: 10px 10px 10px 0;
  float: right;
	}
#break {
	float: left;
	width: 100%;
	}
#break1 {
	float: left;
	width: 100%;
	height: 30px;
	background: #FFFFFF;
	border-top: 5px solid #CAE6FF;
	}
#break2 {
	float: left;
	width: 100%;
	height: 40px;
	background: #FFFFFF url(/img/bg-break2.gif) top left repeat-x;
	border-top: 1px solid #C3E66F;
	}
#break3 {
	float: left;
	width: 100%;
	height: 40px;
	background: #FFFFFF url(/img/bg-break3.gif) top left repeat-x;
	border-top: 1px solid #D9D9D9;
	}

/* c) Main content */

#leftcolumn {
	float: left;
	width: 412px;
	margin-top: 30px;
	padding-right: 40px;
	}

/* d) Footer */

#footer {
	float: left;
	width: 100%;
	padding: 0 0 10px;
	border-top: 5px solid #d9d9d9;
	background: #f2f2f2 url(/img/bg-footer.gif) repeat-x top left;
	color: #999;
	font-size: 11px;
	text-align: center;
	}
#footer a {border: none;}
#footer p {
	margin: 0 0 30px;
	text-align: center;
	clear: both;
	}
	
	
/* 4: STYLES
============================================================================ */

#home #pagebar {height: 40px;}
#home h1#headline {
	height: 40px;
	margin: 30px 0 15px 0;
	background: url(/img/h1.png) no-repeat;
	text-indent: -9000px;
	}
#home h2#intro {
	height: 45px;
	margin: 0 0 20px;
	padding: 0;
	background: url(/img/h2-quote.png) no-repeat;
	text-indent: -9000px;
	}
#home h2#speech {
	height: 34px;
	margin: 100px 0 5px 0;
	padding: 0;
	background: url(/img/h2-speech.png) no-repeat;
	text-indent: -9000px;
	}

#home #crescent {
	margin: 0;
	}
	
#home h2#listen, #home h2#learn, #home h2#offer, #home h2#specifications, #home h2#information, #home h2#pictures {
	height: 34px;
	margin: 0 0 5px;
	padding: 0;
	background: url(/h2.gif) no-repeat;
	text-indent: -9000px;
	}
#home h2#listen {background: url(/img/h2-listen.png) no-repeat;}
#home h2#learn {background: url(/img/h2-learn.png) no-repeat;}
#home h2#offer {background: url(/img/h2-offer.png) no-repeat;}
#home h2#specifications {background: url(/img/h2-specifications.png) no-repeat;}
#home h2#information {background: url(/img/h2-information.png) no-repeat;}
#home h2#pictures {background: url(/img/h2-pictures.png) no-repeat;}
#home #splash {
	float: left;
	width: 100%;
	background: #E5F3FF url(/img/bg-splash.gif) bottom left repeat-x;
	}
#home #screenshot {
	float: left;
	width: 100%;
	padding-left: 10px;
	background: url(/img/fp.jpg) bottom right no-repeat;
	}
#home #copy {
	float: left;
	width: 575px;
	padding-bottom: 40px;
	margin-bottom: 5px;
	}
#home #copy a {
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	text-decoration: none;
	}
#home #copy p {margin: 5px 0 20px; color: #697987; padding-right: 65px; line-height: 170%;}
#home #copy img {border: none;}
#home #content {padding-top: 0;}
#home #content img {float: left; margin: 10px 15px 5px 0;}
#home #content #break img {float: none; margin: 10px 15px 5px 0;}
#home #content img.less {margin-top: 5px;}
#home .onecolumn {float: left; width: 230px; margin: 0 20px 20px 0;}
#home .onecolumn ul {
	list-style: none;
	margin: 0 0 10px;
	font-size: 11px;
	line-height: 160%;
	}
#home .onecolumn li#stuff {
	padding: 0 0 10px 24px;
	background: url(/img/16-content.png) no-repeat 0 5px;
	}
#home .onecolumn li#duration {
	padding: 0 0 10px 24px;
	background: url(/img/16-duration.png) no-repeat 0 5px;
	}
#home .onecolumn li#tracklist {
	padding: 0 0 10px 24px;
	background: url(/img/16-tracklist.png) no-repeat 0 5px;
	}
#home .onecolumn li#easytouse {
	padding: 0 0 10px 24px;
	background: url(/img/16-easytouse.png) no-repeat 0 5px;
	}
#home .onecolumn li#battery {
	padding: 0 0 10px 24px;
	background: url(/img/16-battery.png) no-repeat 0 5px;
	}
#home .onecolumn li#earset {
	padding: 0 0 10px 24px;
	background: url(/img/16-earset.png) no-repeat 0 5px;
	}
#home .onecolumn li#certifications {
	padding: 0 0 10px 24px;
	background: url(/img/16-certifications.png) no-repeat 0 5px;
	}
#home .onecolumn li#bookmark {
	padding: 0 0 10px 24px;
	background: url(/img/16-bookmark.png) no-repeat 0 5px;
	}
#home .twocolumn {float: left; width: 480px; margin: 0 0 20px 0;}
#home .threecolumn {float: left; width: 730px; margin: 0 0 10px 0;}
#home .last {margin-right: 0 !important;}
#home #highslide {float: left; margin: 0 0 20px;}
#home #highslide div {float: left; margin: 0 10px 10px 0;}
#home #highslide div.last {margin: 0;}


/* 5: LIST
============================================================================ */

li.icon-view {
	padding: 8px 0 15px 45px;
	background: url(/img/icon-view32.gif) 0 2px no-repeat;
	}
li.icon-edit {
	padding: 8px 0 15px 45px;
	background: url(/img/icon-edit32.gif) 0 2px no-repeat;
	}
li.icon-template {
	padding: 8px 0 15px 45px;
	background: url(/img/icon-template32.gif) 0 2px no-repeat;
	}
li.icon-add {
	padding: 8px 0 15px 45px;
	background: url(/img/icon-add32.gif) 0 2px no-repeat;
	}
li.icon-create {
	padding: 8px 0 15px 45px;
	background: url(/img/icon-create32.gif) 0 2px no-repeat;
	}
li.icon-share {
	padding: 0 0 8px 25px;
	background: url(/img/icon-share16.gif) 0 2px no-repeat;
	}
li.icon-profile {
	padding: 0 0 8px 25px;
	background: url(/img/icon-profile16.gif) 0 2px no-repeat;
	}
li.icon-gifttips {
	padding: 0 0 8px 25px;
	background: url(/img/icon-gifttip16.gif) 0 2px no-repeat;
	}
li.icon-tools {
	padding: 0 0 8px 25px;
	background: url(/img/icon-tools16.gif) 0 2px no-repeat;
	}
li.icon-contacts {
	padding: 0 0 8px 25px;
	background: url(/img/icon-contacts16.gif) 0 2px no-repeat;
	}
li.icon-checkmark {
	padding: 0 0 10px 25px;
	background: url(/img/icon-checkmark16.gif) 0 2px no-repeat;
	}
li.icon-cancel {
	padding: 0 0 10px 25px;
	background: url(/img/icon-cancel16.gif) 0 2px no-repeat;
	}
li.icon-settings {
 padding: 0 0 3px 24px;
 background: url(/img/icon-settings16.gif) 0 2px no-repeat;
 }
li.icon-view-small {
 padding: 0 0 3px 24px;
 background: url(/img/icon-view16.gif) 0 2px no-repeat;
 }


/* 6: TEXT
============================================================================ */

/* a) Links */

a:link, a:visited {
	border-bottom: 1px solid #888888;
	color: #333333;
	text-decoration: none;
	}
a:hover {border-color: #4D5762; background: #4D5762; color: #FFF;}
a:link.img, a:hover.img, a:visited.img {border: none; background: none;}
a.link {color: #4D5762; border: none; background: none;}

/* b) Typography */

h2 {
	padding: 2px 0 0.5em;
	color: #4d5762;
	font-size: 21px;
	font-family: 'Helvtica Neue', Arial, sans-serif;
	}
h2#first {padding: 30px 0 0.7em;}
h2.add {padding-top: 50px;}
h2.listtitle {padding-bottom: 3px;}
h3 {
	padding: 0.5em 0;
	color: #4d5762;
	font-size: 18px;
	font-weight: normal;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	}
h3 a:link, h3 a:visited {border: none; color: #4d5762;}
h3 a:hover {border: none; background: none; color: #069;}	
h4 {padding: 0 0 0.5em; font-size: 12px;}
h5 {
	padding: 0 0 1em;
	margin-top: -2px;
	color: #93bb3a;
	font-size: 10px;
	font-weight: normal;
	font-family: Arial, Helvtica, sans-serif;
	text-transform: uppercase;
	}

p {margin: 0 0 1.5em;}
p.left {float: left;}
p.right {float: right;}
p.big {font-size: 13px;}
p.small {font-size: 11px; color: #999; margin-bottom: 10px;}
p.center {
	margin: 0 0 40px !important;
	font: normal 16px 'Helvetica Neue', Arial, Verdana, sans-serif;
	text-align: center;
	}
p.centersmall {margin-top: -10px; text-align: center;}
p.price strong {
	color: #4d5762;
	font: normal 18px 'Helvetica Neue', Arial, Verdana, sans-serif;
	}
p.info {
 margin-top: 20px;
 padding: 3px 0 3px 32px;
 background: url(/img/icon-info24.gif) no-repeat 0 0;
 color: #036;
 font-size: 11px;
 }
#addwish p, #editwish p, #list p {margin: 0;}
p#wrong {background-image: url(/img/cancel.gif); color: #c00;}
p#small {margin-bottom: 5px; font-size: 11px;}
p#searchtip {
	margin: 4px 0 0;
	padding-left: 22px;
	background: url(/img/icon-lightbulb16.gif) 0 1px no-repeat;
	color: #999;
	font-size: 11px;
	}
p#welcome {
	margin: 20px 0 2em;
	font-size: 16px;
	font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
	line-height: 150%;
	}

em.highlight {background: #eeffbf; font-style: normal;}
em.help {color: #4d5762; font-style: normal; font-weight: bold;}

span.small {color: #999; font-size: 11px;}
span.right {float: right;}
span.bullet {
	padding: 1px 0 1px 22px;
	background: url(/img/listbullet.png) no-repeat 0 1px;
	}
span.note {margin-left: 20px; color: #999; font-size: 11px;}
span.qm {font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 14px;}
p#ok span {color: #666; font-weight: normal; font-size: 11px;}

#content strong {color: #4d5762;}


/* 7: MISC
============================================================================ */

/* Images */

img {border: none;}
img.avatar {margin-top: 0;}
img.steps {margin-bottom: 1em; border: 1px solid #666;}
img.floatleft {float: left; margin: 3px 15px 5px 0;}
img.screen, img.screen-right {
	margin: 0 !important;
	padding: 4px;
	border: 1px solid #aaa;
	}
img.screen-right {float: right; margin: 0 0 20px 20px !important;}

/* Clear floats */

.clear {clear: both;}

.clearall {
	display: block;
	clear: both;
	height: 1px;
	margin: 0;
	font-size: 1px;
	line-height: 1px;
	}
	
html {height: 100%; margin-bottom: 1px;}