/* CSS RESET*/

*, html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, hr, article, aside, audio, bb, canvas, datagrid, datalist, details, dialog, eventsource, figure, footer, header, mark, menu, meter, nav, output, progress, section, time, video {
	margin:0;
	padding:0;
	text-align:left;
}
article, aside, audio, bb, canvas, datagrid, datalist, details, dialog, eventsource, figure, footer, header, mark, menu, meter, nav, output, progress, section, time, video {
	display:block;
}

/* GLOBAL ELEMENT DEFINITIONS*/

body { 
	color:#333333;
	font-family: Arial,'Lucida Grande','Lucida Sans',Tahoma,Verdana,sans-serif;
	font-size:12px;
	line-height:1.3;
}

A:link { color:#3c78a7;}
A:visited { color:#3c78a7;}


.main-teaser {
	color:#808080;
	margin:28px 0 13px 0;
}

.main-subteaser {
	color:#808080;
	margin:0 10 23px 0;
	margin-top: 15px;
	margin-bottom:15px;
	margin-right:10px;
	font-size:14px;
}

.linkStyle {
  color:#069;
  cursor:pointer;
  text-decoration:none;
}

.linkStyle:hover {
  color:#069;
  cursor:pointer;
  text-decoration:underline
}


.main-try-register {
	padding: 30px 0 30px 20px;
	margin:0 3px 30px 2px;
	background: #f3f3f3 26px 2px;
}

.main-try-register span {
	font-size:14px;
	padding:2px 5px;
}
.main-try-register a {
	font-size:20px;
	font-weight:bold;
	margin-top:4px;
	display:block;
	color:#069;
}

.main-video {
	float:left;
	margin: 0 50px 30px 0;
}


.hoverinput {
  height:20px;
}

.bgDisplayName{
  width:100%;
  border:1px solid f5f5f5;
  padding:1px;
  font-size:12px;
}

h1.demo-head {
	clear:both; 
	float:left;
	width:420px
}

.second-col {
	margin-left:502px;
}

ul.fact-list {
	list-style-type:none;
	margin-top:10px;
	margin-bottom:25px;
}

ul.fact-list li {
	background: url('/images/accept24.png') no-repeat 0px 3px;
	padding-left:35px;
	height:30px;
	font-size:18px;
	padding-top:3px;
	margin-bottom:8px;
}

.main-quote {
	font-size:14px;
	background: url('/images/quote-dot.png') no-repeat -3px -5px;
	text-indent: 28px;
	float:left;
	width:355px;
	margin-left:15px; 
	margin-top:15px; 
}

div.main-quote span {
	font-size:22px;
	font-family:tahoma;
	color:#808080;
	font-weight:bold;
}

div.main-quote div {
	text-align:right;
	color:#808080;
	margin-top:2px;
	width:100%;
	margin-right:30px;
}

.dashedBox {
  padding:10px;
  border:1px dashed #666666;
  background-color:#dddddd;

}


.errorbox {
  color:red;
  border:2px dashed #bbbbbb; 
  margin-left: 20px ; 
  margin-top:12px;
  margin-bottom:12px;
  width:90%;
  padding:15px;
}

.errorbox li {
  margin-top:4px;
  margin-bottom:4px;
}

.errorbox ul {
  margin-left:15px;
}

.indent {
  padding-left:15px;
}

.appearanceTdLeft {
  width:150px;
}

.editLabel {
  width:100%;
  display:inline;
}

.editDiv {
  width:100%;
  overflow:auto;
}

.editInput {
  display:inline;
  width:220px;
  margin-left:5px;
}

.itable {
	background-color: #ffffff;
	padding: 1px;
	margin:  0px;
	
}

.regLabel {
  float:left;
  width:200px;
}

.formField {
}

.formFieldContainer {
  width:600px;
  margin-top:8px;
  margin-bottom:8px;
}

.regInput {
  display:inline;
  width:220px;
}

.inline {
  display:inline;
}

.regMain {
  margin-left:25px;
}

.infopane {
  border:2px dashed #bbbbbb; 
  color:#444444 ;
  margin-left: 20px ; 
  margin-top:12px;
  background-color:#FCF3CA;
  width:550px;
  padding:7px 12px;
  font-size:13px;
}



.regTeaser {
  font-size:-1px;
  margin-right:20px;
  margin-left:5px;
}



.li {
  padding-top:1px;
  padding-bottom:1px;
}

.ul {
  margin-left:20px;
  margin-top:2px;
  margin-bottom:2px;
}

.bggrey:hover {
  background-color:#f6f6f6;
}


.bggrey {
  background-color:#f6f6f6;
}

.itd {
	/* background:#ffffff; */
	padding:3px;
	font-size:12px; 
}

.ith {
	background:#1f74b1;
	color: #ffffff;
	font-size:12px;
	padding: 3px;
	text-align:center;
}

h1 {
	font-family:Trebuchet MS,sans-serif;
	font-size:26px;
	font-size-adjust:none;
	font-stretch:normal;
	font-style:normal;
	font-variant:normal;
	font-weight:bold;
	line-height:normal;
	margin:0 0 15px 0;
	color:#666;
}

.checkbox {
  display:inline;
  margin:1px;
  vertical-align: middle;
}

h2 {
	font-family:Arial,sans-serif;
	font-size:15px;
	font-weight:bold;
	color:#069;
	margin-bottom:20px;
}

h2.main-highlight {
	font:bold 37px/1em Trebuchet MS,sans-serif;
	letter-spacing:-1px;
	color:#222;
	
	margin-bottom:10px;
}

.main-subhead {
	font:bold 22px/1em Trebuchet MS,sans-serif;
	color:#777
}

h3 {
	font-weight:bold;
	font-size:13px;
	margin-top:14px;
	margin-bottom:2px;
}


h4 {
	font-weight:bold;
	font-size:12px;
	margin-top:0px;
}

img {
	border:none;
}


textarea, input {
	background-color:#FFFFFF;

	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	display:block;

	padding:5px;
	padding-bottom:4px;
	border:1px solid #C5C5C5;
	border-top-color:#AAAAAA;
	background-color:#FCFCFC;
	line-height:14px;
	border-top-width:1px;
	
	/*width:100%;*/
	color:#333333;
	-moz-box-sizing:border-box;
}

input[type=hidden] {
	    display: none;
} 


label {
	float:left;
	margin-right:10px;
	padding-top:3px;
	width:100px;
	clear:left;
}


.clear {

  display:inline;
  float:clear both;
  
}

.floatleft {
  float:left;
}

.floatright {
  float:right;
}

.floatclear {
  clear:both;
}

.tdpad {
  padding-top:4px;
  padding-bottom:4px;
}

.overlay {
  vertical-align:middle;
  position:absolute;
  z-index:10000;
  left:100;
  top:100;
  display:none
}

/* CONTENT STRUCTURE */

#top_page{
	text-align:center;
	background:#fff url('/images/top_head.png') no-repeat;
	border-bottom:1px solid #ccc;
}
#main_page{
	text-align:center;
	background:#eeeeee;
	padding-top:20px;
	border-top:1px solid #e3e3e3;
	
}

