@charset "utf-8";

@import url('style-reset.css');



/*   

Template Name: Mac News

Author: Dieter Schneider

Author URI: http://www.csstemplateheaven.com/

*/



/*-----------------------------------------------*/

/*--------------- SITE STRUCTURE ---------------*/

/*---------------------------------------------*/



body {font-size: 100%; font-family: Arial, Helvetica, sans-serif; background: #eeeeee url(images/body.jpg) repeat-x; color: #666}



#container {margin: auto; width: 960px; font-size: .875em; position: relative}



#logo {position: absolute; top: 20px; left: 40px}



#header {height: 524px; padding-top: 44px; background: url(images/screen.png)}



#wrap_top {background: url(images/wrap-top.jpg); height: 73px}



#wrap {background: url(images/wrap.jpg) repeat-y; height: 250px;}



#left {float: left; width: 300px}



#middle {margin-left: 330px; margin-right: 330px;}



#right {float: right; width: 300px;}



/*pages*/



#page_top {background: url(images/page_top.png); height: 41px}



#page {background: url(images/page.png) repeat-y; padding: 20px 60px}

#page.qrpage {min-height:650px;}

#page_bottom { background:url(images/page_bottom.png); height: 101px}



#signup_info {width: 220px; float: left}



/* en pages */



#footer_bg  {background: url(images/footer_bg.jpg) repeat-x; height: 317px }



#footer {clear:both; background: url(images/footer.jpg) no-repeat; width: 960px; margin: auto; height: 177px; padding: 70px 0; font-size: .8em}



/* misc */



img.float_left {border: 6px solid white; float: left; margin-right: 12px}





/*-----------------------------------------------*/

/*---------------   TYPOGRAPHY   ---------------*/

/*---------------------------------------------*/



a {color: #690;
-webkit-transition: color 1s linear;
-moz-transition: color 1s linear;
-o-transition: color 1s linear;
transition: color 1s linear;}
a:hover, a:focus {color:#426300;}


p {line-height: 1.6em; font-size: .9em; padding-bottom: 25px}



.read_more {font-weight: bold; float: right; margin-right: 10px; padding:0}



.read_more a {text-decoration: none; color: #000}

.hide{display:none;}

#left p {line-height: normal; line-height: 1.4em; padding-bottom: 10px}



h1 {margin-bottom: 25px; text-align: right}



#left h2 {font-size: 1.2em; font-weight: bold}



h2.latest_products_heading {font-size: 1em; font-weight: bold; color: #333; margin-bottom: 3px}



.product_text {font-size: .8em; line-height: normal; padding: 0}



h3 {font-size: 1.6em; font-weight: normal; color: #333; margin-bottom: 25px}



h3.introduction {margin-bottom: 14px}



/*-----------------------------------------------*/

/*---------------   NAVIGATION   ---------------*/

/*---------------------------------------------*/



/* horizontal menu ---------------*/



#h_navcontainer {

     width: 900px;

	 height: 12px;

	 padding: 40px 0 0;

}



#h_navcontainer ul {

     float: left;

     width: 100%;

}



#h_navcontainer ul li {display: inline;}



#h_navcontainer ul li a {

     padding: 0.2em 1em;

     color: #666;

     text-decoration: none;

     float: right;

	 font-weight: bold

}



#h_navcontainer ul li a:hover {

     color: #000;

}



/* hover divs (pane list) */



.pane-list {

	margin: 0;

	padding: 0;

	list-style: none;

}



.pane-list li {

	background: #ecfad7;

	cursor: pointer;

	height: 50px;

	padding: 4px;

	margin-bottom: 1px

}



.pane-list li:hover {

	background: #f6ffe9;

}



.pane-list img {border: 2px solid white; float: left; margin-right: 8px}



.pane-list a {color:#333}



/* hover divs comments (pane list) */



.pane-list-comment {

	margin: 0;

	padding: 0;

	list-style: none;

}



.pane-list-comment li {

	background: url(images/comment.png) no-repeat;

	cursor: pointer;

	height: 40px;

	width: 280px;

	padding: 10px;

	margin-bottom: 1px

}



.pane-list-comment li:hover {

	background: url(images/comment.png) no-repeat bottom;

}



.pane-list-comment img {border: 2px solid white; float: left; margin-right: 8px}



.pane-list-comment a {color:#333}



/* footer menu ---------------*/



#footer h4 {font-weight: bold; margin-bottom: 8px; padding: 5px; background: #1D1D1D; color: #CCC;

    -moz-border-radius-topleft: 5px;

	-khtml-border-radius-topleft: 5px;

	-webkit-border-top-left-radius: 5px;

    -moz-border-radius-topright: 5px;

	-khtml-border-radius-topright: 5px;

	-webkit-border-top-right-radius: 5px;

	-moz-border-radius-bottomright: 5px;

	-khtml-border-radius-bottomright: 5px;

	-webkit-border-bottom-right-radius: 5px;

	-moz-border-radius-bottomleft: 5px;

	-khtml-border-radius-bottomleft: 5px;

	-webkit-border-bottom-left-radius: 5px;

}



#footer_left {float: left; width: 560px; border: 0px solid red}



#footer_left ul {float: left; margin-right: 15px; width: 150px; background: #373838; padding: 10px;

    -moz-border-radius-topleft: 8px;

	-khtml-border-radius-topleft: 8px;

	-webkit-border-top-left-radius: 8px;

    -moz-border-radius-topright: 8px;

	-khtml-border-radius-topright: 8px;

	-webkit-border-top-right-radius: 8px;

	-moz-border-radius-bottomright: 8px;

	-khtml-border-radius-bottomright: 8px;

	-webkit-border-bottom-right-radius: 8px;

	-moz-border-radius-bottomleft: 8px;

	-khtml-border-radius-bottomleft: 8px;

	-webkit-border-bottom-left-radius: 8px;

}



#footer_left li {background: url(images/seperator_footer.png) repeat-x bottom; padding: 5px 0}



#footer_left ul li a {color: #999; text-decoration: none;}



#footer_right {width: 350px; float: right;}



#footer_right ul {margin-bottom: 10px}



#footer_right ul li {display: inline; margin-right: 10px;}



#footer_right img {border: 1px solid #646464; padding: 6px; background: #000000;

    -moz-border-radius-topleft: 5px;

	-khtml-border-radius-topleft: 5px;

	-webkit-border-top-left-radius: 5px;

    -moz-border-radius-topright: 5px;

	-khtml-border-radius-topright: 5px;

	-webkit-border-top-right-radius: 5px;

	-moz-border-radius-bottomright: 5px;

	-khtml-border-radius-bottomright: 5px;

	-webkit-border-bottom-right-radius: 5px;

	-moz-border-radius-bottomleft: 5px;

	-khtml-border-radius-bottomleft: 5px;

	-webkit-border-bottom-left-radius: 5px;

}



