<Comment>/*</Comment><br/>
<Comment> * CSS Syntax Highlight Sample File (Standard)</Comment><br/>
<Comment> *</Comment><br/>
<Comment> * This file contains most CSS syntax, CSS3 properties, @media, @font-face and</Comment><br/>
<Comment> * @keyframes annotations.</Comment><br/>
<Comment> *</Comment><br/>
<Comment> * @author  Guo Yunhe guoyunhebrave@gmail.com</Comment><br/>
<Comment> * @date    2016-09-16</Comment><br/>
<Comment> */</Comment><br/>
<dsNormal></dsNormal><br/>
<Comment>/*</Comment><br/>
<Comment> * Block comment</Comment><br/>
<Comment> *</Comment><br/>
<Comment> * Alert keywords:</Comment><br/>
<Comment> * </Comment><Alert Level 2>TODO</Alert Level 2><Comment> </Comment><Alert Level 2>BUG</Alert Level 2><Comment> </Comment><Alert Level 2>FIXME</Alert Level 2><br/>
<Comment> */</Comment><br/>
<dsNormal></dsNormal><br/>
<At Rule>@charset</At Rule><Normal Text> </Normal Text><String>"UTF-8"</String><Normal Text>;</Normal Text><br/>
<dsNormal></dsNormal><br/>
<At Rule>@import</At Rule><Normal Text> url(</Normal Text><String>"components/button.css"</String><Normal Text>);</Normal Text><br/>
<dsNormal></dsNormal><br/>
<dsNormal></dsNormal><br/>
<Comment>/* Properties */</Comment><br/>
<dsNormal></dsNormal><br/>
<Normal Text>html, body {</Normal Text><br/>
<Normal Text>    </Normal Text><Property>font-family</Property><Normal Text>: </Normal Text><String>"Droid Sans"</String><Normal Text>, Arial, </Normal Text><Value>sans-serif</Value><Normal Text>;</Normal Text><br/>
<Normal Text>    </Normal Text><Property>font-size</Property><Normal Text>: </Normal Text><Value>11pt</Value><Normal Text>;</Normal Text><br/>
<Normal Text>    </Normal Text><Property>line-height</Property><Normal Text>: </Normal Text><Value>1.5em</Value><Normal Text>;</Normal Text><br/>
<Normal Text>    </Normal Text><Property>max-width</Property><Normal Text>: calc(</Normal Text><Value>100%</Value><Normal Text> - </Normal Text><Value>300px</Value><Normal Text>);</Normal Text><br/>
<Normal Text>    </Normal Text><Property>background</Property><Normal Text>: </Normal Text><Value>#fff000</Value><Normal Text>;</Normal Text><br/>
<Normal Text>    </Normal Text><Property>text-shadow</Property><Normal Text>: </Normal Text><Value>0</Value><Normal Text> </Normal Text><Value>0</Value><Normal Text> </Normal Text><Value>2px</Value><Normal Text> </Normal Text><Function>rgba</Function><Normal Text>(</Normal Text><Value>0</Value><Normal Text>, </Normal Text><Value>0</Value><Normal Text>, </Normal Text><Value>0</Value><Normal Text>, </Normal Text><Value>0.3</Value><Normal Text>);</Normal Text><br/>
<Normal Text>    </Normal Text><Property>box-sizing</Property><Normal Text>: </Normal Text><Value>border-box</Value><Normal Text>;</Normal Text><br/>
<Normal Text>}</Normal Text><br/>
<dsNormal></dsNormal><br/>
<dsNormal></dsNormal><br/>
<Comment>/* Selectors */</Comment><br/>
<dsNormal></dsNormal><br/>
<Normal Text>blockquote {</Normal Text><br/>
<Normal Text>    </Normal Text><Property>margin</Property><Normal Text>: </Normal Text><Value>0</Value><Normal Text>;</Normal Text><br/>
<Normal Text>}</Normal Text><br/>
<dsNormal></dsNormal><br/>
<Normal Text>header </Normal Text><Selector Id>#logo</Selector Id><Normal Text> {</Normal Text><br/>
<Normal Text>    </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Value>100px</Value><Normal Text>;</Normal Text><br/>
<Normal Text>}</Normal Text><br/>
<dsNormal></dsNormal><br/>
<Normal Text>div</Normal Text><Selector Id>#footer</Selector Id><Normal Text> </Normal Text><Selector Class>.link</Selector Class><Normal Text> {</Normal Text><br/>
<Normal Text>    </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Value>blue</Value><Normal Text>;</Normal Text><br/>
<Normal Text>}</Normal Text><br/>
<dsNormal></dsNormal><br/>
<Normal Text>sidebar </Normal Text><Selector Id>#subscribe</Selector Id><Normal Text> </Normal Text><Selector Class>.subscribe_form</Selector Class><Normal Text> input</Normal Text><Selector Attribute>[type=</Selector Attribute><String>"text"</String><Selector Attribute>]</Selector Attribute><Normal Text> {</Normal Text><br/>
<Normal Text>    </Normal Text><Property>font-size</Property><Normal Text>: </Normal Text><Value>20px</Value><Normal Text>;</Normal Text><br/>
<Normal Text>}</Normal Text><br/>
<dsNormal></dsNormal><br/>
<Normal Text>sidebar </Normal Text><Selector Id>#subscribe</Selector Id><Normal Text> </Normal Text><Selector Class>.subscribe_form</Selector Class><Selector Pseudo>:nth-child</Selector Pseudo><Normal Text>(2n + 1)</Normal Text><Selector Pseudo>:hover</Selector Pseudo><Normal Text> input</Normal Text><Selector Attribute>[class*=</Selector Attribute><String>"small-"</String><Selector Attribute>]</Selector Attribute><Normal Text> {</Normal Text><br/>
<Normal Text>    </Normal Text><Property>font-weight</Property><Normal Text>: </Normal Text><Value>bold</Value><Normal Text>;</Normal Text><br/>
<Normal Text>}</Normal Text><br/>
<dsNormal></dsNormal><br/>
<dsNormal></dsNormal><br/>
<Comment>/* Media Queries */</Comment><br/>
<dsNormal></dsNormal><br/>
<At Rule>@media</At Rule><Normal Text> </Normal Text><Value>print</Value><Normal Text> {</Normal Text><br/>
<Normal Text>    </Normal Text><Selector Class>.container</Selector Class><Normal Text> {</Normal Text><br/>
<Normal Text>        </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Value>100%</Value><Normal Text>;</Normal Text><br/>
<Normal Text>    }</Normal Text><br/>
<Normal Text>}</Normal Text><br/>
<dsNormal></dsNormal><br/>
<At Rule>@media</At Rule><Normal Text> </Normal Text><Value>screen</Value><Normal Text> and (</Normal Text><Property>min-width</Property><Normal Text>: </Normal Text><Value>768px</Value><Normal Text>) {</Normal Text><br/>
<Normal Text>    </Normal Text><Selector Class>.container</Selector Class><Normal Text> {</Normal Text><br/>
<Normal Text>        </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Value>600px</Value><Normal Text>;</Normal Text><br/>
<Normal Text>    }</Normal Text><br/>
<Normal Text>}</Normal Text><br/>
<dsNormal></dsNormal><br/>
<At Rule>@media</At Rule><Normal Text> </Normal Text><Value>screen</Value><Normal Text> and (</Normal Text><Property>min-width</Property><Normal Text>: </Normal Text><Value>768px</Value><Normal Text>) and (</Normal Text><Property>max-width</Property><Normal Text>: </Normal Text><Value>960px</Value><Normal Text>) {</Normal Text><br/>
<Normal Text>    </Normal Text><Selector Class>.container</Selector Class><Normal Text> {</Normal Text><br/>
<Normal Text>        </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Value>720px</Value><Normal Text>;</Normal Text><br/>
<Normal Text>    }</Normal Text><br/>
<Normal Text>}</Normal Text><br/>
<dsNormal></dsNormal><br/>
<dsNormal></dsNormal><br/>
<Comment>/* Fontface */</Comment><br/>
<dsNormal></dsNormal><br/>
<At Rule>@font-face</At Rule><Normal Text> {</Normal Text><br/>
<Normal Text>    </Normal Text><Property>font-family</Property><Normal Text>: MyHelvetica;</Normal Text><br/>
<Normal Text>    </Normal Text><Property>src</Property><Normal Text>: </Normal Text><Function>local</Function><Normal Text>(</Normal Text><String>"Helvetica Neue Bold"</String><Normal Text>),</Normal Text><br/>
<Normal Text>        </Normal Text><Function>local</Function><Normal Text>(</Normal Text><String>"HelveticaNeue-Bold"</String><Normal Text>),</Normal Text><br/>
<Normal Text>        </Normal Text><Function>url</Function><Normal Text>(MgOpenModernaBold</Normal Text><Value>.</Value><Normal Text>ttf);</Normal Text><br/>
<Normal Text>    </Normal Text><Property>font-weight</Property><Normal Text>: </Normal Text><Value>bold</Value><Normal Text>;</Normal Text><br/>
<Normal Text>}</Normal Text><br/>
<dsNormal></dsNormal><br/>
<Comment>/* Animation (Keyframes) */</Comment><br/>
<dsNormal></dsNormal><br/>
<At Rule>@keyframes</At Rule><Normal Text> slidein {</Normal Text><br/>
<Normal Text>    from {</Normal Text><br/>
<Normal Text>        </Normal Text><Property>margin-left</Property><Normal Text>: </Normal Text><Value>100%</Value><Normal Text>;</Normal Text><br/>
<Normal Text>        </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Value>300%</Value><Normal Text>;</Normal Text><br/>
<Normal Text>    }</Normal Text><br/>
<dsNormal></dsNormal><br/>
<Normal Text>    to {</Normal Text><br/>
<Normal Text>        </Normal Text><Property>margin-left</Property><Normal Text>: </Normal Text><Value>0%</Value><Normal Text>;</Normal Text><br/>
<Normal Text>        </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Value>100%</Value><Normal Text>;</Normal Text><br/>
<Normal Text>    }</Normal Text><br/>
<Normal Text>}</Normal Text><br/>
<dsNormal></dsNormal><br/>
<dsNormal></dsNormal><br/>
<Comment>/* Region markers */</Comment><br/>
<dsNormal></dsNormal><br/>
<Region Marker>/*BEGIN Comment */</Region Marker><br/>
<dsNormal></dsNormal><br/>
<dsNormal></dsNormal><br/>
<dsNormal></dsNormal><br/>
<Region Marker>/*END Comment */</Region Marker><br/>
<dsNormal></dsNormal><br/>