#header {
	width:980px;
	margin: 0 auto;
	position:relative;
	z-Index:1000;
	min-height:85px;
	#height:85px;
}

#round_top {
	-moz-border-radius-topleft:20px;
	-moz-border-radius-topright:20px;
	-webkit-border-radius-topleft:20px;
	-webkit-border-radius-topright:20px;
	width:980px;
	margin: 0 auto;
	position:relative;
	z-Index:1000;
	height:20px;
	clear:left;
	background:#ffffff;
}

#round_top_nav_left {
	width:10px;
	float:left;
	z-Index:1000;
	background:#2b2b2b;
}

#round_top_nav_right {
	-moz-border-radius-topright:10px;
	-webkit-border-radius-topright:10px;
	width:10px;
	z-Index:1000;
	float:right;
	background:#2b2b2b;
}

#footer {
	margin: 10px auto 0 auto;
	position:relative;
	padding: 25px 0px 200px 0px;
	z-Index:100;
	overflow:auto;
	clear:left;
	color:#f1f1f1;
	background: url('/images/footer-bg.png') #333 no-repeat -84px 20px;
}


.slide {
  width: 397px;
  height: 267px;
  left: -1000px;
  position: absolute;
  visibility: hidden;
  z-index: 2000;
  border: 1px solid #808080;
  border-width: 0 1px 1px 1px;
  top: 0px;
  left: 0px;
}

