@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] Footer > Me, What I do, and Contact data
[x] Section > Hidden box: Code-samples PHP demos
[x] IE 7: Style fixes


/* ================================================================
[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: 44px 48% 120px 67px; font: normal 14px/1.45 Verdana, Arial, Helvetica, sans-serif; 
text-rendering: optimizeLegibility }
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 }


/* ================================================================
[x] Footer > Me, What I do, and Contact data
================================================================ */
footer.myData { font: normal 13px/18px Verdana, Arial, Helvetica, sans-serif; margin-left: -27px }
footer.myData .details { margin-top: 14px }
footer.myData .details div { font-weight: bold; color: #293e6f; margin-bottom: 8px }
footer.myData ul.skills { margin-left: 15px }
footer.myData ul.skills a { font-weight: bold }
footer.myData ul.buttonsSocial li { list-style-type: none; float: left; margin-right: 9px }
footer.myData ul.buttonsSocial li a { background: url(../img/buttonsSocial.png) no-repeat; display: block; width: 46px; height: 31px; 
text-indent: -9999px }
footer.myData ul.buttonsSocial li a.buttonXing:hover { background-position: -100px 0 }
footer.myData ul.buttonsSocial li a.buttonLinkedin { background-position: 0 -46px }
footer.myData ul.buttonsSocial li a.buttonLinkedin:hover { background-position: -100px -46px }
footer.myData ul.buttonsSocial li a.buttonTwitter { background-position: 0 -94px }
footer.myData ul.buttonsSocial li a.buttonTwitter:hover { background-position: -100px -94px }
footer.myData ul.buttonsSocial li a.buttonFacebook { background-position: 0 -144px }
footer.myData ul.buttonsSocial li a.buttonFacebook:hover { background-position: -100px -144px }
footer.myData dl.socialAndContact dt { float: left; width: 83px }


/* ================================================================
[x] Section > Hidden box: Code-samples PHP demos
================================================================ */
section#sampleCodeBox { display: none; position: absolute; background-color: #eee; border: 1px solid #878c94; width: 1038px; height: 550px; top: 36px; 
left: 40px; font-size: 12px; line-height: 13px; padding: 10px 0 0 10px; z-index: 2; overflow: hidden; -moz-border-radius: 8px; -webkit-border-radius: 8px; 
-ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; -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: 3px 4px 4px #333 }
section#sampleCodeBox .codeSamples div { position: relative; display: inline-block; float: left; z-index: 2 }
section#sampleCodeBox .codeSamples .tabBar a,
section#sampleCodeBox .codeSamples .close a { display: block; border: 1px solid #878c94; border-top-left-radius: 8px; border-top-right-radius: 8px; 
border-bottom: 0; -moz-border-top-left-radius: 8px; -moz-border-top-right-radius: 8px; -moz-border-bottom: 0; -webkit-border-top-left-radius: 8px; 
-webkit-border-top-right-radius: 8px; -webkit-border-bottom: 0;-ms-border-top-left-radius: 8px; -ms-border-top-right-radius: 8px; -ms-border-bottom: 0; 
background-color: #ddd; color: #313d7a; font-weight: bold; text-decoration: none; line-height: 18px; padding: 0 8px 1px }
section#sampleCodeBox .codeSamples .tabBar a:hover, 
section#sampleCodeBox .codeSamples .close a:hover { text-decoration: underline; background-color: white }
section#sampleCodeBox .codeSamples .tabBar a.active, 
section#sampleCodeBox .codeSamples .close a.active { background-color: white; padding-bottom: 2px; text-decoration: underline }
section#sampleCodeBox .codeSamples div.description { margin: 13px 6px 3px 0 }
section#sampleCodeBox .codeSamples div.description.scripts { padding-top: 3px }
section#sampleCodeBox .codeSamples div.tabBar { top: 9px; margin-right: 10px }
section#sampleCodeBox .codeSamples div.tabBar div { margin-right: 10px }
section#sampleCodeBox .codeSamples .close { position: absolute; top: 19px; right: 11px }
section#sampleCodeBox .codeSamples .close a { background-color: #ddd; padding: 0 16px 1px }
section#sampleCodeBox .codeSamples #content { background-color: white; border: 1px solid #878c94; top: 0; width: 1025px; height: 504px; z-index: 1 }
section#sampleCodeBox .codeSamples #content pre { position: relative; overflow: scroll; width: 1015px; height: 504px; color: #111; padding-left: 10px; 
font: normal 12px/17px Verdana, Arial, Helvetica, sans-serif; margin-top: 0 }
section#sampleCodeBox .codeSamples #content pre span { font-weight: bold }
section#sampleCodeBox .codeSamples #content pre span.fileName { color: #1929ee }
section#sampleCodeBox .codeSamples #content pre span.headlines, 
section#sampleCodeBox .codeSamples #content pre span.styles { color: #08572f }
section#sampleCodeBox .codeSamples #content pre span.selector { color: #bb2956 }	
section#sampleCodeBox .codeSamples #content pre span.declaration { color: #3053d6 }
section#sampleCodeBox .codeSamples #content pre span.tag { color: #bb2956 }
section#sampleCodeBox .codeSamples #content pre span.comment { background-color: #ffd195 }
section#sampleCodeBox .codeSamples #content pre span.conditionalComment { color: #003db9 }
body.codeSamples section#sampleCodeBox { display: block }


/* ================================================================
[x] IE 7: Style fixes
================================================================ */
*+html tr.finalActions input { text-align: center; width: 204px }
*+html .wrapLinkCodeBox { display: inline; min-width: 1px }
*+html #sampleCodeBox .codeSamples .description { margin-right: 8px }