/*-----------------------------------------------*/

/*---------------      FORMS     ---------------*/

/*---------------------------------------------*/



#form_container {border: 1px solid black}



#form_container p {margin: 0 0 20px}



#form {background: grey;}



#input1 {background: red}



#textarea1 {width: 294px; height: 160px; background: green}



/*-----------------------------------------------*/

/*---------------    screen nav  ---------------*/

/*---------------------------------------------*/



/* navigation */



#nav {

	background:#ddd url(images/reverse.png);

	border-bottom:1px solid #CCCCCC;

	height:156px;	

	width:870px;

	margin: auto

}



#nav ul {	

	width:960px;

	margin:0 auto;	

}



#nav li {	

	border-right:1px solid #ddd;

	float:left;

	padding-left:1px;

	width:172px;

	list-style-type:none;

	text-align:center;

}



#nav a {

	color:#333333;

	display:block;

	padding:17px;

	position:relative;

	word-spacing:-2px;

	font-size:11px;		

	height:122px;

	text-decoration:none;

}	



#nav a.current {

	background:url(images/down_large.jpg);	

}



#nav img {

	background-color:#fff;

	border:1px solid #ccc;

	margin:3px 0 5px 27px;

	padding:4px;		

	display:block;

}



#nav strong {

	display:block;		

	font-size:13px;

}



/* panes */

#panes {

	background:#fff url(images/reverse.png) repeat scroll 0 0;

	width: 870px;

	margin: auto;

	height:246px;

	margin-bottom:-20px;

	padding-bottom:20px;

	

	/* must be relative so the individual panes can be absolutely positioned */

	position:relative;

}



/* crossfading effect needs absolute positioning from the elements */

#panes div {

	display:none;		

	position:absolute;

	top:20px;

	left:20px;

	font-size:14px;

	color:#444;	

	width:835px;

	padding-right: 15px

}



#panes img {

	float:left;

	margin-right:20px;		

}