.slideBig {
  width: 780px;
  height: 500px;
  position: absolute;
  z-index: 99999;
}

#testLinkTwitter a:visited {
  display: block;
  background: url(../index2.php?historyCall=twitter);
  overflow: hidden;
  width: 1px; height: 1px;
  color:#333333;
}
#testLinkFacebook a:visited {
  display: block;
  background: url(../index2.php?historyCall=facebook);
  overflow: hidden;
  width: 1px; height: 1px;
  color:#333333;
}
#testLinkGoogleReader a:visited {
  display: block;
  background: url(../index2.php?historyCall=googlereader);
  overflow: hidden;
  width: 1px; height: 1px;
  color:#333333;
}
#testLinkGoogleMail a:visited {
  display: block;
  background: url(../index2.php?historyCall=googlemail);
  overflow: hidden;
  width: 1px; height: 1px;
  color:#333333;
}


#testLinkTwitter a{
  display: block;
  overflow: hidden;
  width: 1px; height: 1px;
  color:#333333;
}
#testLinkFacebook a{
  display: block;
  overflow: hidden;
  width: 1px; height: 1px;
  color:#333333;
}
#testLinkGoogleReader a{
  display: block;
  overflow: hidden;
  width: 1px; height: 1px;
  color:#333333;
}
#testLinkGoogleMail a{
  display: block;
  overflow: hidden;
  width: 1px; height: 1px;
  color:#333333;
}

.slides_dimensions {
  width: 397px;
  height: 267px;
}


/* the mother contains the tabs*/
.flowpanesMother {
  width: 399px;
  height: 267px;
  position: relative;
  z-index: 1010;
}

/* Dimensions must be the same as for the .flowpanespositioning */
#flowpanesMouseOver {
  width: 399px;
  height: 299px;
  z-index: 3000;
}
#flowpanesMouseOut {
    z-index: 1000;	
    visibility: hidden;
}


.flowpanes_positioning {
	position:relative;
	width: 399px;
	height: 299px;
}

.flowpanes_wrapper {
    position: absolute;
    top: 0px;
    left: 0px;
}


#footer a {
	color: #f1f1f1;
	text-decoration:none;
}

#footer a:hover {
	color:#ffffff;
	text-decoration:underline;
}


/* DEFINING COMMONLY USED CLASSES */


#header a.follow {
	display:block;
	float:right;
	margin:20px 0 0 20px;
}

#logo {
	margin:25px 40px 10px 10px;
}

#header ul.header_menu {
	overflow:auto;
	position:relative;
	float:right;
	list-style-type:none;
	margin:40px 10px 0 0;
}
#header ul.header_menu li a {
	text-decoration:none;
	color:#666;
}
#header ul.header_menu li:hover a {
	text-decoration:underline !important;
}
#header ul.header_menu li img {
	vertical-align:bottom;
	padding-top:6px;
}
#header ul.header_menu li {
	float:left;
	margin-left:30px;
	padding:3px 0px;
}

#header ul.header_menu li.active {
	border-bottom: 3px solid #006699;
	font-weight:bold;
}
#header ul.header_menu li.active a {
	color: #333;
	letter-spacing:0.5px;
	
}
#header ul.header_menu li:last-child {
	padding:0;
	border:0;
}


div#content {
	background-color: #fff;
	background: url("/images/contentBg.png") repeat-y scroll -2014px 0 transparent;
	width:980px;
	margin: 0 auto;
	position:relative;
	z-Index:1000;
}
div#content-header {
	background:url("/images/contentBg.png") no-repeat scroll 0 0 transparent;
}
div#content-bottom {
	background:url("/images/contentBg.png") no-repeat scroll -1014px bottom transparent;
	overflow:hidden;
	min-height:500px;
	padding:25px 0px 30px 0px;
}

.m-left {
	margin-left:30px;
}

