notebook/tools/tests/CSS Reference.ipynb

{
 "metadata": {
  "name": "All Css"
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "<center><h1> CSS Playground </h1></center>"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "A notebook that contain most of the things that could be displayed, to test CSS, feel free to add things to it, and send modification"
     ]
    },
    {
     "cell_type": "heading",
     "level": 1,
     "metadata": {},
     "source": [
      "Title first level"
     ]
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": [
      "Title second Level"
     ]
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {},
     "source": [
      "Title third level"
     ]
    },
    {
     "cell_type": "heading",
     "level": 4,
     "metadata": {},
     "source": [
      "h4"
     ]
    },
    {
     "cell_type": "heading",
     "level": 5,
     "metadata": {},
     "source": [
      "h5"
     ]
    },
    {
     "cell_type": "heading",
     "level": 6,
     "metadata": {},
     "source": [
      "h6"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "# h1\n",
      "## h2\n",
      "### h3\n",
      "#### h4\n",
      "##### h6\n",
      "\n",
      "This is just a sample paragraph\n",
      "\n",
      "> With a blockquote\n",
      "\n",
      "    def some_code():\n",
      "        return 'by indenting'\n",
      "\n",
      "```\n",
      "def some_other_code():\n",
      "    return 'bewtween_backticks'\n",
      "```"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "You can look at different level of nested unorderd list \n",
      "\n",
      "- level 1\n",
      "    - level 2\n",
      "    - level 2\n",
      "    - level 2\n",
      "        - level 3\n",
      "        - level 3\n",
      "            - level 4\n",
      "                - level 5\n",
      "                    - level 6\n",
      "    - level 2\n",
      "\n",
      "- level 1\n",
      "- level 1\n",
      "- level 1"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Ordered list \n",
      "\n",
      "1. level 1\n",
      "    2. level 1\n",
      "    3. level 1\n",
      "        4. level 1\n",
      "        1. level 1\n",
      "        2. level 1\n",
      "            2. level 1\n",
      "            3. level 1\n",
      "                4. level 1\n",
      "                1. level 1\n",
      "                2. level 1\n",
      "3. level 1\n",
      "4. level 1"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "some Horizontal line\n",
      "\n",
      "***\n",
      "\n",
      "---"
     ]
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": [
      "copy past from Daring Fireball"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "link : \n",
      "This is [an example](http://example.com/ \"Title\") inline link.\n",
      "\n",
      "[This link](http://example.net/) has no title attribute."
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "inline Html\n",
      "This is a regular paragraph.\n",
      "\n",
      "<table>\n",
      "    <tr>\n",
      "        <td>Foo</td>\n",
      "    </tr>\n",
      "</table>\n",
      "\n",
      "This is another regular paragraph."
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,\n",
      "> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.\n",
      "> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.\n",
      "> \n",
      "> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse\n",
      "> id sem consectetuer libero luctus adipiscing.\n",
      "\n",
      "---\n",
      "\n",
      "> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,\n",
      "consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.\n",
      "Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.\n",
      "\n",
      "> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse\n",
      "id sem consectetuer libero luctus adipiscing."
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "> This is the first level of quoting.\n",
      ">\n",
      "> > This is nested blockquote.\n",
      ">\n",
      "> Back to the first level."
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "> ## This is a header.\n",
      "> \n",
      "> 1.   This is the first list item.\n",
      "> 2.   This is the second list item.\n",
      "> \n",
      "> Here's some example code:\n",
      "> \n",
      ">     return shell_exec(\"echo $input | $markdown_script\");"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "1.  This is a list item with two paragraphs. Lorem ipsum dolor\n",
      "    sit amet, consectetuer adipiscing elit. Aliquam hendrerit\n",
      "    mi posuere lectus.\n",
      "\n",
      "    Vestibulum enim wisi, viverra nec, fringilla in, laoreet\n",
      "    vitae, risus. Donec sit amet nisl. Aliquam semper ipsum\n",
      "    sit amet velit.\n",
      "\n",
      "2.  Suspendisse id sem consectetuer libero luctus adipiscing."
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "*   This is a list item with two paragraphs.\n",
      "\n",
      "    This is the second paragraph in the list item. You're\n",
      "only required to indent the first line. Lorem ipsum dolor\n",
      "sit amet, consectetuer adipiscing elit.\n",
      "\n",
      "*   Another item in the same list."
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "*   A list item with a blockquote:\n",
      "\n",
      "    > This is a blockquote\n",
      "    > inside a list item."
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "*   A list item with a code block:\n",
      "\n",
      "        <code goes here>"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "1986. What a great season.\n",
      "\n",
      "1986\\. What a great season."
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "See my [About](/about/) page for details.   "
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "ref link\n",
      "This is [an example][id] reference-style link.\n",
      "\n",
      "[id]: http://example.com/  \"Optional Title Here\""
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "*single asterisks*\n",
      "\n",
      "_single underscores_\n",
      "\n",
      "**double asterisks**\n",
      "\n",
      "__double underscores__\n",
      "\n",
      "un*frigging*believable  // should render partially as bold\n",
      "\n",
      "\\*this text is surrounded by literal asterisks\\*\n",
      "\n",
      "``There is a literal backtick (`) here.``"
     ]
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": [
      "Other Notebook element"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "A small tooltip\n",
      "\n",
      "<div id=\"tooltip_p\" class=\"ipython_tooltip\" style='position:relative'><div class=\"tooltipbuttons\"><a href=\"#\" role=\"button\" class=\"ui-button\"><span class=\"ui-icon ui-icon-close\">Close</span></a><a href=\"#\" class=\"ui-corner-all\" role=\"button\" id=\"expanbutton\" title=\"Grow the tooltip vertically (press tab 2 times)\" style=\"\"><span class=\"ui-icon ui-icon-plus\">Expand</span></a><a href=\"#\" role=\"button\" class=\"ui-button\" title=\"show the current docstring in pager (press tab 4 times)\"><span class=\"ui-icon ui-icon-arrowstop-l-n\">Open in Pager</span></a><a href=\"#\" role=\"button\" class=\"ui-button\" title=\"Tootip is not dismissed while typing for 10 seconds\" style=\"display: none;\"><span class=\"ui-icon ui-icon-clock\">Close</span></a></div><div class=\"pretooltiparrow\"></div><div class=\"tooltiptext smalltooltip\">And some text inside</div></div>"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "\n",
      "\n",
      "<div id=\"tooltip_p\" class=\"ipython_tooltip\" style='position:relative'>\n",
      "    <div class=\"tooltipbuttons\">\n",
      "        <a href=\"#\" role=\"button\" class=\"ui-button\">\n",
      "            <span class=\"ui-icon ui-icon-close\">Close</span>\n",
      "        </a>\n",
      "        <a href=\"#\" class=\"ui-corner-all\" role=\"button\" id=\"expanbutton\" title=\"Grow the tooltip vertically (press tab 2 times)\" style=\"\">\n",
      "            <span class=\"ui-icon ui-icon-plus\">Expand</span>\n",
      "        </a>\n",
      "        <a href=\"#\" role=\"button\" class=\"ui-button\" title=\"show the current docstring in pager (press tab 4 times)\">\n",
      "            <span class=\"ui-icon ui-icon-arrowstop-l-n\">Open in Pager</span></a>\n",
      "        <a href=\"#\" role=\"button\" class=\"ui-button\" title=\"Tootip is not dismissed while typing for 10 seconds\" style=\"display: none;\">\n",
      "            <span class=\"ui-icon ui-icon-clock\">Close</span>\n",
      "        </a>\n",
      "    </div>\n",
      "    <div class=\"pretooltiparrow\">\n",
      "    </div>\n",
      "    <div class=\"tooltiptext bigtooltip\">This one should be big</div>\n",
      "</div>"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "\n",
      "# a code cell \n",
      "import numpy as np\n",
      "import matplotlib.pyplot as plt\n",
      "from matplotlib.colors import LightSource\n",
      "\n",
      "# example showing how to make shaded relief plots\n",
      "# like Mathematica\n",
      "# (http://reference.wolfram.com/mathematica/ref/ReliefPlot.html)\n",
      "# or Generic Mapping Tools\n",
      "# (http://gmt.soest.hawaii.edu/gmt/doc/gmt/html/GMT_Docs/node145.html)\n",
      "\n",
      "# test data\n",
      "d= 1\n",
      "def maltc(ax, lambd=1, n=1):\n",
      "    I0=1\n",
      "    I= lambda theta,d : I0*(sin(2*theta)*sin(pi*n*d/lambd))**2\n",
      "    X,Y=np.mgrid[-5:5:0.05,-5:5:0.05]\n",
      "    Z=np.sqrt(X**2+Y**2)+np.sin(X**2+Y**2)\n",
      "    \n",
      "    r= np.sqrt(X**2+Y**2)\n",
      "    theta = np.angle(X+1.0j*Y)\n",
      "    \n",
      "    Iv= np.vectorize(I)\n",
      "    Z = Iv(r,theta)\n",
      "    \n",
      "    # create light source object.\n",
      "    #ls = LightSource(azdeg=0,altdeg=65)\n",
      "    # shade data, creating an rgb array.\n",
      "    #rgb = ls.shade(Z,plt.cm.copper)\n",
      "    # plot un-shaded and shaded images.\n",
      "    #plt.figure(figsize=(12,5))\n",
      "    #plt.subplot(121)\n",
      "    ax.imshow(Z,cmap=plt.cm.copper)\n",
      "    ax.set_title('d=%d lambda=%f'%(d,lambd))\n",
      "    \n",
      "fig, (axes) = plt.subplots(3,4)\n",
      "fig.set_figheight(10)\n",
      "fig.set_figwidth(20)\n",
      "\n",
      "flatten = [item for sublist in axes for item in sublist]\n",
      "\n",
      "for ax,l in zip(flatten,range(len(flatten))):\n",
      "   maltc(ax,lambd=(l+1)*pi/8.0)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "output_type": "display_data",
       "png": "iVBORw0KGgoAAAANSUhEUgAABDEAAAJXCAYAAACKd8/wAAAABHNCSVQICAgIfAhkiAAAAAlwSFlz\nAAALEgAACxIB0t1+/AAAIABJREFUeJzsvXm0ZUV1Bv5VnemO773ufj23gB0QBAFbUBORiEaFxgmX\nMvgDASE/ZZmAicbg0iCYYFDR5S+QmCUosQFBooBGHICYgKDBGRUkoARkapqe3njvmarq90fVrqpz\n3+vu180TGjjfWrfv6zuec+45u/b+9rf3ZkophRo1atSoUaNGjRo1atSoUaNGjd0c/OnegBo1atSo\nUaNGjRo1atSoUaNGjbmgJjFq1KhRo0aNGjVq1KhRo0aNGs8I1CRGjRo1atSoUaNGjRo1atSoUeMZ\ngZrEqFGjRo0aNWrUqFGjRo0aNWo8I1CTGDVq1KhRo0aNGjVq1KhRo0aNZwRqEqNGjRo1atSoUaNG\njRo1atSo8YzAM5LEOPXUU3HOOef8Qb/jiCOOwBe/+MV5/9wHH3wQnHNIKef0+ltuuQXPe97z5n07\natSo8eRR26IaNWrsDqhtUY0aNXYH1LaoxlOFZySJwRgDY2yn3lMUBd7+9rfj+c9/PjjnuPXWW+f9\nO55JuOqqq7Dnnnui0+ngrW99K7Zu3brN17761a/GkiVLMDQ0hBe+8IW49NJLK89//OMfx5577onh\n4WG84x3vwOTkpH3ub/7mb/CCF7zAvveKK66ovFcIgb/7u7/DypUrMTQ0hJe85CUYHx8HAGRZhr/+\n67/GypUrsXDhQvzFX/wFyrK0773nnnvwmte8BiMjI9hnn33w9a9/fT4OTY0ac0Zti5485mqLHnro\nIXS73cqNc47Pfvaz9jWXXHIJ9t57bwwPD+OlL30pfvCDH9jnTj31VCRJYt87NDQEpRQAYPPmzTjs\nsMMwOjqK4eFhrFmzpmJPdmSLHnnkEbzpTW/CokWLsHz5cpx55pkQQsz3oapRY5uobdGTw+OPP443\nv/nNWLlyJTjneOihh7b7+nPOOQcHHnggoijCxz72scpz//iP/1ixU61WC0EQYMuWLQCAiYkJnHTS\nSVi8eDEWL16Mk046qeI33XnnnTjkkEPQbrdx6KGH4pe//KV9bke2qNPpVL47DEOcddZZ83GIatSY\nE2pb9OSws7Zor732QqvVstf8UUcdZZ/bkS3KsgynnXYahoeHsXz58oo/ddttt83qc11//fX2vduz\nRQDwla98BS984QvR6XSw99574/bbb5+vwwTgGUpiALDO587gT//0T3HllVdi2bJlz9qTfy64++67\nccYZZ+DLX/4yNmzYgFarhfe+973bfP1FF12ERx99FBMTE1i3bh3OPPNM3HvvvQCAdevW4corr8QP\nf/hDPPbYY+j3+zjzzDPtezudDm644Qb73ve97334n//5H/v8ueeeizvuuAN33HEHJiYmcOWVV6LR\naAAAPvGJT+DnP/857r77btx33334+c9/jvPPPx8AUJYl3vKWt+DNb34ztm7diksuuQQnnXQSfvvb\n3/4hDlmNGttEbYt2HTtji/bYYw9MTk7a269//WtwzvG2t70NgHb8P/CBD+CrX/0qxsfHcfrpp+Ot\nb32r/X0YYzj77LPt+ycmJuyx73Q6uOyyy/DEE09gfHwc5513Ho477jhMTU0B2L4tAoCzzjoLo6Oj\nWL9+Pe68807ceuut+NznPveHPHQ1asxAbYt2HZxzHH300bj22mvn9Pp99tkHF154Id7whjfMOG4f\n/vCHK7bq7LPPxqtf/WosXLgQAHDeeedh06ZNeOCBB3D//fdjw4YNOO+88wAAeZ7jLW95C04++WSM\njY3hlFNOwVve8hYbHOzIFk1NTdnvffzxx9FsNnHcccfNwxGqUWPuqG3RrmNnbRFjDDfccIO97r/7\n3e/a5+Zii+6//3489NBD+O///m986lOfwo033ggAOPzwwyvvveGGG9DpdCxJsiNbdPPNN+NDH/oQ\n1q1bh6mpKdx2221YvXr1fB0mAM8QEuMXv/gFXvKSl2BoaAgnnHAC0jTd6c+IoghnnXUWDjvsMARB\nsFPvvf/++/Ga17wGo6OjljUntQCgWbBPf/rTOOigg9DtdnH66adjw4YNWLt2LYaHh/G6170OY2Nj\nlc/84he/iJUrV2LFihX4zGc+Yx/v9/s49dRTsXDhQhxwwAH4yU9+UnnfJz7xCey9994YGhrCAQcc\nsEvqgy9/+ct485vfjFe+8pVot9v4h3/4B1x33XWYnp6e9fWUbSB0Oh0MDQ0BAL75zW/i9NNPx8qV\nK9Fut3H22Wfjmmuusb/Reeedhxe84AUAgJe97GU4/PDDLYmxdetW/NM//RMuvfRSK8faf//9kSQJ\nAOCGG27AmWeeiZGREYyOjuKss87CZZddBgD43//9X6xfvx5/9Vd/BcYYXv3qV+Owww6bofSoUWM+\nUdsih6fDFvlYt24dXvWqV2GPPfYAAPzmN7/B/vvvjzVr1gAA3vnOd2LTpk144okn7Hu25VglSYJ9\n993Xykg55xgdHUUcxwC2b4sATcYcf/zxiOMYS5cuxVFHHYW77757p49HjRpzRW2LHObDFi1ZsgRn\nnHEGDj300Dm9/uSTT8ZRRx2Fbre73YBNKYV169bhlFNOsY/dfffdOOaYY6wvdcwxx1h7ccstt0AI\ngfe9732IoghnnnkmlFL4r//6LwA7tkU+vva1r2Hp0qV45StfOdfDUKPGTqO2RQ5Phy0C5kYazWaL\nLr/8cpxzzjkYHh7Gfvvth3e/+9340pe+NOv7v/SlL+HYY49Fs9kEsGNbdO655+Lcc8/Fy172MgDA\n8uXLsWLFijnv01yw25MYeZ7jmGOOwSmnnIKtW7fi2GOPxbXXXmtZuoceeggLFizY5u0rX/nKvGzH\nRz7yEaxfvx733HMPHn74YcuaA5oFu+666/C9730P9957L2644QasXbsWn/jEJ/DEE09ASomLLrqo\n8nm33HILfve73+Gmm27CJz/5SXzve98DAHzsYx/DAw88gP/7v//DjTfeiHXr1lUYSZLjTExM4Nxz\nz8VJJ52EDRs2AABuv/327R6LH/7whwC0s3/wwQfbz1y9ejWSJMF99923zf1/4xvfiGaziSOOOAKX\nXXYZli9fbvfdv3iklMiybFZFRL/fx09+8hO86EUvAgD8+te/RhiG+OpXv4rly5dj3333nZG9HPzs\nRx55pCK79CGlxF133bXNfahR48mgtkW7hy0CtF24/PLLK4vx4YcfjgceeAA//vGPIYTAZZddhjVr\n1mDp0qX2NZ/73OewaNEiHHroobjuuutmfO5BBx2EZrOJU089Fddff70lMeg7CYO26Mgjj8RVV12F\nfr+PRx99FN/5znewdu3a7e5DjRq7itoWzb8t+kPhtttuw8aNG61iDND24tprr8XY2Bi2bt2Ka6+9\nFkcffTQATXAcdNBBlc84+OCDK6ToXP2idevW4eSTT57vXapRw6K2RbuHLTrxxBOxZMkSHHnkkfjV\nr34162sGbdHWrVuxfv36ig920EEHzZqAmZ6exrXXXlvxuYBt2yIhBH72s5/hiSeewD777IPnPe95\nOPPMM3eJ4Nou1G6OW2+9Va1YsaLy2Cte8Qp1zjnn7PJnrlq1St16663bfc0RRxyhvvjFL8763PXX\nX6/WrFlj/7/XXnupq666yv7/bW97m3rve99r/3/xxRerY445Riml1AMPPKAYY+ree++1z//t3/6t\nOv3005VSSq1evVrdeOON9rlLLrlErVq1apvb+eIXv1h94xvf2O6+DOLP/uzP1Oc///nKYytXrtzh\nMSnLUn31q19VCxYsUL///e+VUkp94QtfUC94wQvUgw8+qMbGxtSb3vQmxRhTd9xxx4z3n3zyyWrt\n2rX2/1/+8pcVY0z9+Z//uUrTVP3qV79SixcvVjfffLNSSqm/+7u/U4cddpjauHGjWr9+vXrZy16m\nOOfq8ccfV3meq9WrV6tPfepT
       "text": [
        "<matplotlib.figure.Figure at 0x10d54f550>"
       ]
      }
     ],
     "prompt_number": 9
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from __future__ import print_function\n",
      "import sys\n",
      "print('stdout')\n",
      "print('stderr',file=sys.stderr)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "output_type": "stream",
       "stream": "stdout",
       "text": [
        "stdout\n"
       ]
      },
      {
       "output_type": "stream",
       "stream": "stderr",
       "text": [
        "stderr\n"
       ]
      }
     ],
     "prompt_number": 16
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "<table class='table-striped table-condensed'>\n",
      "    <thead>\n",
      "        <tr>\n",
      "        <td>This is table</td>\n",
      "        <td>Head</td>\n",
      "        </tr>\n",
      "    </thead>\n",
      "    <tbody>\n",
      "        <tr>\n",
      "            <td>but thi</td>\n",
      "            <td>is the </td>\n",
      "        </tr>\n",
      "        <tr>\n",
      "            <td>body</td>\n",
      "            <td>of </td>\n",
      "        </tr>\n",
      "        <tr>\n",
      "            <td>The</td>\n",
      "            <td>table</td>\n",
      "        </tr>\n",
      "    </tbody>\n",
      "</table>"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    }
   ],
   "metadata": {}
  }
 ]
}