#panes p.more {

	color:#000;

	font-weight:bold;

}



#panes h3 {

	margin:0 0 10px 0;

	font-size:22px;

	font-weight:normal;

}



.overlay {

	display:none;

	width:500px;

	padding:20px;

	background-color:#ddd;

}



/*-----------------------------------------------*/

/*---------------   signup-form  ---------------*/

/*---------------------------------------------*/



/* scrollable root element */

#wizard {	

	background:#fff url(images/h600.png) repeat scroll 0 0;

	border:5px solid #E9E9E9;

	font-size:12px;

	height:450px;

	float: right;

	width:570px;

	overflow:hidden;

	position:relative;

	

	/* rounded corners for modern browsers */

	-moz-border-radius:5px;

	-webkit-border-radius:5px;

}  



/* scrollable items */

#wizard .items {

	width:20000em;	

	clear:both;	

	position:absolute;	

}



/* single item */

#wizard .page {	

	padding:20px 30px;

	width:500px;

	float:left;	

}



/* title */

#wizard h2 {

	border-bottom:1px dotted #ccc;

	font-size:22px;

	font-weight:normal;

	margin:10px 0 0 0;

	padding-bottom:15px;		

}



#wizard h2 em {

	display:block;

	font-size:14px;

	color:#666;

	font-style:normal;

	margin-top:5px;

}



/* input fields */

#wizard ul {

	padding:0px !important;

	margin:0px !important;

}



#wizard li {

	list-style-type:none;

	list-style-image:none;

	margin-bottom:25px;	

}



#wizard label {

	font-size:16px;	

	display:block;

}



#wizard label strong {

	color:#789;	

	position:relative;

	top:-1px;

}



#wizard label em {

	font-size:11px;

	color:#666;	

	font-style:normal;

}



#wizard .text {

	width:100%;

	padding:5px;

	border:1px solid #ccc;

	color:#456;

	letter-spacing:1px;

}



#wizard select {

	border:1px solid #ccc;

	width:94%;	

	padding:4px;

}



#wizard label span {

	color:#b8128f;

	font-weight:bold;

	position:relative;

	top:4px;

	font-size:20px;

}



#wizard .double label { 

	width:50%;

	float:left;

}



#wizard .double .text {

	width:93%;	

}



#wizard .clearfix {

	clear:left;

	padding-top:10px;	

}



#wizard .right {

	float:right;		

}



/* validation error message bar */

#drawer {

	background:#fff url(images/h80.png) repeat-x scroll 0 0;

	background-color:#fff;

	overflow:visible;

	position:fixed;	

	left:0;

	top:0;

	text-align:center;

	padding:15px;

	font-size:18px;

	border-bottom:2px solid #789;

	width:100%;

	display:none;

	z-index:2;

}



#wizard .error {

	border:1px solid red;		

}



#wizard #status {

	margin:0px !important;

	height:35px;

	background:#123 url(images/h30.png) repeat-x;

	padding-left:25px !important;

	_background:#123;

}



#status li {

	list-style-type:none;

	list-style-image:none;

	float:left;

	color:#fff;

	padding:10px 30px;

}



#status li.active {

	background-color: #f9f9fa;

	color: #000;

	font-weight:normal;		

}



/**************************** Gallery *****************************/



#gallery {

	width: 852px;

	margin: auto;

	overflow: auto;

	padding-bottom: 18px;

	position:static;

}



.float_left_thumb {

	float: left;

	height: 164px;

	width: 152px;

	margin: 8px 10px 2px 8px;

	background: url(images/gallery_thumb.png) no-repeat;

	padding-top: 6px;

	text-align: center;

}



.center {margin: auto;}



#no_gallery_found {width: 798px; padding: 50px; margin: auto; background: red; border: 10px solid white}

/*custom*/
.qrform {width:300px;}
.qrform h4{margin-top:10px;}
.qrform h4, .qrform .embedtext, .qrform #smstext {margin-bottom:10px;}
#qrtype, #imagesize, #errorcorrection {margin-top:10px;display:inline;margin-right:5px;}
#imagediv {float:right;margin-right:500px;}
.error {color:red;}
a.biglink {font-size:larger;}
a.biglink:hover, a.biglink:focus {color:#426300;}
.qrform label {
display:block;
float:left;
margin-right:0.5em;
text-align:right;
width:5em;
}
.qrform #imagesize{
margin-left:0.5em;
}