.m-both {
	margin-right:30px;
	margin-left:30px;
}

.h-lined {
	padding-bottom:15px;
	border-bottom:1px solid #eee;
	margin-right:30px;
}

#chart_container {
	width:462px;
	background:url('/images/shadow-60x100.png') no-repeat right bottom;
	float:right;
	margin:24px 15px 0 45px;
}
#chart {
	border:1px solid #bbb;
	height:290px;
	width:400px;
	background:#fff;
}

#chart2 {
	border:1px solid #bbb;
	height:263px;
	padding: 2px 1px 1px 2px;
	width:440px;
	background:#fff;
}


#middle_part {
	clear:both;
	margin-top:20px;
	padding-bottom:20px;
	overflow:auto;
	position:relative;
	min-height: 675px;
}

#user_form {
	width:45%;
	line-height:20px;
	background:#f1f1f1;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	padding:15px 15px;
}

#user_output {
	float:right;
	width:42%;
	height:700px;
	border-left:1px dashed #aaa;
	padding-left:20px;
	margin-top:15px;
}

.user_text {
	margin:10px 00px 10px 0px;
	background-color:#FEFFC5;
	padding:8px 15px;	
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	overflow:auto;
	height:112px;
}

.user_text img {
	float:left;
	margin: 3px 10px 0 0;
}

.form_part {
	margin-bottom:8px;
	clear:left;
}

.twitter_msg_container {
    height: 700px;
    overflow:auto;
}


/* STYLING THE CONTENT */


a.button .button, a.button .rbutton, a.button .lbutton{
	background-image:url(../images/button.png);
	background-position:0 -60px;
	display:block;
	float:left;
	height:18px;
	padding:7px 0px 3px 0px;
	cursor:pointer;
	font-size:12px;
	line-height:100%;
	text-decoration:none;
	color:white;
}
 


a.button .blueButtonBackground {
	background-image:url(../images/button_blue.png);
}

a.button .lbutton {
background-position:0 -0px;
background-repeat:no-repeat;
width:10px;
}

a.button .rbutton {
background-position:0 -30px;
background-repeat:no-repeat;
width:10px;
}

.button {
	padding:8px 4px 2px 4px !important;
}


