This is a message.

A large skin for Dateinput

Because the calendar is an overlayed element it is possible to use a large layout and the user experience won't suffer - quite the contrary.

standalone demo

CSS coding

The initialization of the dateinput is identical to the minimal setup, only a different CSS file has been used for the look and feel of the calendar control. It uses only two very (0.28 Kb) small (1.30 Kb) background gradient images and some of the latest CSS techniques. For example: 

#calbody {
	/* background gradient with image. background color can be changed */
	background:#F5F9FF url(gradient/h300.png) repeat-x;
 
	/* CSS shadow for the calendar body */
	-moz-box-shadow:0 0 10px 0px #ccc;
	-webkit-box-shadow:0 0 10px 0px #ccc;
}
 
/* styling of the current date */
#caltoday {
	/* some shadow for the text */
	text-shadow:0 1px 0 #000;
 
	/* inner shadow */
	-moz-box-shadow:inset 0 0 10px 0px #000;
}

CSS

Obviously all these nice CSS tricks won't work in every browser. It is up to you to decide what kind of compromises you want to make. Take a look at the skinning documentation for the details of CSS id and class names.