<html>

<head>
    <title>Padel Tournaments System</title>
    <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8">
</head>

<body>
<header>
    <div class="logoBox">
        <a class="header_link" href="../index.html"><img class="logo" src="../_global/logo.svg" alt="Logo error"></a>
    </div>
    <div class="linkBox">
        <!--            <span class="dot">JM</span>-->
        <button class="loginButton" type="submit" onclick="window.location.href='../logowanie/index.html'">LOGOWANIE</button>
        <a class="header_link" href="../kontakt/index.html">Kontakt</a>
        <a class="header_link" href="../ranking/index.html">Ranking</a>
        <a class="header_link" href="../index.html">Kalendarz turniejów</a>
    </div>
</header>


    <div class="container">
        <div class="tournametns_add">
            <style scoped>
                ul {
                    margin: 0;
                    padding: 0;
                }

                li * {
                    float: left;
                }

                li,
                h3 {
                    clear: both;
                    list-style: none;
                }

                input,
                button {
                    outline: none;
                }

                button.edit {
                    padding: 10px;
                }

                button.delete {
                    padding: 10px;
                }

                button {
                    background: none;
                    border: 0px;
                    color: #888;
                    font-size: 15px;
                    width: 60px;
                    font-family: Lato, sans-serif;
                    cursor: pointer;
                }

                button:hover {
                    color: #333;
                }

                h3,
                label[for='new-task'] {
                    color: gray;
                    font-weight: 700;
                    font-size: 15px;
                    border-bottom: 2px solid #333;
                    padding: 30px 0 10px;
                    margin: 0;
                    text-transform: uppercase;
                }

                input[type="text"] {
                    margin: 0;
                    font-size: 18px;
                    line-height: 18px;
                    height: 18px;
                    padding: 10px;
                    border: 1px solid #ddd;
                    background: #fff;
                    border-radius: 6px;
                    font-family: Lato, sans-serif;
                    color: #888;
                }

                input[type="text"]:focus {
                    color: #333;
                }

                /* Nowy turniej */
                label[for='new-task'] {
                    display: block;
                    margin: 0 0 20px;
                }

                input#new-task {
                    float: left;
                    width: 318px;
                }

                p>button:hover {
                    color: #0FC57C;
                }

                /*lista turniejów*/
                li {
                    overflow: hidden;
                    padding: 20px 0;
                    border-bottom: 1px solid lightblue;
                }

                li>input[type="checkbox"] {
                    margin: 0 10px;
                    position: relative;
                    top: 15px;
                }

                li>label {
                    font-size: 18px;
                    line-height: 40px;
                    width: 237px;
                    padding: 0 0 0 11px;
                }

                li>input[type="text"] {
                    width: 226px;
                }

                li>.delete:hover {
                    color: #CF2323;
                }

                ul li input[type=text] {
                    display: none;
                }

                ul li.editMode input[type=text] {
                    display: block;
                }

                ul li.editMode label {
                    display: none;
                }
            </style>
            <p>
                <label for="new-task">Dodawanie turnieju</label>
                <input id="new-task" type="text">
                <button>Dodaj</button>
            </p>

            <h3>Turnieje</h3>
            <ul id="incomplete-tasks">
                <li>
                    <input type="checkbox">
                    <label>Turniej w Rzeszowie</label>
                    <input type="text">
                    <button class="edit">Edytuj</button>
                    <button class="delete">Usuń</button>
                </li>
                <li class="editMode">
                    <input type="checkbox">
                    <label>Turniej w Łodzi</label>
                    <input type="text" value="Turniej w">
                    <button class="edit">Edytuj</button>
                    <button class="delete">Usuń</button>
                </li>
            </ul>

            <h3>Rankingowe</h3>
            <ul id="completed-tasks">
                <li>
                    <input type="checkbox" checked="">
                    <label>Turniej w Warszawie</label>
                    <input type="text">
                    <button class="edit">Edycja</button>
                    <button class="delete">Usuń</button>
                </li>
            </ul>
        </div>
    </div>
</body>

<script type="text/javascript" src="myscript.js"></script>

</html>