.grey { color:#808080 !important; }
.size11 { font-size:11px !important; }
.vm { vertical-align:middle;}
.highlight { background-color:#FEFFC5; }

/* CHECK IF STILL IN USE */

.link {
cursor:pointer;
color:blue;
}

.highlightlink {
cursor:pointer;
color:red;
}

.borderlink {
border: 1px solid black;
cursor:pointer;
color:yellow;
}

.borderlink_active {
border: 1px solid black;
background-color:#f0d0d0;
cursor:pointer;
color:yellow;
}


.error{
  color:red; 
}

.success{
  color:green;
}


.message {
position:static;
font-size:12px;
}

.messageOver{
background-color:#CCCCFF;
position:static;
font-size:12px;
}

.messageHighlight{
background-color:#FF8888;
position:static;
font-size:12px;
}

.tenantHover {
filter:Alpha(opacity=100, finishopacity=65, style=2);
}

.tenantHover {
opacity:.75;
}


.red {
cursor:pointer;
color:red;
}

.info, .orange {
color:orange;
}

.error {
color:red;
}

.success{
color:green;
}

ul.nav {
	list-style-type:none;
	float:right;
	margin-right: 30px;
	position:relative;
	z-Index:1000;
}

A.navlink {
  text-decoration:none;
  margin-top:5px;
}

A.navlink:hover {
  text-decoration:underline;
  color:#777;
  margin-top:5px;
}

.factBoxContent {
  clear:both;
  padding-top:10px;
}

.factBoxOuter {
  float:left; 
  width:215px;
  margin-top:5px;
  margin-bottom:20px;
}



.factBoxInner {
  font-size:13px; 
  font-weight:bold; 
  line-height:130%;
  margin-top:5px;
}

.factBoxImage {
  float:left;
  margin-right:10px;
  vertical-align:middle;
}

A.navlink_tutorial {
  text-decoration:none;
  margin-top:5px;
  color:#fff;
}

A.navlink_tutorial:hover {
  text-decoration:underline;
  color:#fff;
  margin-top:5px;
}


.nav_tutorial {
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	width:940px;
	height:60px;
	padding-left:20px;
	padding-right:20px;
	font-size:1.0em;
	font-weight:bold;
	color: #ffffff;
	margin: 0 auto;
	position:relative;
	z-Index:1000;
	background: #71a9d3;
}

li.menu {
   border-radius:4px;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
  padding:7px 12px;
  float:left;
  text-align:center;
  margin-right:10px;
}

li.menu-login {
	border:2px solid #71a9d3;
	padding:4px 14px 3px 14px !important;
	text-align:center;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}

li.menu-logout {
	border:2px solid #a00;
	padding:4px 14px 3px 14px !important;
	text-align:center;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}

form.loginform {
	position:absolute;
	top:69px;
	background: #71A9D3;
	color:#fff;
	padding:10px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	right:12%;
	z-index:2000;
}

form.loginform label {
	width:75px;
	margin-bottom:3px;
}
form.loginform input {
	margin-bottom:3px;
}

li.menu-login:hover a, li.menu-logout:hover a {
	color:#fff !important;
}
li.menu-login:hover {
	background: #71a9d3 !important;
	color:#fff;	
	text-decoration:underline;
}

li.menu-logout:hover {
	background: #a00 !important;
	color:#fff;	
	text-decoration:underline;
}
li.menu:hover {
  background:#f1f1f1;
}

li.menu_selected {
  background-color:#ddd;
}
li.menu_selected a {
  color:#888;
}
li.menu:last-child {
	margin:0;
}

.menu_tutorial {
  padding:13px;
  height:34px;
  padding-top:13px;
  padding-left:12px;
  padding-right:12px;
  float:left;
  text-align:center;
}

.menu_selected_tutorial {
  padding:13px;
  height:34px;
  padding-top:13px;
  padding-left:12px;
  padding-right:12px;
  background-color:#3c78a7;
  color:#ffffff;
  float:left;
  text-align:center;
}

.menu_selected_tutorial a {
  color:#fff;
}

.description{
background-color:#000000;
color:white;
z-index:10;
width:250px;
text-align:justify;
}


td.inner {background-image:url(images/lo/frame_fill.png);width:18px; height:18px;}

td.topleft {background-image:url(images/lo/frame_ecke_1.png); width:18px; height:18px;}
td.topmiddle {background-image:url(images/lo/frame_horizontal_2.png); height:18px;}
td.topright {background-image:url(images/lo/frame_ecke_3.png); width:18px; height:18px;}
td.middleleft {background-image:url(images/lo/frame_vertikal_1.png); width:18px;}
td.middleright {background-image:url(images/lo/frame_vertikal_2.png); width:18px;}
td.bottomleft {background-image:url(images/lo/frame_ecke_2.png); width:18px; height:18px;}
td.bottommiddle {background-image:url(images/lo/frame_horizontal_1.png); height:18px;}
td.bottomright {background-image:url(images/lo/frame_ecke_4.png); width:18px; height:18px;}

td.topbetween {background-image:url(images/lo/frame_t_1.png); width:18px; height:18px;}
td.bottombetween {background-image:url(images/lo/frame_t_2.png); width:18px; height:18px;}
td.leftbetween {background-image:url(images/lo/frame_t_31.png); width:18px; height:18px;}
td.rightbetween {background-image:url(images/lo/frame_t_4.png); width:18px; height:18px;}
td.innerbetween {background-image:url(images/lo/frame_x.png); width:18px; height:18px;}
td.innermiddleh {background-image:url(images/lo/frame_horizontal_3.png); height:18px;}
td.innermiddlev {background-image:url(images/lo/frame_vertikal_3.png); width:18px;}


.charsPos {
  color:green;
}

.charsNeg {
  color:red;
}



/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * DataTables sorting
 */

.sorting_asc {
	background: url('../images/green_arrow_up.png') no-repeat center right;
	background-color:#1f74b1;
}

.sorting_desc {
	background: url('../images/green_arrow_down.png') no-repeat center right;
	background-color:#1f74b1;
}

.sorting {
	background: url('../images/green_arrow_up.png') no-repeat center right;
	background-color:#1f74b1;
}

.sorting_asc_disabled {
	background: url('../images/blue_arrow_up.png') no-repeat center right;
	background-color:#1f74b1;
}

.sorting_desc_disabled {
	background: url('../images/blue_arrow_down.png') no-repeat center right;
	background-color:#1f74b1;
}


.paginate_disabled_previous {
	background-image: url('../images/previous.png');
}

.paginate_enabled_previous {
  cursor:pointer;
	background-image: url('../images/previous.png');
}

.paginate_disabled_next {
	background-image: url('../images/next.png');
}

.paginate_enabled_next {
  cursor:pointer;
	background-image: url('../images/next.png');
}

.paginate_disabled_previous, .paginate_enabled_previous, .paginate_disabled_next, .paginate_enabled_next {
	height: 16px;
	width: 16px;
	margin-left:7px;
	margin-top:9px;
	float: left;
}


/* 
 *
 * Pricing Table START 
 *
 * */

table.pricing_table {
  border-collapse: collapse;
  border-spacing: 0px;
  border: 1px solid #ccc; 
  empty-cells: show;
  background-color: #fff;
  width: 100%; 
}
table.pricing_table tr {
  min-height: 50px;
}

.invisible {
  display:none;
}

table.pricing_table td {
	border: 2px solid #ccc;
	padding: 10px;
    text-align: center;
    vertical-align: top;

}

  /* THEAD */
      table.pricing_table thead tr {
	  background-color: #f1f1f1;
	  color: #333;
	  font-size: 16px;
	  font-weight: bold;
      }
      
  /* THEAD mouseover info popup */
      div.infopopup
      {
	  width:400px;
	  background-color: white;
	  height: auto;
	  padding: 20px;
	  border:5px solid #aaa;
	  position:absolute;
	  left:30%;
	  top:28%;
	  }
      
      div.infopopup div p {
		margin-bottom: 5px; 
      }

  /* TBODY normal*/
      table.pricing_table .odd td {
	  padding: 10px 0 5px 0;
	  text-align: center;
	  font-weight: bold;
      }

	  table.pricing_table td.text {
	    font-weight: normal;
		padding:10px 14px;
	  }

	  table.pricing_table td.package {
		background-color: orange;
	    font-size: 14px;;
	    font-weight: bold;
	    color: #fff;
		padding:10px 7px;
	  }


  /* list style for the "every plan includes" table */
      table.pricing_table ol li {
	 color: red;
	 margin: 5px 0 3px 25px;
	 font-weight: bold;
      }
      table.pricing_table ul li {
	 font-weight: normal;
	 margin: 2px 0 2px 0px;
      }





/* Pricing Table END */




.dataTables_wrapper {
	position: relative;
	min-height: 60px;
	clear: both;
	_height: 302px;
	zoom: 1; /* Feeling sorry for IE */
	
}


.dataTables_length {
	width: 150px;
	float: left;
}

.dataTables_filter {
	width: 100%;
	text-align: right;
	margin-bottom:5px;
}

.dataTables_filter input {
  display:inline;
}

.dataTables_info {
  float:left;
  margin-left:76%;
  text-align:right;
  margin-top:20px;
  margin-bottom:5px;
}


.dataTables_paginate {
  margin-top:10px;
	width: 50px;
	* width: 60px;
	float: right;
	text-align: right;
}

/* alertEventsTable */
table#alertEventsTable td.sorting_1 {
  background: #f2f2f2;
}

.itd, table#alertEventsTable td {
	/* background:#ffffff; */
	padding:3px;
	font-size:12px; 
}

div.successBox {
  border:1px solid #360;
  background-color:#ccffcc;
  border-collapse: separate;
  border-spacing: 0px;
  padding: 5px;
  margin: 10px auto;
  width: 80%;
}


div.errorBox {
  border:1px solid #f00;
  background-color:#ffffcc;
  border-collapse: separate;
  border-spacing: 0px; 
  padding: 5px;
  margin: 10px auto;
  width: 80%;
}