@charset "utf-8";
/* ================================================================
	Overview CSS 3 + CSS 2.1:
================================================================ //
[x] Reset and defaults, Force scrollbar + -webkit-font-smoothing (http://maxvoltar.com/archive/-webkit-font-smoothing), 
	HTML5 placeholder styling, Clearfix
[x] General items
	[x] // Header > Logo wwwdesign.info
	[x] // Date > Last update
	[x] // Section > Description PHP demos (start page)
[x] Section > PHP demos



/* ================================================================
[x] Reset and defaults, Force scrollbar + -webkit-font-smoothing (http://maxvoltar.com/archive/-webkit-font-smoothing), 
	HTML5 placeholder styling, Clearfix
================================================================ */
* { margin: 0; padding: 0; outline: none }
body { 
	background-color: #fffff7; 
	min-width: 650px; 
	padding: 20px; 
	font-family:	Verdana, Arial, Helvetica, sans-serif; 
	font-size: 14px;
}

body.demo-1 { padding-right: 44% }
h1, 
h2, 
h3, 
h4, 
h5, 
h6 { font-family: Arial, Helvetica, sans-serif }
h1, 
h2 { font-weight: bold; margin: 0 0 13px -27px }
h1 { font-size: 22px; line-height: 28px; color: #203398 }
h1 span { color: #b2b2b2 }
h2 { font-size: 15px; line-height: 20px; color: #222 }
h2 span { font-weight: normal }
h2 span.highlighted { color: darkgreen }
h2 span.code { font-family: Verdana, Arial, Helvetica, sans-serif }
h3, 
h4 { font-size: 120%; font-weight: bold }
h3 { display: inline }
h4 { color: red }
hr { background-color: #aaa; height: 1px; border: 0; margin: 30px 0 10px }
table { background-color: white; border-spacing: 0; margin-bottom: 20px }
tr, 
td { vertical-align: top }
fieldset, 
img { border: 0 }
ul, 
ol, 
dl { list-style: disc outside; padding: 0; margin-bottom: 20px }
li span { font-weight: bold; color: #203398 }
option { padding: 1px 3px }
pre { font-size: 17px; font-weight: bold; color: darkgreen }
a:link, 
a:visited { display: inline-block; color: #203398; text-decoration: underline }
a:hover, 
a:active, 
a:hover span { color: darkgreen }
a span { color: #333 }
a.linkArrowLeft:link, 
a.linkArrowLeft:hover, 
a.linkArrowRight:link, 
a.linkArrowRight:hover, 
a.linkArrowRight-LeftSide:link, 
a.linkArrowRight-LeftSide:hover { font-size: 12px; line-height: 23px }
a.linkArrowLeft:link { background: url(img/arrows.png) 0 4px no-repeat; padding-left: 28px }
a.linkArrowLeft:hover { background-position: 0 -40px }
a.linkArrowLeftSmall:link { background: url(img/arrows.png) 0 -240px no-repeat; padding-left: 16px }
a.linkArrowLeftSmall:hover { background-position: 0 -280px }
a.linkArrowRight:link { background: url(img/arrows.png) 100% -80px no-repeat; padding-right: 28px }
a.linkArrowRight:hover { background-position: 100% -120px }
a.linkArrowRight-LeftSide:link { background: url(img/arrows.png) 0 -80px no-repeat; padding-left: 26px }
a.linkArrowRight-LeftSide:hover { background-position: 0 -120px }
a.linkArrowDown:link { background: url(img/arrows.png) 100% -160px no-repeat; padding-right: 16px; margin-right: -2px }
a.linkArrowDown:hover { background-position: 100% -200px }
a.linkExternal:link { background: url(../img/linkExternal.png) 100% 5px no-repeat; padding-right: 12px }
a.linkExternal:hover { background-position: 100% -101px }
.myData a.linkExternal:link { background: url(../img/linkExternal.png) 100% 6px no-repeat; padding-right: 12px }
.myData a.linkExternal:hover { background-position: 100% -100px }
.coloredAccentuated { background-color: #e3f8a2; padding: 4px 20px 17px 9px; min-width: 330px; width: 60%; -moz-border-radius: 4px 20px 4px 20px; 
-webkit-border-radius: 4px 20px 4px 20px; -ms-border-radius: 4px 20px 4px 20px; -o-border-radius: 4px 20px 4px 20px; border-radius: 4px 22px 4px 22px }
body .accentuated { font-weight: bold }
body .moreDistance { margin-top: 13px }
body table tr td.lastItemRight { border-right: 0 }
.lastItem, 
.lastItem td { border-bottom: 0; white-space: normal }
.hintCatalogFile { font-size: 11px; margin: -4px 0 5px }
.wrapLinkCodeBox { display: inline-block; background-color: #fffcee; padding: 4px 15px 7px; margin-bottom: 25px; border: 1px solid #999; 
-moz-border-radius: 6px; -webkit-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; 
-moz-box-shadow: 3px 4px 4px #333; -webkit-box-shadow: 3px 4px 4px #333; -ms-box-shadow: 3px 4px 4px #333; -o-box-shadow: 3px 4px 4px #333; 
box-shadow: 1px 2px 2px #333 }
.wrapLinkCodeBox a:link { font-size: 14px }

/* Force scrollbar + -webkit-font-smoothing (http://maxvoltar.com/archive/-webkit-font-smoothing) */
html { overflow-y: scroll; -webkit-font-smoothing: antialiased }

/* HTML5 placeholder styling  */
input::-webkit-input-placeholder { color: #003500 }
input::-moz-placeholder { color: #003500 } /* Firefox 19+ */
input:-moz-placeholder { color: #003500 } /* Firefox 18- */
input:-ms-input-placeholder { color: #003500 }

/* Clearfix */
.group { /* display: inline-block */ overflow: hidden }
.group:after { clear: both; content: "."; display: block; font-size: 0; height: 0; min-height: 0; visibility: hidden }
.clearItems { display: inline-block; clear: both }


/* ================================================================
[x] General items
================================================================ */
/* Header > Logo wwwdesign.info */
header { position: absolute; top: 0; right: 0; width: 270px; height: 40px; z-index: 2; background-color: #fffff7 }
header a { display: block; text-indent: -9999px; width: 270px; height: 40px; background: url(../img/logo.png) 37px 12px no-repeat }
header a:hover { background-position: 37px -100px }

/* Date > Last update */
section.wrapLastUpdateBacklink, 
time.lastUpdate.index { position: absolute; top: 10px; left: 40px; font-size: 11px }

/* Section > Description PHP demos (start page) */
section.demoDescription { margin-left: -27px }
section.demoDescription div { padding: 12px 20px 0 10px; margin: 10px 0 25px; border-top: 1px solid #999 }
section.demoDescription a:link { font: bold 20px/1.2 Arial, Helvetica, sans-serif }
section.demoDescription .wrapLinkCodeBox a { font-size: 14px }
section.demoDescription a.linkArrowRight-LeftSide { line-height: 25px; margin-bottom: 8px }
section.demoDescription .lastItem { padding-bottom: 10px; margin-bottom: 25px; border-bottom: 1px solid #999 }
section.demoDescription div .wrapLinkCodeBox { background-color: #fffcee; float: right; padding: 5px 15px 0; margin-bottom: 20px }
section.demoDescription div .wrapLinkCodeBox a { font-weight: normal }


/* ================================================================
[x] Section > PHP demos
================================================================ */
ul.intro { font-size: 13px; line-height: 17px; margin: 0 0 30px -12px }
table { border: 1px solid darkgreen; -moz-border-radius: 6px; -webkit-border-radius: 6px; -ms-border-radius: 6px; 
-o-border-radius: 6px; border-radius: 6px }
table th { font-weight: bold }
table td { text-align: center; vertical-align: top }
table th, 
table td { border-bottom: 1px dotted #777; padding: 7px 15px; white-space: nowrap }
table tr.separated th, 
table tr.separated td { border-right: 1px dotted #777; width: 50% }
table a:link.linkBackward { margin-bottom: 5px; float: left }
table.demo-1 { width: 370px }
table.demo-1 .lastItem td { padding: 10px 35px 15px }
table.demo-1 .lastItem td a { font-size: 14px }
table.demo-1 .lastItem td a.linkArrowLeft:link { background-position: 0 5px }
table.demo-1 .lastItem td a.linkArrowLeft:hover { background-position: 0 -39px }
table.demoShop td { text-align: right }
table.shoppingCart th, 
table.shoppingCart td { text-align: right }
table.shoppingCart td.gesamt, 
table.shoppingCart td.summe { font-size: 110%; font-weight: bold }
table.shoppingCart td.summe { text-decoration: underline }
table.shoppingCart.final tr.lastItem td { text-align: left }
table.shoppingCart tr.lastItem a { margin-bottom: 0 }
table.shoppingCart.final tr.lastItem a { float: none; margin-bottom: 0 }
table.orderData { width: 417px; border }
table.orderData tr td { text-align: left }
table tr.finalActions td { font-size: 12px; line-height: 17px; height: 42px; padding: 18px 20px 0; white-space: normal }
table tr.finalActions td input { padding: 1px 18px }
table tr.finalActions td input:hover { padding: 0 17px }
table tr.finalActions td input[type=reset] { float: left }
table tr.finalActions td input[type=submit] { float: right }
table tr.finalActions.demo-1 td input[type=submit] { float: none }
label:hover, 
label:active { color: darkgreen; cursor: pointer }
input { border: 1px solid darkgreen; padding: 1px 3px; text-align: left; cursor: pointer }
input:hover { background-color: white; border-width: 2px; padding: 0 2px }
input:hover[type=text], 
input:hover[type=email], 
input:active[type=text], 
input:active[type=email] { cursor: text }
input[type=radio] { margin-right: 8px }
input:hover[type=radio], 
input:active[type=radio] { color: darkgreen }
input.name, 
input[type=email] { width: 239px }
input.street { width: 200px }
input.number { width: 26px }
input.zip { width: 42px }
input.city { width: 184px }
input.count { width: 24px; text-align: right }
tr.finalActions td input[type=submit] { font-weight: bold }
.hint { display: inline-block; padding: 10px 10px 20px; margin-top: 20px; border: 3px solid darkgreen; -moz-border-radius: 6px; 
-webkit-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px }
.hint.alert { border: 3px solid red; font-size: 110%; font-weight: bold; text-align: center; padding: 10px; width: 440px; 
color: red; margin: 0 0 -14px }
.hintNew { font-weight: bold; color: red; margin-bottom: 1px }
.hintNewAdditional { display: inline-block; font-size: 12px; line-height: 16px }
.hint.orderData { width: 417px; padding: 20px 10px 28px; margin-top: 0 }
.orderData.orderData span { font-weight: bold; color: darkgreen }
.orderData .headline { font-weight: bold; margin-bottom: 10px }
.orderData .sentData { margin: 10px 27px 30px }
.orderData a.linkArrowLeft { margin: 0 }
.orderData { white-space: normal }
.orderData .myData { margin: 15px 0 0 27px }
.orderData .myData dl.socialAndContact dt { float: left; width: 83px }
.header { font: bold 21px/1.2 Arial, Helvetica, sans-serif; color: darkgreen; margin-bottom: 5px }
.header.orderData { margin-top: 35px }
.orderInfo { margin: 20px 0 }
.orderInfo p { margin-left: 12px }
.orderInfo p span { margin-left: -14px }
.demoShop table td { text-align: left }
span.hint { color: red }
select.fileName { margin-top: 5px }
a:link.linkBackward { margin-bottom: 20px }